@use "sass:color";
@use "./../../variables" as *;
@use "./../../mixins/breakpoints" as *;

.form__control.toggle {
  & > * {
    &:not(:last-child) {
      margin-right: var(--spacer);

      @include media-breakpoint-up("desktop") {
        margin-right: calc(var(--spacer) * 0.5);
      }
    }
  }

  & input[type="checkbox"] {
    --input-width: auto;
    --input-desktop-width: auto;
    --input-padding-x: #{calc(($input-padding-x * 2) + 1px)};

    border-radius: var(--input-round-border-radius);
    aspect-ratio: 2 / 1;
    flex-shrink: 0;
    vertical-align: text-bottom;

    &::before {
      content: "";
      position: absolute;
      margin: auto;
      inset: 0 50% 0 0;
      overflow: hidden;
      border-radius: var(--input-round-border-radius);
      background: var(--input-border-color);
      width: 35%;
      aspect-ratio: 1;
      transition:
        left 0.2s,
        right 0.2s;
    }

    &:checked {
      background: var(--input-detail-background);

      &::before {
        background: var(--white);
        left: 50%;
        right: 0;
      }

      &:disabled,
      &.disabled,
      &[aria-disabled="true"] {
        background: var(--input-disabled-detail-background);
      }
    }

    @each $key, $value in $theme-colors {
      &.input--#{$key} {
        --input-border-color: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});

        &:checked {
          --input-detail-background: var(--#{$key});
          --input-disabled-detail-background: hsl(from var(--#{$key}) h s l / #{$color-disabled-alpha});
        }
      }
    }
  }
}