@import "{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: 0
          border-bottom: solid 1px #6fbde2
          height: $tableHeaderHeight
    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
            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')

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

          &.disabled
            opacity: 0.2
            
          &.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'

        &: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