@layer components {
  .radio-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(var(--spacing) * 3);
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 4);
    border: 1px solid var(--color-content-on-light);
    border-radius: 9999px;
    color: var(--color-content-on-light);
    font-family: var(--typo-meta-family);
    font-size: var(--typo-meta-size);
    font-weight: var(--typo-meta-emphasis-weight);
    line-height: var(--typo-meta-lh);
    cursor: pointer;

    &::before {
      content: "";
      flex-shrink: 0;
      inline-size: calc(var(--spacing) * 4);
      block-size: calc(var(--spacing) * 4);
      border: 2px solid currentColor;
      border-radius: 9999px;
    }

    &:has(input:checked) {
      border-color: var(--color-surface-dark-high);
      background-color: var(--color-surface-dark-high);
      color: var(--color-content-on-dark);

      &::before {
        background-color: var(--color-surface-dark);
        box-shadow: 0 0 0 1px var(--color-surface-dark);

        @media (forced-colors: active) {
          background-color: CanvasText;
        }
      }
    }

    &:not(:has(input:checked)):hover {
      border-color: var(--color-surface-dark);
      background-color: var(--color-surface-dark);
      color: var(--color-content-on-dark);

      &::before {
        border-color: var(--color-surface-dark-high);
        background-color: var(--color-content-on-dark);
      }
    }

    &:has(input:focus-visible) {
      outline: 2px solid var(--color-content-on-light);
      outline-offset: 2px;
    }
  }
}