@layer components {
  .switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); }

  .switch {
    position: relative;
    flex: none;
    width: 46px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--line);
    cursor: pointer;
    appearance: none;

    &::before {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: 22px;
      height: 22px;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgb(16 24 40 / 0.25);
      transition: translate 0.15s;
    }

    &::after { content: ""; position: absolute; inset: -9px -1px; }

    &:is(:checked, [aria-checked="true"]) { background: var(--accent); }
    &:is(:checked, [aria-checked="true"])::before { translate: 18px 0; }

    @media (forced-colors: active) {
      &::before { background: CanvasText; }
      &:is(:checked, [aria-checked="true"]) { background: Highlight; }
    }
  }
}