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

#main-ladder-view
  .level
    width: 100%
    position: relative
    margin-bottom: 20px
    text-shadow: 2px 2px 5px black

    &:hover div, &:hover .dynamic-level-name
      color: lighten($yellow, 20%)

    &:hover img
      filter: brightness(1.2)
      -webkit-filter: brightness(1.2)
      box-shadow: 0 0 5px black

    .level-image
      width: 100%

    .dynamic-level-name
      position: absolute
      z-index: 1
      top: 40px
      width: 100%
      text-align: center

      text-shadow: 0px 5px 5px black, -2px 0px 2px black, 2px 0px 2px black, 0px -2px 2px black
      font-size: 72px
      color: $yellow
      font-family: $headings-font-family
      font-variant: small-caps
      @include transition(color .10s linear)

    .overlay-text
      color: $yellow
      font-family: $headings-font-family
      font-variant: small-caps
      @include transition(color .10s linear)

    .level-difficulty
      position: absolute
      left: 0px
      bottom: 0px
      font-size: 25px
      padding-right: 10px
      background-color: rgba(255, 255, 255, 0.75)
      border-radius: 6px

    .play-text-container
      position: absolute
      left: 50%
      bottom: -10px

      .play-text
        margin-left: -50%
        font-size: 50px

  a[disabled] .level
    opacity: 0.7

  a.complete .level-difficulty:after
    content: " - Complete!"
    color: $yellow

  a.started .level-difficulty:after
    content: " - Started"
    color: desaturate($yellow, 50%)