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

  transition: $focus_transition;

   background-color: $trough_color;

   &:hover {
    background-color: $trough_hover_color;

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

  > image { color: if($contrast == 'high', white, transparent); }

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

  &:disabled {
    filter: opacity(0.5);
  }

  > slider {
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    background-color: $slider_color;
    box-shadow: 0 2px 4px transparentize(black, .8);

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

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

  &:checked {
    color: $fill_text_color;
    background-color: $fill_color;

    &:hover {
      background-color: $fill_hover_color;

      &:active { background-color: $fill_active_color; }
    }

    > slider {
      background-color: $slider_hover_color;
    }

    @if $contrast == "high" {
      > image {  color: inherit; }
    }
  }
}
