@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

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

    .lesionNumber
      font-size: 14px
      font-weight: 400
      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