@import "{ohif:design}/app"

$tableHoverColor = #2c363f
$tableTextPrimaryColor = white
$tableHeaderHeight = 50px
$bodyCellHeight = 30px

#studyAssociationTable
  color: #fff
  
  .header
    text-align: center

  .center
    text-align: center
  
  #associationInstructions
    theme('background', '$uiGrayDarker')
    margin-bottom: 2px
    padding: 0 15px
    
  .tableHeaderBackground
    theme('background-color', '$uiGrayDarker')
    position: absolute
    height: $tableHeaderHeight + 1px
    left: 0
    width: 100%
    z-index: 1
    border-bottom: solid 1px
    theme('border-bottom-color', '$largeNumbersColor')
  
  table
    z-index: 2
    position: relative
    
    thead
      tr
        th
          padding-bottom: 5px
          border-bottom: solid 1px #6fbde2
          height: $tableHeaderHeight
          font-weight: normal
          
    tbody
      tr
        padding: 5px
        background-color: black

        &:nth-child(even)
          theme('background-color', '$uiGrayDarker')

        td
          position: relative
          height: $bodyCellHeight
          line-height: $bodyCellHeight
          color: $tableTextPrimaryColor
          border-top: 1px solid #436270
          border-bottom: 1px solid #436270
          vertical-align: middle
          transition(all 0.1s ease)
          
          p
            margin: 0

          &.timepointOptions
            label
              font-weight: 200
              cursor: pointer
              
            input
              margin: 0 3px
              
              &[type="radio"]
                border: 0
                clip: rect(0 0 0 0)
                height: 1px
                margin: -1px
                overflow: hidden
                padding: 0
                position: absolute
                width: 1px
                
              & + span
                display: block
                position: absolute
                border: 2px solid #c8c8c8
                border-radius: 100%
                height: 15px
                width: 15px
                top: 2px
                left: 0
                padding: 3px
                z-index: 5
                transition: border .25s linear
                -webkit-transition: border .25s linear
                
              & + span:before
                display: block
                content: ''
                border-radius: 100%
                height: 100%
                width: 100%
                transition: background 0.25s linear
                -webkit-transition: background 0.25s linear

              &:checked + span
                theme('border-color', '$activeColor')
                
                &:before
                  theme('background-color', '$activeColor')

              &:disabled
                & + span
                  border-color: #535960 !important

                &:checked + span
                  border-color: #0D4256 !important

                  &:before
                    background-color: #0D4256 !important

            label
              padding: 0 5px
              padding-left: 20px
              display: inline-block
              position: relative
              line-height: initial

          &.checkboxWrapper
            label
              display: block
              margin: 0

            input
              margin: 0 3px
              
              &[type="checkbox"]
                border: 0
                clip: rect(0 0 0 0)
                height: 1px
                margin: -1px
                overflow: hidden
                padding: 0
                position: absolute
                width: 1px
                
              & + span
                display: block
                border: 1px solid #b6b6b6
                background-color: white
                border-radius: 2px
                height: 16px
                width: 16px
                margin: 0 auto
                z-index: 5
                transition: border .25s linear
                -webkit-transition: border .25s linear
                
              & + span:before
                display: block
                position: relative
                content: ''
                font-size: 9px
                top: -7px
                color: white
                background-color: transparent
                transition: background 0.25s linear
                -webkit-transition: background 0.25s linear

              &:checked + span
                theme('background-color', '$activeColor')
                
                &:before
                  content: '\2713'

        &.disabled
          td
            color: #535960
            
        &:hover, &:active, &.active
          background-color: $tableHoverColor
          color: white

          td
            // This selector is necessary to override bootstrap's 'table' class
            border-top: 1px solid #436270
            border-bottom: 1px solid #436270
            background-color: $tableHoverColor
