.switch {
  --track-width: 24px;
  --track-height: 16px;
  --track-padding: 3px;
  --thumb-size: calc(var(--track-height) - (var(--track-padding) * 2));

  position: relative;
  display: inline-flex;
  gap: var(--space--x-small);
  align-items: center;
  line-height: 16px;
  color: var(--color--aaa-text);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;

  &.is-disabled { cursor: not-allowed; }

  /* hidden */
  .input[type="checkbox"] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
  }

  .track {
    position: relative;
    inline-size: var(--track-width);
    block-size: var(--track-height);
    flex: 0 0 auto;
    background-color: var(--color--aa-text);
    border-radius: 999px;
    /* box-shadow: var(--shadow-inset-card); */
  }

  .thumb {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: var(--track-padding);
    inline-size: var(--thumb-size);
    block-size: var(--thumb-size);
    background-color: var(--color--bg-max);
    border-radius: 999px;
    transform: translateY(-50%);
  }

  .input:checked + .track {
    background-color: var(--color--max-text);
  }

  .input:checked + .track .thumb {
    inset-inline-start: calc(100% - var(--track-padding) - var(--thumb-size));
  }

  .input:disabled + .track { opacity: 0.6; }

  .text {
    font-size: var(--font-size--ui);
    line-height: var(--line-height--ui);
  }
}