switch {
  // similar to GtkScale
  border-radius: 14px;
  padding: 3px;

  background-color: $trough_color;

  &:hover { background-color: $trough_hover_color; }
  &:active { background-color: $trough_active_color; }

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

    &:hover { background-color: $trough_hover_color_hc; }
    &:active { background-color: $trough_active_color_hc; }
  }

  @include focus-ring($offset: 1px, $outer: true, $transition: $button_transition);

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

  > slider {
    min-width: 20px;
    min-height: 20px;
    border-radius: 50%;
    background-color: $slider_color;
    box-shadow: 0 2px 4px RGB(0 0 6 / 20%);

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

  &:hover > slider,
  &:active > slider {
    background: $slider_hover_color;
  }

  &:checked {
    color: var(--accent-fg-color);
    background-color: var(--accent-bg-color);

    &:hover { background-image: image(color-mix(in srgb, currentColor 10%, transparent)); }
    &:active { background-image: image(RGB(0 0 6 / 20%)); }

    > slider {
      background-color: $slider_hover_color;
    }

    @media (prefers-contrast: more) {
      > image {  color: inherit; }
    }
  }

  .osd & {
    &:checked {
      background-color: RGB(255 255 255 / 60%);
    }
  }
}
