@use "../../foundations/helpers/forward.helpers.scss" as *;

$ds-switch__knob-size: 16px;
$ds-switch__knob-padding: 4px;
$ds-switch__knob-wrap: $ds-switch__knob-size + $ds-switch__knob-padding;
$ds-switch__container-height: 24px;
$ds-switch__container-width: 44px;

.ds-switch {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;

  .ds-switch__inner {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    .ds-switch__meta {
      margin: ds-spacing(0 $ds-s-050 0 0);
      color: $ds-color-text-primary-subtle;
      @include ds-typography($ds-typography-functional-body-sm);
      @at-root .ds-force-px#{&} {
        @include ds-typography($ds-typography-functional-body-sm, true);
      }

      .ds-switch__meta-on {
        display: none;
      }
    }

    .ds-switch__box {
      line-height: 0;
      display: block;
      position: relative;
      height: ds-px-to-rem($ds-switch__container-height);
      width: ds-px-to-rem($ds-switch__container-width);
      background-color: $ds-color-surface-primary-raised-strong;
      border-radius: 100px;
      transition:
        background-color 500ms ease,
        outline-color 500ms ease;
      @at-root .ds-force-px#{&} {
        height: $ds-switch__container-height;
        width: $ds-switch__container-width;
      }
      &::before {
        content: "";
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: inherit;
      }

      @include min-click-surface();
    }
    .ds-switch__knob {
      background-color: $ds-color-neutral-white;
      position: absolute;
      border-radius: 50%;
      top: ds-px-to-rem($ds-switch__knob-padding);
      right: calc(100% - ds-px-to-rem($ds-switch__knob-wrap));
      height: ds-px-to-rem($ds-switch__knob-size);
      width: ds-px-to-rem($ds-switch__knob-size);
      transition: right 500ms ease;
      @at-root .ds-force-px#{&} {
        height: $ds-switch__knob-size;
        width: $ds-switch__knob-size;
        top: $ds-switch__knob-padding;
        right: calc(100% - $ds-switch__knob-wrap);
      }
    }
  }

  input {
    opacity: 0;
    position: absolute;

    &:checked + .ds-switch__inner {
      .ds-switch__meta-on {
        display: inline;
      }
      .ds-switch__meta-off {
        display: none;
      }
      .ds-switch__knob {
        right: ds-px-to-rem($ds-switch__knob-padding);
        @at-root .ds-force-px#{&} {
          right: $ds-switch__knob-padding;
        }
      }
    }

    &:checked:not(:disabled) {
      & + .ds-switch__inner .ds-switch__box {
        background-color: $ds-color-surface-brand;
      }
    }

    &:focus-visible + .ds-switch__inner .ds-switch__box {
      outline: ds-border-width(xs) solid $ds-color-border-primary;
      outline-offset: 2px;
    }

    &:checked:focus-visible + .ds-switch__inner .ds-switch__box {
      outline-color: $ds-color-border-brand;
    }
  }
}

@include ds-hover() {
  .ds-switch input:not(:disabled) + .ds-switch__inner:hover .ds-switch__box::before,
  .ds-list-item--switch:hover input:not(:disabled) + .ds-switch__inner .ds-switch__box::before {
    background-color: $ds-color-surface-primary-raised-strong;
  }
}
.ds-switch input:not(:disabled) + .ds-switch__inner:active .ds-switch__box::before,
.ds-list-item--switch:active input:not(:disabled) + .ds-switch__inner .ds-switch__box::before {
  background-color: $ds-color-surface-primary-raised-strong;
}

.ds-switch input:disabled + .ds-switch__inner {
  cursor: not-allowed;
  .ds-switch__meta {
    color: $ds-color-text-primary-disabled;
  }
  .ds-switch__box {
    background-color: $ds-color-surface-primary-raised-soft;
  }
  .ds-switch__knob {
    background-color: $ds-color-surface-primary-raised-strong;
  }
}