codecombat/app/styles/play/level/tome/cast_button.sass

@import "../../../bootstrap/mixins"

// keyframes mixin from https://gist.github.com/ericam/1607696
=keyframes($name)
  @-webkit-keyframes #{$name}
    @content
  @-moz-keyframes #{$name}
    @content
  @-ms-keyframes #{$name}
    @content
  @-o-keyframes #{$name}
    @content
  @keyframes #{$name}
    @content

+keyframes(castablePulse)
  from
    @include box-shadow(0px 0px 8px #333)
  50%
    @include box-shadow(0px 0px 35px skyblue)
  to
    @include box-shadow(0px 0px 8px #333)

+keyframes(castablePulseButton)
  from
    color: white
  50%
    color: skyblue
  to
    color: white

#cast-button-view
  display: none
  position: absolute
  width: 35%

  .cast-button-group
    z-index: 2
    @include opacity(0.77)
    width: 100%
    border-radius: 6px
    
    .button-progress-overlay
      position: absolute
      left: -1px
      top: -1px
      bottom: -1px
      border-radius: 6px
      z-index: 10
      pointer-events: none
      // This transition time should roughly match the world progress update interval
      @include transition(width .2s linear)
      @include transition(box-shadow .2s linear)

    &.casting .button-progress-overlay
      background-color: green
      @include opacity(0.5)
      @include box-shadow(0px 0px 15px green)

    &:hover, &.castable
      @include opacity(1)

    &.castable
      -webkit-animation-name: castablePulse
      -webkit-animation-duration: 3s
      -webkit-animation-iteration-count: infinite

      .cast-button
        font-weight: bold
        -webkit-animation-name: castablePulseButton
        -webkit-animation-duration: 3s
        -webkit-animation-iteration-count: infinite
    &:not(.castable):not(:hover)
      .cast-options-button
        // Mimic the disabled visuals
        @include opacity(0.65)
        background-image: none
        @include box-shadow(none)
        
    .btn
      padding: 3px 10px
      height: 40px

    .cast-button
      width: 80%
      width: -webkit-calc(100% - 40px)
      width: calc(100% - 40px)
      border-top-left-radius: 6px
      border-bottom-left-radius: 6px

      @media screen and (max-width: 1440px)
        font-size: 16px
      @media screen and (max-width: 1280px)
        font-size: 14px
      @media screen and (max-width: 1024px)
        font-size: 12px

    .cast-options-button
      width: 20%
      width: -webkit-calc(40px)
      width: calc(40px)

    .autocast-delays
      min-width: 0
      right: 0
      left: auto
      li
        a, .dropdown-menu-header
          padding: 3px 15px
        a.selected
          font-weight: bold