@use '../../variables' as *;
@use 'sass:math';

$bg-off: var(--color-neutral-30);
$bg-on: var(--color-accent-30);

.container {
  position: relative;
  cursor: pointer;
  user-select: none;
  color: var(--color-neutral-100);

  input {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;
    &:checked ~ .switch {
      background-color: $bg-on;
      &::after {
        transform: translateX(calc(100% + 4px));
        background: var(--color-neutral-100);
      }
    }

    &:focus ~ .switch,
    &:active ~ .switch {
      // box-shadow: inset 0 0 0 2px $text-4;
    }
  }
}

.error {
  color: var(--color-warning-30);
}

.switch {
  width: $size-l;
  height: $size-s;
  padding: $space-xxs;
  border-radius: math.div($size-s, 2);
  background-color: $bg-off;
  transition: background-color 100ms ease;

  &::after {
    content: '';
    display: block;
    width: calc(50% - #{$space-xxs});
    height: 100%;
    border-radius: 50%;
    background: var(--color-neutral-90);
    transform: translateX(0);
    transition: transform 100ms ease;
  }
}

.small {
  .switch {
    height: $size-xs;
    width: $size-base;
  }
}

.disabled {
  cursor: not-allowed;
  pointer-events: none;

  .switch {
    background: var(--color-neutral-30);
  }
  .switch {
    &::after {
      background: var(--color-neutral-50);
    }
  }
  .switch {
    opacity: 0.4;
  }
}