@import ../../style-globals/_mixins.sass
@import ../../style-globals/_variables.sass

.simulation-icons
  text-align: right

.simulation-icons div, .simulation-icons a
  display: inline-block
  width: 35px
  height: 35px
  margin-right: 5px
  padding: 5px
  font-size: 12pt
  color: white
  +border-radius(100%)
  +clickable
  +transition(background, $transition-length)

  span
    position: relative
    left: -6px

  background-color: $blue-dark

  &.open
    $icon-color: #0a00bf

    &:hover
      background: lighten($icon-color, 10%)

    &:active
      background: darken($icon-color, 10%)

  &.users
    $icon-color: #17bf55

    span
      left: -3px

    &:hover
      background: $icon-color

    &:active
      background: darken($icon-color, 10%)

  &.delete
    $icon-color: #e3474d

    &:hover
      background: $icon-color

    &:active
      background: darken($icon-color, 10%)