@use "../../config" as *;
@use "../../feature-flags" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/visually-hidden" as *;
@use "../../utilities/focus-outline" as *;
@import "../form";

/// Toggle styles
/// @access public
/// @group toggle
@mixin toggle {
  .#{$prefix}--toggle {
    @include visually-hidden;
  }

  .#{$prefix}--toggle__label {
    @include font-family("sans");
    position: relative;
    display: flex;
    align-items: center;
    user-select: none;
    transition: $transition--base $standard-easing;
    cursor: pointer;
    min-height: calcRem(28px);
    //margin: $spacing-05 0;
  }

  .#{$prefix}--toggle__appearance {
    position: relative;
    width: calcRem(48px);

    &:before {
      position: absolute;
      display: block;
      content: "";
      width: 100%;
      height: calcRem(28px);
      top: calcRem(-14px);
      border-radius: calcRem(28px);
      background-color: $field-background-disabled;
      transition: $transition--base $standard-easing;
      cursor: pointer;
    }

    &:after {
      box-sizing: border-box;
      position: absolute;
      display: block;
      border: 3px solid $field-background-disabled;
      cursor: pointer;
      top: -14px;
      width: calcRem(28px);
      height: calcRem(28px);
      background-color: $background-main; // TODO: Replace
      border-radius: 50%;
      content: "";
      transition: $transition--base $standard-easing;
    }
  }

  .#{$prefix}--toggle--small + .#{$prefix}--toggle__label {
    width: calcRem(32px);
  }

  .#{$prefix}--toggle--small
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__appearance {
    width: calcRem(32px);
    height: calcRem(16px);

    &:before {
      box-sizing: border-box;
      height: calcRem(16px);
      width: calcRem(32px);
      border-radius: 0.9375rem;
      background-color: transparent;
      border: 2px solid $field-background-enabled;
      top: 0;
    }

    &:after {
      width: calcRem(10px);
      height: calcRem(10px);
      background-color: $field-background-enabled;
      border: none;
      top: 3px;
      left: 3px;
    }
  }

  .#{$prefix}--toggle__check {
    fill: $border-inverse;
    position: absolute;
    left: 6px;
    top: 6px;
    z-index: 1;
    transition: $transition--base $standard-easing;
    transform: scale(0.2);
  }

  .#{$prefix}--toggle--small:checked
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__check {
    fill: $action-default-fill-primary-default;
    transform: scale(1) translateX(16px);
  }

  .#{$prefix}--toggle__text--left,
  .#{$prefix}--toggle__text--right {
    @include type-style("body-short");
    position: relative;
  }

  .#{$prefix}--toggle__text--left {
    margin-right: $spacing-03;
  }

  .#{$prefix}--toggle__text--right {
    margin-left: $spacing-03;
  }

  .#{$prefix}--toggle:checked
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__appearance {
    &:before {
      background-color: $action-default-fill-primary-default; // TODO: Replace
    }

    &:after {
      transform: translateX(24px);
      background-color: $background-main;
      box-shadow: none;
      border-color: $field-background-enabled; // TODO: Replace
    }
  }

  .#{$prefix}--toggle--small:checked
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__appearance {
    &:before {
      background-color: $action-default-fill-primary-default; // $action-default-fill-primary-default;
      border-color: $field-background-enabled;
    }

    &:after {
      background-color: $background-main;
      border-color: $background-main;
      margin-left: 0px;
      transform: translateX(17px);
    }
  }

  .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label {
    .#{$prefix}--toggle__appearance:before {
      outline: 1px solid transparent;
    }

    .#{$prefix}--toggle__appearance:after {
      @include focus-outline("blurred");
    }
  }

  .#{$prefix}--toggle--small:focus + .#{$prefix}--toggle__label {
    .#{$prefix}--toggle__appearance:before {
      @include focus-outline("blurred");
    }

    .#{$prefix}--toggle__appearance:after {
      outline: none;
      box-shadow: none;
    }
  }

  .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .#{$prefix}--toggle:disabled
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__appearance {
    &:before,
    &:after {
      cursor: not-allowed;
      transition: $transition--base $standard-easing;
    }
  }
}