/* stylelint-disable */
@use '../../token/scss' as *;
@use 'sass:math';

@mixin toggle {
  .cck-toggle {
    user-select: none;
    cursor: pointer;

    &__label {
      display: flex;
      align-items: center;
      cursor: pointer;
      white-space: nowrap;
      color: $text-dark-primary;
    }

    &--label-before {
      .cck-toggle__label {
        flex-direction: row-reverse;
      }
    }

    &__input {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 3;
    }

    .cck-toggle__slider-wrapper {
      position: relative;

      &:has(input:focus-visible) {
        outline: 2px solid $state-brand-selected;
      }
    }

    &__size {
      &--sm {
        .cck-toggle__label {
          gap: $spacing-7;
          font: $text-sm-font-medium;
        }
      }

      &--md {
        .cck-toggle__label {
          gap: $spacing-7;
          font: $text-base-font-medium;
        }
      }

      &--lg {
        .cck-toggle__label {
          gap: $spacing-8;
          font: $text-lg-font-medium;
        }
      }

      &--xl {
        .cck-toggle__label {
          gap: $spacing-8;
          font: $text-xl-font-medium;
        }
      }
    }

    &__knob {
      .cck-toggle__thumb {
        position: absolute;
        z-index: 2;
        background-color: $base-surface-1;
        transition: 0.3s ease all;
      }

      .cck-toggle__backdrop {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transition: 0.3s ease background-color;
      }

      &.cck-toggle--checked {
        .cck-toggle__thumb {
          top: 50%;
          left: 100%;
          transform: translate(calc(-100% - var(--frames-x--toggle-margin)), -50%);
        }

        .cck-toggle__backdrop {
          background-color: $state-brand-active;
        }
      }

      &.cck-toggle--unchecked {
        .cck-toggle__thumb {
          top: 50%;
          left: 0;
          transform: translate(var(--frames-x--toggle-margin), -50%);
        }

        .cck-toggle__backdrop {
          background-color: $base-fill-2;
        }
      }

      &.cck-toggle__size {
        &--sm {
          --frames-x--toggle-margin: 2px;

          // .cck-toggle__label {
          //   gap: $spacing-7;
          //   font: $text-sm-font-medium;
          // }

          .cck-toggle__slider-wrapper {
            width: 40px;
            height: 19px;
          }

          .cck-toggle__thumb {
            width: 18px;
            height: 15px;
            border-radius: $radi-2;
          }

          .cck-toggle__slider-wrapper {
            border-radius: $radi-3;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-3;
          }
        }

        &--md {
          --frames-x--toggle-margin: 2px;

          // .cck-toggle__label {
          //   gap: $spacing-7;
          //   font: $text-base-font-medium;
          // }

          .cck-toggle__slider-wrapper {
            width: 48px;
            height: 24px;
          }

          .cck-toggle__thumb {
            width: 22px;
            height: 20px;
            border-radius: $radi-4;
          }

          .cck-toggle__slider-wrapper {
            border-radius: $radi-5;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-5;
          }
        }

        &--lg {
          --frames-x--toggle-margin: 4px;

          // .cck-toggle__label {
          //   gap: $spacing-8;
          //   font: $text-lg-font-medium;
          // }

          .cck-toggle__slider-wrapper {
            width: 56px;
            height: 32px;
          }

          .cck-toggle__thumb {
            width: 26px;
            height: 24px;
            border-radius: $radi-5;
          }

          .cck-toggle__slider-wrapper {
            border-radius: $radi-6;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-6;
          }
        }

        &--xl {
          --frames-x--toggle-margin: 4px;

          // .cck-toggle__label {
          //   gap: $spacing-8;
          //   font: $text-xl-font-medium;
          // }

          .cck-toggle__slider-wrapper {
            width: 80px;
            height: 44px;
          }

          .cck-toggle__thumb {
            width: 36px;
            height: 36px;
            border-radius: $radi-5;
          }

          .cck-toggle__slider-wrapper {
            border-radius: $radi-6;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-6;
          }
        }
      }
    }

    &__switch {
      .cck-toggle__thumb {
        position: absolute;
        z-index: 2;
        background-color: $base-surface-1;
        transition: 0.3s ease all;
        box-shadow: 0 1px 2px $colors-alpha-dark-50;
      }

      .cck-toggle__backdrop {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 50%;
        transform: translate(0px, -50%);
        transition: 0.3s ease background-color;
      }

      &.cck-toggle--checked {
        .cck-toggle__thumb {
          top: 50%;
          left: 100%;
          transform: translate(-100%, -50%);
        }

        .cck-toggle__backdrop {
          background-color: $state-brand-active;
        }
      }

      &.cck-toggle--unchecked {
        .cck-toggle__thumb {
          top: 50%;
          left: 0;
          transform: translate(0, -50%);
        }

        .cck-toggle__backdrop {
          background-color: $base-fill-2;
        }
      }

      &.cck-toggle__size {
        &--sm {
          .cck-toggle__slider-wrapper {
            width: 40px;
          }

          .cck-toggle__thumb {
            width: 20px;
            height: 20px;
            border-radius: $radi-4;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-6;
            height: 12px;
          }
        }

        &--md {
          .cck-toggle__slider-wrapper {
            width: 44px;
          }

          .cck-toggle__thumb {
            width: 24px;
            height: 24px;
            border-radius: $radi-5;
          }

          .cck-toggle__slider-wrapper {
            border-radius: $radi-5;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-6;
            height: 16px;
          }
        }

        &--lg {
          .cck-toggle__slider-wrapper {
            width: 56px;
          }

          .cck-toggle__thumb {
            width: 32px;
            height: 32px;
            border-radius: $radi-6;
          }

          .cck-toggle__slider-wrapper {
            border-radius: $radi-6;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-6;
            height: 20px;
          }
        }

        &--xl {
          .cck-toggle__slider-wrapper {
            width: 80px;
          }

          .cck-toggle__thumb {
            width: 40px;
            height: 40px;
            border-radius: $radi-6;
          }

          .cck-toggle__slider-wrapper {
            border-radius: $radi-6;
          }

          .cck-toggle__backdrop {
            border-radius: $radi-6;
            height: 32px;
          }
        }
      }
    }

    &__knob,
    &__switch {
      &.cck-toggle--disabled {
        cursor: default;
        pointer-events: none;

        .cck-toggle__thumb {
          background-color: $base-fill-3;
        }

        .cck-toggle__backdrop {
          background-color: $base-fill-2;
        }

        .cck-toggle__label {
          color: $base-disabled;
        }
      }
    }
  }
}