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

  @media (prefers-contrast: more) {
    background-color: $trough_color_hc;
    box-shadow: inset 0 0 0 1px $border_color;
  }
}

%scale_highlight {
  transition: $button_transition;
  border-radius: 99px;
  background-color: var(--accent-bg-color);
  color: var(--accent-fg-color);
}

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

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

  @include focus-ring("> trough > slider", $offset: 0);

  ---slider-border-color: RGB(0 0 6 / 10%);

  @media (prefers-contrast: more) {
    ---slider-border-color: RGB(0 0 6 / 35%);
  }

  > trough {
    @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 0 0 1px var(---slider-border-color), 0 2px 4px RGB(0 0 6 / 20%);

      border-radius: 100%;

      // 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, &:active {
    > trough {
      background-color: $trough_hover_color;

      @media (prefers-contrast: more) {
        background-color: $trough_hover_color_hc;
      }

      > highlight {
        background-image: image(color-mix(in srgb, currentColor 10%, transparent));
      }

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

  &:disabled {
    filter: Opacity(var(--disabled-opacity));

    > trough > slider {
      box-shadow: 0 0 0 1px var(---slider-border-color), 0 2px 4px transparent;
      outline-color: RGB(0 0 6 / 20%);

      @media (prefers-contrast: more) {
        outline-color: RGB(0 0 6 / 50%);
      }
    }
  }

  > value {
    @extend .dimmed;
    @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: 0 0 0 1px var(---slider-border-color), 1px 1px 4px RGB(0 0 6 / 20%);

      &:disabled {
        box-shadow: 0 0 0 1px var(---slider-border-color), 1px 1px 4px transparent;
      }
    }
  }

  &.horizontal {
    > marks {
      color: color-mix(in srgb, currentColor var(--dim-opacity), transparent);
      &.top    { margin-bottom: $_marks_distance; }
      &.bottom { margin-top: $_marks_distance; }

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

    &:not(.marks-before) {
      > value.top { margin-bottom: $_marks_size; }
    }

    &:not(.marks-after) {
      > value.bottom { margin-top: $_marks_size; }
    }

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

    &.fine-tune {
      > trough {
        // to make the trough grow vertically in fine-tune mode
        margin: -3px 0px;
        > slider { margin: -5px -8px; }
      }

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

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

    &.marks-before {
      padding-top: 0;

       > trough > slider {
        border-top-left-radius: 0;
      }
    }

    &.marks-after {
      padding-bottom: 0;

      > trough > slider {
        border-bottom-right-radius: 0;
      }
    }

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

  &.vertical {
    > marks {
      color: color-mix(in srgb, currentColor var(--dim-opacity), transparent);
      &.top    { margin-right: $_marks_distance; }
      &.bottom { margin-left: $_marks_distance; }

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

    &:not(.marks-before) {
      > value.left { margin-right: $_marks_size; }
    }

    &:not(.marks-after) {
      > value.right { margin-left: $_marks_size; }
    }

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

    &.fine-tune {
      > trough {
        // to make the trough grow horizontally in fine-tune mode
        margin: 0px -3px;
        > slider { margin: -8px -5px; }
      }

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

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

    &.marks-before {
      padding-left: 0;

      > trough > slider {
        border-bottom-left-radius: 0;
      }
    }

    &.marks-after {
      padding-right: 0;

      > trough > slider {
        border-top-right-radius: 0;
      }
    }
  }

  &.color {
    padding: 0;

    > trough {
      border: none;
      background: none;
      border-radius: 10px;

      > slider {
        margin: 0;
        background-color: RGB(255 255 255 / 80%);
      }
    }

    &.fine-tune {
      padding: 2px;

      > trough > slider {
        margin: -2px;
      }
    }
  }
}

