.variant-dropdown{--swatch-input--border-radius: .5rem;position:relative;width:100%}.variant-dropdown__trigger-container{display:flex;align-items:stretch;width:100%;background-color:#fff;border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));border-radius:var(--inputs-radius);transition:border-color var(--duration-short) ease;position:relative}.variant-dropdown__trigger-container:hover,.variant-dropdown__trigger-container:focus-within{border-color:rgb(var(--color-foreground))}.variant-dropdown__trigger-swatch-wrapper{--swatch-input--size: 4.4rem;display:flex;align-items:center;padding:.8rem 0 .8rem 1.2rem;cursor:pointer;z-index:2}.variant-dropdown__trigger-swatch-wrapper .swatch{--swatch--size: 4.4rem}.variant-dropdown__trigger-swatch-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.variant-dropdown__trigger-swatch-label{display:flex;align-items:center;cursor:pointer}.variant-dropdown__trigger{display:flex;align-items:center;gap:1.2rem;flex:1;min-height:6rem;padding:.8rem 4rem .8rem 1.2rem;background-color:transparent;border:none;cursor:pointer;font-size:1.4rem;text-align:left;color:rgb(var(--color-foreground))}.variant-dropdown__trigger:hover,.variant-dropdown__trigger:focus{outline:none}.variant-dropdown__trigger-text-container{flex:1;display:flex;flex-direction:column;gap:.2rem;overflow:hidden}.variant-dropdown__trigger-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variant-dropdown__trigger-subtitle{font-size:1.2rem;color:rgba(var(--color-foreground),.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variant-dropdown__trigger-icon{position:absolute;right:1.6rem;top:50%;transform:translateY(-50%);width:1rem;height:.6rem;transition:transform var(--duration-medium) ease;pointer-events:none}.variant-dropdown[open] .variant-dropdown__trigger-icon{transform:translateY(-50%) rotate(180deg)}.variant-dropdown__panel{position:absolute;top:calc(100% + .4rem);left:0;right:0;z-index:100;background-color:#fff;border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));border-radius:var(--inputs-radius);box-shadow:0 .4rem 1.6rem rgba(var(--color-foreground),.15);max-height:40rem;overflow-y:auto;overscroll-behavior:contain;display:none}.variant-dropdown[open] .variant-dropdown__panel{display:block;animation:variantDropdownFadeIn var(--duration-short) ease}@keyframes variantDropdownFadeIn{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:translateY(0)}}.variant-dropdown__group-header{padding:1rem 1.6rem .6rem;font-size:1.1rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:rgba(var(--color-foreground),.6);background-color:#fff;border-bottom:1px solid rgba(var(--color-foreground),.1);position:sticky;top:0;z-index:1}.variant-dropdown__group-header:not(:first-child){margin-top:.8rem;border-top:1px solid rgba(var(--color-foreground),.1);padding-top:1.4rem}.variant-dropdown__options{list-style:none;padding:0;margin:0}.variant-dropdown__option{display:flex;align-items:center;gap:1.2rem;padding:1rem 1.6rem;cursor:pointer;transition:background-color var(--duration-short) ease}.variant-dropdown__option:hover,.variant-dropdown__option:focus{background-color:rgba(var(--color-foreground),.04);outline:none}.variant-dropdown__option[aria-selected=true]{background-color:rgba(var(--color-foreground),.08)}.variant-dropdown__option[aria-disabled=true]{opacity:.5;cursor:not-allowed}.variant-dropdown__option[aria-disabled=true] .variant-dropdown__option-title{text-decoration:line-through}.variant-dropdown__option-swatch{--swatch-input--size: 6rem;flex-shrink:0}.variant-dropdown__option-swatch .swatch{--swatch--size: 6rem}.variant-dropdown__option-text{flex:1;display:flex;flex-direction:column;gap:.2rem;overflow:hidden}.variant-dropdown__option-title{font-size:1.4rem;line-height:normal;color:rgb(var(--color-foreground));overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variant-dropdown__option-subtitle{font-size:1.2rem;line-height:normal;color:rgba(var(--color-foreground),.6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.variant-dropdown__native-select{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.variant-dropdown__option:focus-visible{outline:2px solid rgb(var(--color-foreground));outline-offset:-2px}.variant-dropdown__trigger:focus-visible{box-shadow:0 0 0 .3rem rgb(var(--color-background)),0 0 0 .5rem rgba(var(--color-foreground),.55)}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-variant-dropdown.css.map */