@layer components {
  .switch {
    display: inline-flex;
    align-items: center;
    gap: 1em;
    cursor: pointer;
    &[aria-disabled] {
      cursor: not-allowed;
    }
  }
  .switch_handle {
    position: relative;
    width: calc(var(--spacing) * 9);
    height: calc(var(--spacing) * 5);
    border: 1px solid var(--color-primary);
    border-radius: calc(var(--border-radius) * 2);
    background-color: var(--color-surface-container-high);
    &::before {
      content: '';
      position: absolute;
      transform: translate(1px, 2px);
      width: calc(var(--spacing) * 3);
      height: calc(var(--spacing) * 3);
      border-radius: calc(var(--border-radius) * 2);
      background-color: var(--color-primary);
      transition: transform 0.2s ease-in-out;
    }
    &.checked {
      background-color: var(--color-primary);
      &::before {
        transform: translate(calc(var(--spacing) * 5 - 1px), 2px);
      }
      [aria-disabled] & {
        --disabled-color: color-mix(in oklch, var(--color-on-surface) 38%, transparent);
        background-color: var(--disabled-color);
        border-color: var(--disabled-color);
        &.checked {
          background-color: var(--disabled-color);
        }
        &::before {
          background-color: color-mix(in oklch, var(--color-on-surface) 45%, transparent);
        }
      }
    }
  }
}