:root{--segmented-fill-on-dark:#ffffff0a;--segmented-fill-on-light:#08183c0a}@layer components{.segmented-control{border-radius:var(--radius-full);border:1px solid #0000;gap:2px;padding:4px;display:inline-flex}.segmented-control--on-dark{background:var(--segmented-fill-on-dark);border-color:var(--color-border-subtle-on-dark)}.segmented-control--on-light{background:var(--segmented-fill-on-light);border-color:var(--color-border-subtle-on-light)}.segmented-control-option{appearance:none;align-items:center;gap:var(--space-1);border-radius:var(--radius-full);font-family:var(--font-ui);font-size:var(--text-body-sm);line-height:1.4286;font-weight:var(--font-weight-semibold);cursor:pointer;white-space:nowrap;transition:background-color var(--motion-duration-fast) var(--motion-easing), color var(--motion-duration-fast) var(--motion-easing);background:0 0;border:0;padding-block:8px;padding-inline:16px;display:inline-flex}.segmented-control-option__icon{background-color:currentColor;flex-shrink:0;width:18px;height:18px;-webkit-mask-position:50%;mask-position:50%;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.segmented-control-option__icon--smartphone{-webkit-mask-image:url(/icons/smartphone.svg);mask-image:url(/icons/smartphone.svg)}.segmented-control-option__icon--laptop{-webkit-mask-image:url(/icons/laptop.svg);mask-image:url(/icons/laptop.svg)}.segmented-control--on-dark .segmented-control-option{color:var(--color-text-muted-on-dark)}.segmented-control--on-dark .segmented-control-option:hover{color:var(--color-text-on-dark)}.segmented-control--on-dark .segmented-control-option[aria-selected=true]{background:var(--color-brand);color:var(--color-text-on-light)}.segmented-control--on-light .segmented-control-option{color:var(--color-text-muted-on-light)}.segmented-control--on-light .segmented-control-option:hover{color:var(--color-text-on-light)}.segmented-control--on-light .segmented-control-option[aria-selected=true]{background:var(--color-brand);color:var(--color-text-on-light)}.segmented-control--on-dark .segmented-control-option:focus-visible{outline:2px solid var(--color-brand);outline-offset:3px}.segmented-control--on-light .segmented-control-option:focus-visible{outline:2px solid var(--color-text-on-light);outline-offset:3px}@media (max-width:768px){.segmented-control{width:100%;display:flex}.segmented-control-option{flex:1 1 0;justify-content:center;min-height:44px;padding:12px}}}.segmented-control-panel[hidden]{display:none}