@layer components {
  .rs-switch {
    --rs-switch-height: var(--rs-unit-x5);
    --rs-switch-width: var(--rs-unit-x8);
    --rs-switch-gap: var(--rs-unit-x2);
    display: inline-flex;
    align-items: center;
    gap: var(--rs-switch-gap);
    color: var(--rs-color-foreground-neutral);
  }

  .rs-switch > input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
  }

  .rs-switch__track {
    display: flex;
    align-items: center;
    inline-size: var(--rs-switch-width);
    block-size: var(--rs-switch-height);
    padding: 2px;
    border-radius: var(--rs-radius-circular);
    background: var(--rs-color-background-neutral);
    transition:
      background-color var(--rs-duration-fast) var(--rs-easing-standard),
      box-shadow var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-switch__thumb {
    inline-size: calc(var(--rs-switch-height) - var(--rs-unit-x1));
    block-size: calc(var(--rs-switch-height) - var(--rs-unit-x1));
    border-radius: var(--rs-radius-circular);
    background: var(--rs-color-white);
    box-shadow: var(--rs-shadow-raised);
    transition: transform var(--rs-duration-fast) var(--rs-easing-standard);
  }

  .rs-switch:has(input:focus-visible) .rs-switch__track {
    box-shadow: var(--rs-shadow-focus);
  }

  .rs-switch:has(input:checked) .rs-switch__track {
    background: var(--rs-color-background-primary);
  }

  .rs-switch:has(input:checked) .rs-switch__thumb {
    transform: translateX(
      calc(var(--rs-switch-width) - var(--rs-switch-height))
    );
  }

  [dir="rtl"] .rs-switch:has(input:checked) .rs-switch__thumb {
    transform: translateX(
      calc(var(--rs-switch-height) - var(--rs-switch-width))
    );
  }

  .rs-switch:has(input:disabled) {
    color: var(--rs-color-foreground-disabled);
    cursor: not-allowed;
  }

  .rs-switch:has(input:disabled) .rs-switch__track {
    background: var(--rs-color-background-disabled);
  }

  .rs-switch:has(input:disabled) .rs-switch__thumb {
    opacity: 0.8;
  }

  .rs-switch:has(input:disabled:checked) .rs-switch__track {
    background: var(--rs-color-background-primary);
    opacity: 0.4;
  }

  .rs-switch:has(input:disabled:checked) .rs-switch__thumb {
    opacity: 1;
  }
}