$_levelbar_size: 11px;
$_levelbar_border_radius: 6px;

levelbar {
  &:disabled {
    filter: opacity(.5);
  }

  &.horizontal {
    trough > block {
      min-height: $_levelbar_size;
      border-radius: $_levelbar_border_radius;

      &:dir(rtl) {
        border-radius: 0 $_levelbar_border_radius $_levelbar_border_radius 0;
      }

      &:dir(ltr) {
        border-radius: $_levelbar_border_radius 0 0 $_levelbar_border_radius;
      }

      &.empty,
      &.full {
        border-radius: $_levelbar_border_radius;
      }
    }

    // segmented level bar
    &.discrete > trough > block {
      min-height: $_levelbar_size - 7px;
      margin: 1px;
      min-width: 26px;
      border-radius: 0;

      &:first-child {
        border-radius: 2px 0 0 2px;
      }

      &:last-child {
        border-radius: 0 2px 2px 0;
      }
    }
  }

  &.vertical {
    trough > block {
      min-width: $_levelbar_size;
      border-radius: $_levelbar_border_radius $_levelbar_border_radius 0 0;

      &.empty,
      &.full {
        border-radius: $_levelbar_border_radius;
      }
    }

    // segmented level bar
    &.discrete > trough > block {
      min-width: $_levelbar_size - 7px;
      margin: 1px;
      min-height: 26px;
      border-radius: 0;

      &:first-child {
        border-radius: 2px 2px 0 0;
      }

      &:last-child {
        border-radius: 0 0 2px 2px;
      }
    }
  }

  > trough {
    padding: 0;

    // level bar colours
    > block {
      &.low {
        background-color: $warning_color;
      }

      &.high,
      &:not(.empty) {
        background-color: $fill_color;
      }

      &.full {
        background-color: $success_color;
      }

      &.empty {
        background-color: $trough_color;

        @if $contrast == "high" {
          box-shadow: inset 0 0 0 1px $borders_color;
        }
      }
    }
  }
}
