@require '{ohif:design}/app'

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

#measurementTableHUD
  background: rgba(0, 0, 0, 0.95)
  border-radius: 8px
  border: solid 1px $borderColor;
  bottom: 3px
  height: 326px
  left: auto
  overflow: hidden
  position: absolute
  right: 3px
  top: auto
  width: 318px
  z-index: 1

  .measurementTableView .scrollable
    margin-left: 0
    padding-left: 0

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

    svg.buttonClose
      theme('color', '$defaultColor')
      cursor: pointer
      height: 14px
      position: absolute
      right: 14px
      theme('stroke', '$defaultColor')
      top: 20px
      width: 14px

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

  .footer
    theme('background', '$uiGrayDarkest')
    border-top: $uiBorderThickness solid $borderColor
    height: 70px
    padding: 10px

    .toolbarSectionButton
      display: inline-block
      theme('color', '$defaultColor')
      theme('fill', '$defaultColor')
      theme('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
        theme('color', '$activeColor')

        svg
          theme('fill', '$activeColor')
          theme('stroke', '$activeColor')

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

        svg
          theme('fill', '$hoverColor')
          theme('stroke', '$hoverColor')
