codecombat/app/styles/play/modal/play-achievements-modal.sass

@import "app/styles/mixins"

#play-achievements-modal
  .modal-dialog
    width: 800px

  .modal-header
    padding-bottom: 20px
  
  img.icon
    float: left
    width: 40px
    margin-right: 10px

    
  //- Unachieved Panels

  .panel
    margin: 5px 0
    position: relative
    border: 2px solid rgb(75,75,75)
    padding: 2px
    @include opacity(0.75)
    
    h3
      margin: 0 0 0 50px
      color: rgb(75,75,75)

    p
      margin: 0 0 0 50px
      color: rgb(75,75,75)

    .panel-body
      padding: 5px 150px 5px 5px
      //border: 2px solid rgb(150,150,150)  // Chloe's suggestion to not have this
      
    .created
      position: absolute
      right: 10px
      top: 5px
      color: rgb(75,75,75)
      font-size: 12px


  //- Achieved Panels
    
  .panel.earned
    background: rgb(50,40,33)
    border: 5px solid rgb(26,21,17)
    padding: 0
    @include opacity(1)
    
    h3
      color: white
      
    p
      color: rgb(203,170,148)

    .panel-body
      border: 2px solid rgb(75,62,51)
      
    .created
      color: rgb(255,189,68)


  //- Rewards
    
  .rewards
    position: absolute
    right: .2em
    //bottom: 10px
    top: 29px
    
    .label
      font-size: 18px
      margin-left: 5px
      color: rgb(50,40,33)
      background: rgb(203,170,148)
      
    .gems
      background: #94ccc7
      
    .worth
      background: #d8c488
    
    img
      width: 12px
      height: 12px