@import "tailwindcss/theme";
@import "../variables/theme.css";

.switch {
  @apply relative z-0 overflow-hidden;

  width: var(--spacing-40);
  height: var(--spacing-20);
  padding: var(--spacing-2);
  background: var(--color-neutral-300);
  border-radius: 10px;

  &::after {
    @apply pointer-events-none absolute top-0 left-0 z-[-1] h-full w-full;

    content: "";
    background: linear-gradient(
      254deg,
      var(--color-blue-400) 8.18%,
      var(--color-blue-600) 90.55%
    );
    opacity: 0;
    transition: opacity 0.1s 0.2s ease-out;
  }

  &:has(:checked)::after {
    opacity: 1;
  }

  &:has(:disabled) {
    opacity: 0.4;
  }

  &:has(.switch-input--checked) {
    transition: none;
  }
}

.switch-decoWrap {
  @apply block;

  &::before {
    @apply block;

    width: var(--spacing-16);
    height: var(--spacing-16);
    content: "";
    background: var(--color-white);
    border-radius: 100%;
  }

  &:has(:checked)::before {
    animation: switch-deco-open 0.2s ease-in;
  }

  &:has([closed])::before {
    transform: translateX(20px) scaleY(1);
  }

  &:has([closed]:not(:checked))::before {
    animation: switch-deco-close 0.2s ease-in;
  }

  &:has(.switch-input--checked)::before {
    transform: translateX(20px) scaleY(1);
    animation: none;
  }
}

.switch-input {
  @apply absolute top-0 z-10 h-full;

  left: 50%;
  width: calc(100% + var(--spacing-16) * 2);
  appearance: none;
  cursor: pointer;
  transform: translateX(-50%);
}

@keyframes switch-deco-open {
  45%,
  65% {
    transform: translateX(10px) scaleY(0.625);
  }

  100% {
    transform: translateX(20px) scaleY(1);
  }
}

@keyframes switch-deco-close {
  45%,
  65% {
    transform: translateX(10px) scaleY(0.625);
  }

  100% {
    transform: translateX(0) scaleY(1);
  }
}