@import "{design}/app"

$borderColor = rgba(77, 99, 110, 0.81)

#lesionTableHUD
  background: black
  border-radius: 8px
  border: solid 1px $borderColor;
  bottom: 3px
  height: 326px
  left: auto
  opacity: 0.95
  overflow: hidden
  position: absolute
  right: 3px
  top: auto
  width: 318px
  z-index: 10000

  .lesionTableView.scrollArea
    margin-left: 0
    padding-left: 0

  .header
    background: $uiGrayDarkest
    border-bottom: $uiBorderThickness solid $borderColor
    color: $textSecondaryColor
    font-weight: 300
    font-size: 20px
    height: 55px
    line-height: 55px
    position: relative
    text-align: center
    width: 100%

    svg.buttonClose
      color: $defaultColor
      cursor: pointer
      height: 14px
      position: absolute
      right: 14px
      stroke: $defaultColor
      top: 20px
      width: 14px

  .lesionTableView.scrollArea
    height: calc(100% - 55px - 70px)
    padding-bottom: 20px

  .footer
    width: 100%
    height: 70px
    position: absolute
    bottom: 0
    background: $uiGrayDarkest
    border-top: $uiBorderThickness solid $borderColor
    padding: 10px

    .toolbarSectionButton
      display: inline-block
      color: $defaultColor
      fill: $defaultColor
      stroke: $defaultColor
      padding: 0 10px
      height: $toolbarHeight
      min-width: 30px
      cursor: pointer
      text-align: center

      &.disabled
        opacity: 0.5
        cursor: not-allowed

      .buttonLabel
        font-size: 12px

      .svgContainer
        margin: 0 auto
        text-align: center

      svg
        background-color: transparent
        margin: 2px
        width: 21px
        height: 21px

      &:active, &.active
        color: $activeColor

        svg
          fill: $activeColor
          stroke: $activeColor

      &:hover
        color: $hoverColor

        svg
          fill: $hoverColor
          stroke: $hoverColor