.hf-variant-picker{display:block;width:100%}.hf-variant-picker[aria-busy=true]{cursor:progress}.hf-variant-picker__group{min-width:0;margin:0;padding:0;border:0}.hf-variant-picker__group+.hf-variant-picker__group{margin-top:var(--hf-space-5)}.hf-variant-picker__legend{display:block;width:100%;margin:0 0 var(--hf-space-3);padding:0}.hf-variant-picker__header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--hf-space-2) var(--hf-space-4)}.hf-variant-picker__title{color:var(--hf-color-text-primary);font-size:var(--hf-font-size-label);font-weight:var(--hf-font-weight-semibold);letter-spacing:var(--hf-letter-spacing-label);line-height:var(--hf-line-height-body-compact);text-transform:uppercase}.hf-variant-picker__selection{color:var(--hf-color-text-secondary);font-size:var(--hf-font-size-body-sm);font-weight:var(--hf-font-weight-medium);letter-spacing:var(--hf-letter-spacing-normal);text-transform:none}.hf-variant-picker__selection:before{content:"\2014";margin-right:var(--hf-space-2);color:var(--hf-color-text-muted)}.hf-variant-picker__values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(4.5rem,100%),1fr));gap:var(--hf-space-2);width:100%}.hf-variant-picker__values--compact{grid-template-columns:repeat(auto-fit,minmax(min(3.75rem,100%),1fr))}.hf-variant-picker__values--natural{display:flex;flex-wrap:wrap;align-items:stretch}.hf-variant-picker__input{position:absolute;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;white-space:nowrap;border:0;clip:rect(0 0 0 0);clip-path:inset(50%)}.hf-variant-pill{position:relative;display:inline-flex;width:100%;min-width:var(--hf-touch-target-min);min-height:var(--hf-control-height-md);margin:0;padding:var(--hf-space-3) var(--hf-space-4);align-items:center;justify-content:center;gap:var(--hf-space-2);color:var(--hf-color-text-primary);background:var(--hf-color-surface-primary);border:var(--hf-border-width-thin) solid var(--hf-color-border-default);border-radius:var(--hf-radius-sm);font-family:var(--hf-font-family-body);font-size:var(--hf-font-size-body-sm);font-weight:var(--hf-font-weight-semibold);line-height:var(--hf-line-height-control);text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:color var(--hf-duration-fast) var(--hf-ease-standard),background-color var(--hf-duration-fast) var(--hf-ease-standard),border-color var(--hf-duration-fast) var(--hf-ease-standard),box-shadow var(--hf-duration-fast) var(--hf-ease-standard),opacity var(--hf-duration-fast) var(--hf-ease-standard),transform var(--hf-duration-fast) var(--hf-ease-standard)}.hf-variant-picker__values--natural .hf-variant-pill{width:auto;min-width:4rem}.hf-variant-pill:hover{background:var(--hf-color-surface-secondary);border-color:var(--hf-color-border-strong)}.hf-variant-pill:active{transform:translateY(1px)}.hf-variant-picker__input:checked+.hf-variant-pill{color:var(--hf-color-text-inverse);background:var(--hf-color-surface-inverse);border-color:var(--hf-color-surface-inverse);box-shadow:0 0 0 1px var(--hf-color-surface-inverse)}.hf-variant-picker__input:checked+.hf-variant-pill:hover{color:var(--hf-color-text-inverse);background:var(--hf-color-brand-primary-hover);border-color:var(--hf-color-brand-primary-hover)}.hf-variant-picker__input:focus-visible+.hf-variant-pill{outline:3px solid var(--hf-color-focus);outline-offset:3px}.hf-variant-pill.is-unavailable{color:var(--hf-color-text-muted);background:var(--hf-color-surface-secondary);border-color:var(--hf-color-border-subtle);opacity:.72}.hf-variant-pill.is-unavailable:after{position:absolute;top:50%;left:50%;width:calc(100% - var(--hf-space-3));height:1px;background:currentColor;content:"";opacity:.55;transform:translate(-50%,-50%) rotate(-18deg);pointer-events:none}.hf-variant-picker__input:checked+.hf-variant-pill.is-unavailable{color:var(--hf-color-text-inverse);background:var(--hf-color-text-muted);border-color:var(--hf-color-text-muted);opacity:1}.hf-variant-picker__input:disabled+.hf-variant-pill{color:var(--hf-color-text-disabled);background:var(--hf-color-surface-disabled);border-color:var(--hf-color-border-subtle);cursor:not-allowed;opacity:.52}.hf-variant-picker__input:disabled+.hf-variant-pill:hover{background:var(--hf-color-surface-disabled);border-color:var(--hf-color-border-subtle);transform:none}.hf-variant-pill--swatch{justify-content:flex-start;padding-right:var(--hf-space-4);padding-left:var(--hf-space-3)}.hf-variant-pill__swatch{display:block;width:1.5rem;height:1.5rem;flex:0 0 1.5rem;background:var(--hf-swatch-color, var(--hf-color-surface-tertiary));border:var(--hf-border-width-thin) solid rgba(17,17,17,.18);border-radius:var(--hf-radius-pill);box-shadow:inset 0 0 0 2px var(--hf-color-surface-primary)}.hf-variant-picker__input:checked+.hf-variant-pill .hf-variant-pill__swatch{border-color:#ffffff80;box-shadow:inset 0 0 0 2px var(--hf-color-surface-inverse),0 0 0 1px #fff9}.hf-variant-pill__text{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hf-variant-picker__support{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hf-space-2) var(--hf-space-4);margin-top:var(--hf-space-3)}.hf-variant-picker__fit{display:inline-flex;align-items:center;gap:var(--hf-space-2);color:var(--hf-color-text-secondary);font-size:var(--hf-font-size-body-sm);line-height:var(--hf-line-height-body-compact)}.hf-variant-picker__fit-icon{display:inline-grid;width:1.125rem;height:1.125rem;flex:0 0 1.125rem;place-items:center;color:var(--hf-color-success)}.hf-variant-picker__fit-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.hf-variant-picker__size-guide{display:inline-flex;min-height:var(--hf-touch-target-min);padding:var(--hf-space-2) 0;align-items:center;gap:var(--hf-space-2);color:var(--hf-color-text-primary);background:transparent;border:0;font:inherit;font-size:var(--hf-font-size-body-sm);font-weight:var(--hf-font-weight-semibold);line-height:var(--hf-line-height-body-compact);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;cursor:pointer}.hf-variant-picker__size-guide:hover{color:var(--hf-color-text-secondary)}.hf-variant-picker__size-guide:focus-visible{outline:3px solid var(--hf-color-focus);outline-offset:3px}.hf-variant-picker__status{min-height:1.25rem;margin-top:var(--hf-space-3);color:var(--hf-color-text-secondary);font-size:var(--hf-font-size-body-sm);line-height:var(--hf-line-height-body-compact)}.hf-variant-picker__status:empty{display:none}.hf-variant-picker__status.is-success{color:var(--hf-color-success)}.hf-variant-picker__status.is-warning{color:var(--hf-color-warning)}.hf-variant-picker__status.is-danger{color:var(--hf-color-danger)}.hf-variant-picker.has-error{padding:var(--hf-space-4);background:var(--hf-color-danger-soft);border:var(--hf-border-width-thin) solid var(--hf-color-danger);border-radius:var(--hf-radius-md)}.hf-variant-demo__output{display:grid;grid-template-columns:1fr;gap:var(--hf-space-3);padding:var(--hf-space-5);background:var(--hf-color-surface-secondary);border:var(--hf-border-width-thin) solid var(--hf-color-border-subtle);border-radius:var(--hf-radius-md)}.hf-variant-demo__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--hf-space-2) var(--hf-space-4)}.hf-variant-demo__key{color:var(--hf-color-text-secondary);font-size:var(--hf-font-size-body-sm)}.hf-variant-demo__value{color:var(--hf-color-text-primary);font-size:var(--hf-font-size-body-sm);font-weight:var(--hf-font-weight-semibold);text-align:right}@media(hover:none)and (pointer:coarse){.hf-variant-pill{min-height:var(--hf-control-height-lg)}}@media screen and (min-width:48rem){.hf-variant-picker__values{display:flex;flex-wrap:wrap}.hf-variant-pill{width:auto;min-width:4.25rem}.hf-variant-pill--swatch{min-width:7rem}.hf-variant-demo__output{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(prefers-reduced-motion:reduce){.hf-variant-pill{transition-duration:.01ms!important}.hf-variant-pill:active{transform:none}}@media(forced-colors:active){.hf-variant-pill{border:1px solid ButtonText}.hf-variant-picker__input:checked+.hf-variant-pill{color:HighlightText;background:Highlight;border-color:Highlight}.hf-variant-pill.is-unavailable:after{background:ButtonText}}
/*# sourceMappingURL=/cdn/shop/t/11/assets/hfds-variant-picker.css.map */