@import "{design}/app"

$headerRowHeight = 63px

.lesionTableHeaderRow
  background-color: $uiGrayDarker
  color: $textSecondaryColor
  display: flex
  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
        fill: $hoverColor

      &:active
        fill: $activeColor

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

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

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

    .maxNumLesions
      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