%scale_trough {
  border-radius: 99px;
  background-color: $trough_color;

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

%scale_highlight {
  border-radius: 99px;
  background-color: $fill_color;
  color: $fill_text_color;
}

scale {
  // sizing
  $_marks_length: 6px;
  $_marks_distance: 6px;

  min-height: 10px;
  min-width: 10px;
  padding: 12px;

  @include focus-ring("> trough", $offset: 10px);

  > trough {
    transition: $focus_transition;
    @extend %scale_trough;

    // the colored part of the backing bit
    > highlight { @extend %scale_highlight; }

    // this is another differently styled part of the backing bit, the most relevant use case is for example
    // in media player to indicate how much video stream as been cached
    > fill {
      @extend %scale_trough;
    }

    > slider {
      background-color: $slider_color;
      box-shadow: 0 2px 4px transparentize(black, .8);
      outline: 1px solid transparentize(black, .9);

      border-radius: 100%;
      transition: $button_transition;
      transition-property: background, border, box-shadow;

      // the slider is inside the trough, so to have make it bigger there's a negative margin
      min-width: 20px;
      min-height: 20px;
      margin: -8px;
    }
  }

  &:hover {
    > trough {
      background-color: $trough_hover_color;

      > highlight {
        background-image: image(gtkalpha(currentColor, .1));
      }

      > slider {
        background-color: $slider_hover_color;
      }
    }
  }

  .osd & {
    &:focus:focus-visible > trough {
      outline-color: $osd_focus_color;
    }

    > trough > highlight {
      background-color: $osd_fill_bg_color;
      color: $osd_fill_fg_color;
    }
  }

  &:disabled {
    filter: opacity($disabled_opacity);

    > trough > slider {
      box-shadow: 0 2px 4px transparent;
      outline-color: transparentize(black, if($contrast == 'high', .5, .8));
    }
  }

  // click-and-hold the slider to activate
  &.fine-tune {
    padding: 9px;

    &.horizontal {
      min-height: 16px;
    }

    &.vertical {
      min-width: 16px;
    }

    > trough {
      // to make the trough grow in fine-tune mode
      > slider { margin: -5px; }
    }
  }

  > value {
    @extend .dim-label;
    @extend .numeric;
  }

  &.marks-before:not(.marks-after),
  &.marks-after:not(.marks-before) {
    > trough > slider {
      transform: rotate(45deg);

      // Adjust box-shadow for the 45deg rotation, for 0px 2px we ideally want
      // 1/√2px 1/√2px, round that to 1px 1px
      box-shadow: 1px 1px 4px transparentize(black, .8);

      &:disabled {
        box-shadow: 1px 1px 4px transparent;
      }
    }
  }

  &.horizontal {
    > marks {
      color: gtkalpha(currentColor, $dim_label_opacity);
      &.top    { margin-bottom: $_marks_distance; }
      &.bottom { margin-top: $_marks_distance; }

      indicator {
        background-color: currentColor;
        min-height: $_marks_length;
        min-width: 1px;
      }
    }

    > value.left  { margin-right: 9px; }
    > value.right { margin-left: 9px; }

    &.fine-tune > marks {
      &.top { margin-top: 3px; }
      &.bottom { margin-bottom: 3px; }

      indicator { min-height: ($_marks_length - 3px); }
    }

    &.marks-before > trough > slider {
      border-top-left-radius: 0;
    }

    &.marks-after > trough > slider {
      border-bottom-right-radius: 0;
    }

    &.marks-before.marks-after > trough > slider {
      border-radius: 100%;
    }
  }

  &.vertical {
    > marks {
      color: gtkalpha(currentColor, $dim_label_opacity);
      &.top    { margin-right: $_marks_distance; }
      &.bottom { margin-left: $_marks_distance; }

      indicator {
        background-color: currentColor;
        min-height: 1px;
        min-width: $_marks_length;
      }
    }

    > value.top    { margin-bottom: 9px; }
    > value.bottom { margin-top: 9px; }

    &.fine-tune > marks {
      &.top { margin-left: 3px; }
      &.bottom { margin-right: 3px; }

      indicator { min-height: ($_marks_length - 3px); }
    }

    &.marks-before > trough > slider {
      border-bottom-left-radius: 0;
    }

    &.marks-after > trough > slider {
      border-top-right-radius: 0;
    }
  }

  &.color {
    min-height: 0;
    min-width: 0;

    > trough {
      background-image: image($border_color);
      background-repeat: no-repeat;
    }

    &.horizontal {
      padding: 0 0 15px 0;

      > trough {
        padding-bottom: 4px;
        background-position: 0 -3px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        > slider {
          &:dir(ltr), &:dir(rtl) { // specificity bump
            &:hover, &:disabled, & {
              margin-bottom: -15px;
              margin-top: 6px;
            }
          }
        }
      }
    }

    &.vertical {
      &:dir(ltr) {
        padding: 0 0 0 15px;

        > trough {
          padding-left: 4px;
          background-position: 3px 0;
          border-bottom-right-radius: 0;
          border-top-right-radius: 0;

          > slider {
            &:hover, &:disabled, & {
              margin-left: -15px;
              margin-right: 6px;
            }
          }
        }
      }

      &:dir(rtl) {
        padding: 0 15px 0 0;

        > trough {
          padding-right: 4px;
          background-position: -3px 0;
          border-bottom-left-radius: 0;
          border-top-left-radius: 0;

          > slider {
            &:hover, &:disabled, & {
              margin-right: -15px;
              margin-left: 6px;
            }
          }
        }
      }
    }

    &.fine-tune {
      &.horizontal {
        &:dir(ltr), &:dir(rtl) { // specificity bump
          padding: 0 0 12px 0;

          > trough {
            padding-bottom: 7px;
            background-position: 0 -6px;

            > slider {
              margin-bottom: -15px;
              margin-top: 6px;
            }
          }
        }
      }

      &.vertical {
        &:dir(ltr) {
          padding: 0 0 0 12px;

          > trough {
            padding-left: 7px;
            background-position: 6px 0;

            > slider {
              margin-left: -15px;
              margin-right: 6px;
            }
          }
        }

        &:dir(rtl) {
          padding: 0 12px 0 0;

          > trough {
            padding-right: 7px;
            background-position: -6px 0;

            > slider {
              margin-right: -15px;
              margin-left: 6px;
            }
          }
        }
      }
    }
  }
}
