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

#poll-modal
  $hero-yellow-text: rgb(252, 201, 53)

  //- Top-level modal container
  .modal-dialog
    margin-top: 0
    padding-top: 0
    width: 750px

    .modal-content
      position: relative
      margin-top: -251px

  @media only screen and (max-height: 720px)
    .modal-dialog
      margin-top: -76px

  //- Header
  
  .background-wrapper
    //background: url("/images/pages/play/level/modal/victory_modal_background.png")
    width: 750px
    background: transparent
    border: 0px solid transparent
    border-style: solid
    border-image: url("/images/pages/play/level/modal/victory_modal_border_background.png") 250 0 100 0 fill round
    border-width: 250px 0 100px 0
    border-radius: 12px

  .modal-header
    border: none
    position: absolute
    left: 188px
    width: 378px
    height: 134px
    margin: 0
    padding: 0

    .close
      display: none

    h1
      position: absolute
      left: 0
      top: 90px
      margin: 0
      width: 380px
      text-align: center
      color: rgb(254,188,68)
      font-size: 28px
      text-shadow: black 2px 2px 0, black -2px -2px 0, black 2px -2px 0, black -2px 2px 0, black 2px 0px 0, black 0px -2px 0, black -2px 0px 0, black 0px 2px 0

  //- Body

  .modal-body
    padding: 0 20px
    min-height: 30px
    margin-top: 160px

  .description
    margin: 20px 5px 0 5px
    color: white
    text-align: center
  
  .answers-container-wrapper
    margin-top: 5px
    border: 4px solid rgb(26, 21, 17)

    .answers-container
      background-color: rgb(45, 36, 29)
      border: 4px solid rgb(74, 61, 48)
      padding: 15px

  table.table
    margin-bottom: 0

  tr.answer
    &:not(.selected) td
      background-color: rgb(74, 61, 48)
      border-color: lighten(rgb(74, 61, 48), 10%)

    &:hover:not(.selected) td
      background-color: lighten(rgb(74, 61, 48), 10%)

    &.selected td
      background-color: rgb(33, 28, 21)
      border-color: lighten(rgb(33, 28, 21), 10%)

    &:not(.selected)
      cursor: pointer

    td
      vertical-align: middle

      code
        padding: 2px 4px
        font-size: 90%
        color: white
        background-color: #333
        border-radius: 3px
        @include box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .25))

      &.graph-cell
        min-width: 200px

      p
        margin: 0
        color: white

      .progress
        width: 100%
        margin-bottom: 0
        background-color: rgb(45, 36, 29)
        border-radius: 10px

        .progress-bar
          background-color: rgb(245, 170, 49)
          border-radius: 10px
          border: 3px solid rgb(45, 36, 29)
          @include transition(none)

      &.votes-cell
        max-width: 34px

        .badge
          background-color: rgb(245, 170, 49)
          color: rgb(45, 36, 29)

  table:not(.answered)
    tr
      text-align: center

    .graph-cell, .votes-cell
      display: none

  .random-gems-container-wrapper
    width: 558px
    height: 115px
    background: transparent url(/images/pages/play/modal/random-gems-background.png) no-repeat 100% 100%
    padding: 25px
    margin: 10px auto

    &:not(.answered)
      display: none

    .random-gems-container

      .random-gems-code
        font-size: 14px
        display: block
        white-space: pre
        padding: 2px 4px 
        font-size: 90%
        color: black
        background-color: transparent
        border-radius: 0
        margin-bottom: 5px

        .comment
          font-weight: bold
          color: darken(rgb(245, 170, 49), 30%)

  //- Footer - other stuff
  
  .modal-footer
    // Negative bottom margin counteracts most of the extra the border image height.
    margin: 0 0 -80px 0
    padding: 0 20px
    text-align: center

  .done-button
    float: right
    height: 60px
    min-width: 100px
    line-height: 30px
    margin: 0 10px

html.no-borderimage
  #poll-modal
    .modal-dialog
      margin-top: 251px
    .background-wrapper
      border: 0
      background: url("/images/pages/play/level/modal/victory_modal_background.png")
      height: 713px

    @media only screen and (max-height: 720px)
      .modal-dialog
        margin-top: 175px