.switch {
  $component-name: ".switch";
  $component-name-not-selector: "switch";
  $switch-segment-padding-vertical: -4;
  $switch-padding-horizontal: -4;
  $switch-label-spacing-in-form: -4;

  display: inline-flex;
  @include set-font(0, "single");

  //remove default fieldset style for when using as radionbuttons
  border: none;
  padding: 0;


  //needed when using as a fieldset with radionbuttons because fieldset can't have flex display
  &__content {
    display: inline-flex;
  }

  &__label {
    @include screenreader-only;
    align-self: center;
    margin-right: spacing(-4);

    &::after {
      content: ":";
    }

    #{$component-name}--show-label & {
      @include screenreader-only($unset: true);
    }
  }

  &__segments {
    display: inline-flex;
    padding: 0 spacing($switch-padding-horizontal);
    background-color: color("background-secondary");
  }

  &__segment {
    display: block; //needed for when the segement sits inside a .switch__input wrapper and is not the direct flex-child
    color: color("foreground-hover");
    padding: spacing($switch-segment-padding-vertical, $subtract: $width-border) spacing(-3);

    &--active,
    input[type="radio"]:checked + &,
    input[type="checkbox"]:checked + &,
    #{$component-name}__button[aria-pressed="true"] &:first-child {
      @include set-colors("theme");
      box-shadow: $shadow-style-center color("shadow");
      padding-top: spacing($switch-segment-padding-vertical);
      padding-bottom: spacing($switch-segment-padding-vertical);
      margin-top: $width-border * -1;
      margin-bottom: $width-border * -1;
    } 

    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }

    &--dimmed {
      color: color("foreground");

      input[type="radio"]:checked ~ &,
      input[type="checkbox"]:not(:checked) ~ &,
      #{$component-name}__button[aria-pressed="false"] &:last-child {
        box-shadow: $shadow-style-center color("shadow");
        background-color: color("interactive");
        color: color("foreground");
        padding-top: spacing($switch-segment-padding-vertical);
        padding-bottom: spacing($switch-segment-padding-vertical);
        margin-top: $width-border * -1;
        margin-bottom: $width-border * -1;
      }

      input[type="checkbox"]:checked:hover ~ &,
      #{$component-name}__button[aria-pressed="true"]:hover &:last-child {
        color: color("foreground-secondary-hover");
      }

      input[type="checkbox"]:checked:active ~ &,
      #{$component-name}__button[aria-pressed="true"]:active &:last-child {
        color: color("foreground-theme");
      }

      #{$component-name}__button[aria-pressed="false"]:hover &:last-child {
        color: color("foreground");
      }

      #{$component-name}__button[aria-pressed="false"]:active &:last-child {
        color: color("foreground");
      }

      input[type="radio"]:checked:hover ~ &,
      input[type="radio"]:checked:active ~ & {
        color: color("foreground");
      }
    }

    &:hover,
    input[type="radio"]:not(:checked):hover + &,
    input[type="checkbox"]:not(:checked):hover + &,
    #{$component-name}__button[aria-pressed="false"]:hover &:first-child {
      color: color("foreground");
    }

    &:active,
    input[type="radio"]:not(:checked):active + &,
    input[type="checkbox"]:not(:checked):active + &,
    #{$component-name}__button[aria-pressed="false"]:active &:first-child {
      color: color("foreground-theme");
    }

    &--active {
      &:hover {
        color: color("theme-foreground");
      }

      &:active {
        color: color("theme-foreground");
      }
    }
  }

  &__input {
    display: flex; //needed for when using as a checkbox
    position: relative;

    input {
      appearance: none;
      position: absolute;
      z-index: $z-index-just-above-static;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: transparent;

      &[type="checkbox"] {
        //need to set width and height explicitly for iOS Safari, otherwise checkbox won't fully cover the switch
        width: spacing($switch-padding-horizontal, $times: 2, $add: 100%);
        height: spacing($switch-segment-padding-vertical, $times: 2, $add: line-height("single", $include-calc: false));
      }
      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }
    }
  }

  &__button {
    display: flex;
    margin: #{$width-border * -1} spacing($switch-padding-horizontal, $times: -1);
    padding: $width-border spacing($switch-padding-horizontal);
    &:focus-visible {
      outline: $outline-width solid color("utility-focus");
      outline-offset: $outline-offset;
    }
  } 

  //when used inside a form
  .form & {
    display: flex; //change to flex instead of inline-flex, to not have multiple switches wrap on the same line
    width: 100%;
    margin-bottom: spacing($forms-margin-field);
    max-width: $line-width-max;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: spacing($switch-label-spacing-in-form); //in case the switch wraps. Won't work in older versions of Safari, but that's ok.

    &:last-child {
      margin-bottom: 0;
    }

    #{$component-name}__content {
      width: 100%;
      justify-content: space-between;
      flex-wrap: wrap;
      row-gap: spacing($switch-label-spacing-in-form); //in case the switch wraps. Won't work in older versions of Safari, but that's ok.
    }

    #{$component-name}__label {
      display: inline-block;
      margin-right: spacing($switch-label-spacing-in-form);
      margin-bottom: 0;
    }
  }
}