@import "{design}/app"

$headerRowHeight = 63px

.lesionTableHeaderRow
  theme('background-color', '$uiGrayDarker')
  theme('color', '$textSecondaryColor')
  display: flex
  theme('fill', '$textSecondaryColor')
  height: $headerRowHeight
  line-height: $headerRowHeight
  margin-top: 2px
  width: 100%

  &.inactive .add
    cursor: not-allowed

    svg
      fill: #5A666D

  div
    align-items: stretch
    flex: 1
    justify-content: space-around
    text-align: center

  .add
    cursor: pointer
    max-width: 30px
    padding-left: 2px

    svg
      fill: #C1D8E3
      height: $headerRowHeight
      max-width: 11px

      &:hover
        theme('fill', '$hoverColor')

      &:active
        theme('fill', '$activeColor')

  .type
    theme('color', '$textSecondaryColor')
    font-size: 22px
    font-weight: 300
    line-height: $headerRowHeight
    padding: 0 10px
    text-align: left

  .numberOfLesions
    theme('color', '$uiSkyBlue')
    float: right
    font-weight: 300
    font-size: 40px
    max-width: 54px
    height: $headerRowHeight
    line-height: 66px

  .max
    height: $headerRowHeight
    max-width: 64px
    text-align: right

    .maxNumLesions
      theme('background-color', '$textSecondaryColor')
      border-radius: 3px
      color: black
      display: table
      font-size: 12px
      font-weight: 500
      height: 19px
      line-height: 17px
      margin-left: auto
      margin-top: 22px
      padding: 2px 6px 0
      text-transform: uppercase
      transition($sidebarTransition)

    &.warning
      .maxNumLesions
        theme('background-color', '$uiYellow')
        theme('color', '$textPrimaryColor')