@layer recipes {
  .segmented-control {
    [data-scope="radio-group"][data-part="root"] {
      display: flex;
      gap: 0.75rem;
      background-color: color-mix(in srgb, #000 24%, transparent);
      position: relative;
      padding: 0.375rem;
      border-radius: 0.375rem;
    }

    [data-scope="radio-group"][data-part="root"][data-orientation="horizontal"] {
      flex-direction: row;
    }

    [data-scope="radio-group"][data-part="root"][data-orientation="vertical"] {
      flex-direction: column;
    }

    [data-scope="radio-group"][data-part="indicator"] {
      background: var(--colors-bg-subtle);
      z-index: 1;
      border-radius: 0.375rem;
      box-shadow:
        0 1px 3px 0 rgba(0, 0, 0, 0.1),
        0 1px 2px 0 rgba(0, 0, 0, 0.06);
      height: var(--height);
      width: var(--width);
    }

    [data-scope="radio-group"][data-part="item"] {
      display: flex;
      gap: 0.5rem;
      user-select: none;
      cursor: pointer;
      font-size: 16px;
      padding-inline: 0.75rem;
      padding-block: 0.25rem;
      z-index: 2;
    }

    [data-scope="radio-group"][data-part="item"][data-disabled] {
      cursor: not-allowed;
      opacity: 0.4;
    }
  }
}
