.variant-selector[data-v-8dd8c4aa]{display:flex;flex-direction:column;gap:var(--spacing-8);width:100%}.variant-selector--sm[data-v-8dd8c4aa]{--variant-swatch-outer: 30px;--variant-swatch-inner: 20px}.variant-selector--lg[data-v-8dd8c4aa]{--variant-swatch-outer: 42px;--variant-swatch-inner: 32px}.variant-selector__selected[data-v-8dd8c4aa]{color:var(--color-text-icon-base-primary)}.variant-selector__row[data-v-8dd8c4aa]{position:relative;display:flex;align-items:center;gap:var(--spacing-12);width:100%}.variant-selector__options[data-v-8dd8c4aa]{display:flex;flex-wrap:wrap;align-items:center;overflow:hidden;flex:1;min-width:0;padding:var(--spacing-4);margin:calc(var(--spacing-4) * -1)}.variant-selector--swatch .variant-selector__options[data-v-8dd8c4aa]{gap:var(--spacing-12)}.variant-selector--text .variant-selector__options[data-v-8dd8c4aa]{gap:var(--spacing-8)}.variant-selector--compact .variant-selector__options[data-v-8dd8c4aa]{flex:0 0 auto;flex-wrap:nowrap;overflow:visible}.variant-selector__overflow-link[data-v-8dd8c4aa]{flex-shrink:0}.variant-selector__option[data-v-8dd8c4aa]{display:flex;align-items:center;cursor:pointer;position:relative}.variant-selector__option--text[data-v-8dd8c4aa]{box-sizing:border-box;overflow:hidden;background:var(--color-background-input-unselected-default);border:var(--border-input-default) solid var(--color-border-input-default);border-radius:var(--radius-input);padding:var(--spacing-4) var(--spacing-16);transition:background-color .2s ease,border-color .2s ease}.variant-selector__option--text[data-v-8dd8c4aa]:hover:not(.variant-selector__option--selected):not(.variant-selector__option--disabled){background:var(--color-background-input-unselected-hover);border-color:var(--color-border-input-hover)}.variant-selector__option--text.variant-selector__option--selected[data-v-8dd8c4aa]{border:var(--border-input-selected) solid var(--color-border-input-selected);padding:calc(var(--spacing-4) - 1px) calc(var(--spacing-16) - 1px)}.variant-selector__option--text.variant-selector__option--disabled[data-v-8dd8c4aa]{background:var(--color-background-input-unselected-disabled);border-color:var(--color-border-input-disabled);cursor:not-allowed}.variant-selector__option--text.variant-selector__option--unavailable[data-v-8dd8c4aa]:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top left,transparent calc(50% - 1px),var(--color-border-input-default) calc(50% - 1px),var(--color-border-input-default) calc(50% + 1px),transparent calc(50% + 1px))}.variant-selector__option--text.variant-selector__option--unavailable[data-v-8dd8c4aa]:hover:not(.variant-selector__option--selected):not(.variant-selector__option--disabled):after{background:linear-gradient(to top left,transparent calc(50% - 1px),var(--color-border-input-hover) calc(50% - 1px),var(--color-border-input-hover) calc(50% + 1px),transparent calc(50% + 1px))}.variant-selector__option--text.variant-selector__option--selected.variant-selector__option--unavailable[data-v-8dd8c4aa]:after{background:linear-gradient(to top left,transparent calc(50% - 1px),var(--color-border-input-selected) calc(50% - 1px),var(--color-border-input-selected) calc(50% + 1px),transparent calc(50% + 1px))}.variant-selector__option--text[data-v-8dd8c4aa]:has(.variant-selector__input:focus-visible){outline:var(--border-focused) solid var(--color-border-input-focused);outline-offset:var(--spacing-2)}.variant-selector__option--disabled[data-v-8dd8c4aa]{cursor:not-allowed}.variant-selector__input[data-v-8dd8c4aa]{position:absolute;opacity:0;width:0;height:0}.variant-selector__swatch[data-v-8dd8c4aa]{box-sizing:border-box;position:relative;display:flex;align-items:center;justify-content:center;width:var(--variant-swatch-outer);height:var(--variant-swatch-outer);border-radius:var(--radius-round);transition:border-color .2s ease}.variant-selector__swatch--selected[data-v-8dd8c4aa]{border:var(--border-input-selected) solid var(--color-border-input-default)}.variant-selector__swatch-color[data-v-8dd8c4aa]{box-sizing:border-box;position:relative;width:var(--variant-swatch-inner);height:var(--variant-swatch-inner);border:var(--border-input-default) solid var(--color-border-input-default);border-radius:var(--radius-round)}.variant-selector__swatch--disabled[data-v-8dd8c4aa]{opacity:.5}.variant-selector__swatch--unavailable .variant-selector__swatch-color[data-v-8dd8c4aa]:after{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;width:140%;height:6px;background:var(--color-background-input-selected-disabled);border-top:2px solid var(--color-border-input-default-accent);border-bottom:2px solid var(--color-border-input-default-accent);transform:translate(-50%,-50%) rotate(-45deg)}.variant-selector__label--disabled[data-v-8dd8c4aa]{color:var(--color-text-icon-base-disabled)}.variant-selector__option:not(.variant-selector__option--disabled) span[data-v-8dd8c4aa]{color:var(--color-text-icon-base-primary)}.variant-selector__option--swatch:has(.variant-selector__input:focus-visible) .variant-selector__swatch:not(.variant-selector__swatch--selected) .variant-selector__swatch-color[data-v-8dd8c4aa]{outline:var(--border-focused) solid var(--color-border-input-focused);outline-offset:var(--spacing-2)}.variant-selector__option--swatch:has(.variant-selector__input:focus-visible) .variant-selector__swatch--selected[data-v-8dd8c4aa]{outline:var(--border-focused) solid var(--color-border-input-focused);outline-offset:var(--spacing-2)}.variant-selector__expand.btn.btn--icon-only.btn--sm[data-v-8dd8c4aa]{position:absolute;top:50%;transform:translateY(-50%);margin-left:var(--spacing-12);width:32px;height:32px;min-height:32px;background:transparent;border-color:var(--color-border-action-secondary-neutral-default);color:var(--color-text-icon-action-secondary-neutral-default);flex-shrink:0}.variant-selector[data-v-8dd8c4aa]>button{align-self:flex-start}.variant-selector__visually-hidden[data-v-8dd8c4aa]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}