@import "app/styles/bootstrap/mixins"
@import "app/styles/mixins"

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

+keyframes(winnablePulse)
  from
    @include box-shadow(0px 0px 8px #333)
    color: white
  50%
    @include box-shadow(0px 0px 35px #87FFCE)
    color: #87FFFF
  to
    @include box-shadow(0px 0px 8px #333)
    color: white

#cast-button-view
  display: none
  position: absolute

  z-index: 2
  width: 100%
  border-radius: 6px

  .btn
    padding: 3px 10px
    height: 40px
    font-size: 22px

  .submit-button
    margin-left: 20px
    min-width: 150px
  
  .cast-button
    margin-left: 10px
    min-width: 150px
    @include opacity(0.77)
  
    &:hover, &.castable
      @include opacity(1)
  
  &:not(.winnable)

    .cast-button.castable
      font-weight: bold
      -webkit-animation-name: castablePulse
      -webkit-animation-duration: 3s
      -webkit-animation-iteration-count: infinite

    .submit-button
      font-size: 16px

  &.winnable
    .submit-button
      font-weight: bold
      -webkit-animation-name: winnablePulse
      -webkit-animation-duration: 3s
      -webkit-animation-iteration-count: infinite

    .cast-button
      font-size: 16px