@import "{design}/app"

$tableHoverColor = #2c363f
$tableTextPrimaryColor = white
$tableTextSecondaryColor = #91b9cd

$inputBackgroundColor = #2c363f
$inputPlaceholderColor = lightgray

$studyListToolbarHeight = 75px
$bodyCellHeight = 40px

.studyListToolbar
  theme('background', '$uiGrayDarker')
  height: $studyListToolbarHeight
  margin-bottom: 2px
  padding: 0 $studyListPadding

  &>div
    display: inline-block

  .header
    font-size: 22px
    font-weight: 300
    color: $tableTextSecondaryColor
    line-height: $studyListToolbarHeight

  .studylistToolbar
    height: $studyListToolbarHeight
    line-height: $studyListToolbarHeight

  .studyCount
    theme('color', '$largeNumbersColor')
    font-size: 40px
    font-weight: 100
    line-height: $studyListToolbarHeight

.theadBackground
  height: 121px
  position: absolute
  width: 100%

  &:before, &:after
    content: ''
    display: block
    left: 0
    position: absolute
    width: 100%

  &:before
    theme('background-color', '$uiGrayDarker')
    height: 100%
    top: 0
    z-index: 1

  &:after
    theme('background-color', '$largeNumbersColor')
    bottom: -1px
    height: 1px
    z-index: 3

#studyListContainer
  width: 100%
  padding: 0 $studyListPadding
  position: absolute
  z-index: 2

  .loadingTextDiv
    color: $tableTextSecondaryColor
    font-size: 30px

  .notFound
    color: $tableTextSecondaryColor
    font-size: 30px
    font-weight: 200
    text-align: center

  table#tblStudyList
    thead
      white-space: nowrap

      tr
        th
          padding: 0
          border-bottom: solid 1px #6fbde2
          width: 100%

          &:first-child
            padding-left: $tablePadding

          &:last-child
            padding-right: $tablePadding

          div.sortingCell
            display: inline-block
            cursor: pointer
            width: 100%
            min-width: 95px
            margin: 0 auto
            color: $tableTextPrimaryColor
            font-weight: 400
            padding: 20px

            span
              font-size: 15px
              float: left

            i
              margin: 0 5px

            &:hover
              theme('color', '$activeColor')

            &.active, &:active
              theme('color', '$activeColor')

          input.studylist-search
            height: 34px
            margin: 0 5px 20px 5px
            padding: 20px
            cursor: pointer
            border: none
            background-color: $inputBackgroundColor
            color: $inputPlaceholderColor
            font-size: 10pt
            font-weight: normal
            width: calc(100% - 10px)
            border-radius: 4px
            box-sizing: border-box

            transition(all 0.15s ease)
            placeholder-color($inputPlaceholderColor)

            &.invisible
              visibility: hidden

            &:active, &:hover
              background-color: $inputBackgroundColor

      ::-webkit-datetime-edit-year-field:not([aria-valuenow]),
      ::-webkit-datetime-edit-month-field:not([aria-valuenow]),
      ::-webkit-datetime-edit-day-field:not([aria-valuenow])
        color: transparent

    tbody
      tr
        padding: 5px
        background-color: black

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

        td
          height: $bodyCellHeight
          line-height: $bodyCellHeight
          color: $tableTextPrimaryColor
          font-weight: 300
          border-top: 1px solid #436270
          border-bottom: 1px solid #436270
          white-space: nowrap
          transition(all 0.1s ease)

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

@media only screen and (max-width: 1362px)
  $tablePadding = 5%
  
  #studyListContainer
    padding: 0 $tablePadding
    
    table#tblStudyList
      thead,
      tbody
        tr
          th,
          td
            &:first-child
              padding-left: $tablePadding

            &:last-child
              padding-right: $tablePadding

@media only screen and (max-width: 1161px)
  $tablePadding = 3%
  
  #studyListContainer
    padding: 0 $tablePadding
    
    table#tblStudyList
      thead,
      tbody
        tr
          th,
          td
            &:first-child
              padding-left: $tablePadding

            &:last-child
              padding-right: $tablePadding

@media only screen and (max-width: 1069px)
  $tablePaddingMediumScreen = 5px
  
  .theadBackground
    height: 101px

  .studyListToolbar
    padding: 0 $tablePaddingMediumScreen
    
  #studyListContainer
    padding: 0

    table#tblStudyList
      thead > tr > th
        
        &:first-child
          padding-left: $tablePaddingMediumScreen

        &:last-child
          padding-right: $tablePaddingMediumScreen
          
        input.worklist-search
          padding: 10px
          
        div.sortingCell
          padding: 10px 5px
          
          i
            width: auto

      tbody > tr > td
        &:first-child
          padding-left: $tablePaddingMediumScreen

        &:last-child
          padding-right: $tablePaddingMediumScreen
    
    .worklistPagination
      .row
        margin-left: 0
        margin-right: 0