@import "{design}/app"

.lesionTableRow
  display: flex
  height: 63px
  margin-top: 2px
  width: 100%

  &.active
    margin-left: -6px
    padding-left: 6px
    // required transformation to make inner fixed elements relative to this one
    transform(scale(1))

    &:before
      background-color: $activeColor
      border-top-left-radius: 7px
      border-bottom-left-radius: 7px
      content: ''
      display: block
      height: 100%
      left: 0
      pointer-events: none
      position: fixed
      top: 0
      width: 5px

    .lesionRowSidebar
      color: $activeColor

  &.response-status .lesionRowSidebar .response-status-icon
    background-color: $defaultColor
    border-radius: 11px
    color: $uiGrayDark
    font-size: 12px
    font-weight: 700
    height: 21px
    line-height: 22px
    margin: 5px auto 0
    text-align: center
    width: 21px

  &.warning .lesionRowSidebar
    color: $textPrimaryColor
    background-color: $uiYellow

    .warning-icon, svg
      width: 22px
      height: 20px

    .warning-icon
      margin: 7px auto 0

    svg
      fill: $textPrimaryColor

  .lesionRowSidebar
    background: $uiGrayDark
    color: $textSecondaryColor
    flex: 1
    max-width: 30px

    .lesionNumber
      font-size: 14px
      font-weight: 400
      margin-right: 5px
      padding-top: 10px
      text-align: center

  .lesionDetails
    flex: 1
    padding: 5px 2px 0 14px
    display: flex
    flex-direction: column
    align-items: stretch

    .location
      flex: 1
      font-weight: 400
      font-size: 14px
      color: $textSecondaryColor
      height: 30px
      line-height: 30px
      margin-left: -2px
      width: 100%

    .timepointData
      display: flex
      margin-top: 1px

      div
        flex: 1
        font-size: 14px
        font-weight: 400
        justify-content: space-around
        line-height: 18px
        padding-bottom: 10px