codecombat/app/styles/play/ladder/play_modal.sass

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

#ladder-play-modal
  #noob-view p
    font-size: 30px
  
  #skip-tutorial-button
    font-size: 16px
  
  .tutorial-suggestion
    text-align: center
    font-size: 18px
    margin: 10px 0 30px
  
  .play-option
    margin-bottom: 15px
    width: 100%
    height: 100px
    overflow: hidden
    background: white
    border-radius: 8px
    position: relative
    @include transition(opacity 0.3s ease-in-out, margin 0.1s linear, box-shadow 0.1s linear)
    
    .only-one
      opacity: 0

    box-shadow: 2px 2px 4px black

  #normal-view:hover
    .play-option
      opacity: 0.4
    
    .play-option:hover
      opacity: 1
      box-shadow: 4px 4px 6px black
      margin-left: -2px
      margin-top: -2px
      margin-bottom: 17px
      .only-one
        opacity: 1
    
  .my-icon
    position: relative
    left: 0
    top: -10px
    z-index: 1
    
  .my-team-icon
    height: 60px
    position: relative
    top: -3.5px
    left: 13.5px
    z-index: 0
    
  .opponent-team-icon
    height: 60px
    position: relative
    top: 16.5px
    right: 13.5px
    z-index: 0
    float: right
    -moz-transform: scaleX(-1)
    -o-transform: scaleX(-1)
    -webkit-transform: scaleX(-1)
    transform: scaleX(-1)
    filter: FlipH
    -ms-filter: "FlipH"
    
  .opponent-icon
    position: relative
    float: right
    right: 0
    top: -10px
    -moz-transform: scaleX(-1)
    -o-transform: scaleX(-1)
    -webkit-transform: scaleX(-1)
    transform: scaleX(-1)
    filter: FlipH
    -ms-filter: "FlipH"
    z-index: 1
    
  .name-label
    height: 20px
    width: 40%
    position: absolute
    bottom: 0
    color: white
    font-weight: bold
    text-shadow: -1px -1px 0px black
    text-align: center
    z-index: 2
    
    span
      position: relative
      top: 4px

    .code-language
      position: absolute
      background: transparent url(/images/common/code_languages/javascript_small.png) no-repeat center center
      background-size: contain
      width: 50px
      height: 50px
      right: -0px
      top: -30px
      display: block

  .my-name
    border-right: 15px solid transparent
    left: 0
    span
      left: 3px
    
  .opponent-name
    border-left: 15px solid transparent
    right: 0
    //text-align: right
    span
      right: 3px
  
  .difficulty
    height: 0
    width: 30%
    position: absolute
    left: 35%
    top: 0
    color: black
    text-align: center
    font-size: 18px
    font-weight: bold

    span
      position: relative
      top: 6px

  .play-option
    background-image: url(/images/pages/play/ladder/warmup_button.png)
      
  .easy-option
    background-image: url(/images/pages/play/ladder/easy_button.png)
      
  .medium-option
    background-image: url(/images/pages/play/ladder/medium_button.png)
    
  .hard-option
    background-image: url(/images/pages/play/ladder/hard_button.png)
    .difficulty
      color: white

  .vs
    position: absolute
    left: 40%
    right: 40%
    text-align: center
    top: 35px
    font-size: 40px
    font-weight: bolder
    color: black