.visual-select{position:relative}.visual-select__native{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;pointer-events:none}.visual-select__button{display:flex;align-items:center;gap:1rem;text-align:left}.visual-select__button img{flex-shrink:0;width:2.4rem;height:2.4rem;border-radius:.3rem;object-fit:cover}.visual-select__button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.visual-select__listbox[hidden]{display:none}.visual-select__listbox{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;position:absolute;z-index:5;top:calc(100% + .4rem);left:0;right:0;margin:0;padding:1rem;max-height:36rem;overflow-y:auto;background-color:rgb(var(--color-background));border-radius:var(--popup-corner-radius, .4rem);box-shadow:var(--popup-shadow-horizontal-offset, 0) var(--popup-shadow-vertical-offset, .2rem) var(--popup-shadow-blur-radius, 1rem) rgba(var(--color-shadow),var(--popup-shadow-opacity, .2));border:var(--popup-border-width, .1rem) solid rgba(var(--color-foreground),var(--popup-border-opacity, .1))}.visual-select__option{display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:.8rem .4rem;border-radius:.4rem;cursor:pointer;font-size:1.2rem;line-height:1.3;text-align:center;color:rgb(var(--color-foreground))}.visual-select__option-media{display:block;width:100%;aspect-ratio:1 / 1;border-radius:.4rem;background-color:rgba(var(--color-foreground),.04);overflow:hidden}.visual-select__option-media{position:relative}.visual-select__option-media img{width:100%;height:100%;object-fit:cover}.visual-select__option-zoom{position:absolute;right:.4rem;bottom:.4rem;width:2.2rem;height:2.2rem;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:rgba(var(--color-background),.9);color:rgb(var(--color-foreground));border:.1rem solid rgba(var(--color-foreground),.15);cursor:pointer}.visual-select__option-zoom svg{width:1.3rem;height:1.3rem}.visual-select-preview{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center}.visual-select-preview[hidden]{display:none}.visual-select-preview .visual-select-preview__backdrop{display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-color:#0009}.visual-select-preview__dialog{position:relative;z-index:1;max-width:min(90vw,48rem);max-height:90vh;background-color:rgb(var(--color-background));border-radius:.6rem;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem}.visual-select-preview__image{max-width:100%;max-height:70vh;border-radius:.4rem;object-fit:contain}.visual-select-preview__label{margin:0;font-size:1.6rem;font-weight:600;color:rgb(var(--color-foreground));text-align:center}.visual-select-preview__close{position:absolute;top:.8rem;right:.8rem;width:3.2rem;height:3.2rem;display:flex;align-items:center;justify-content:center;font-size:2.2rem;line-height:1;border-radius:50%;background-color:rgba(var(--color-foreground),.06);color:rgb(var(--color-foreground));cursor:pointer}.visual-select__option:hover,.visual-select__option:focus-visible{background-color:rgba(var(--color-foreground),.06);outline:0}.visual-select__option--selected{border-color:rgb(var(--color-foreground));font-weight:600}.visual-select__option--selected .visual-select__option-media{box-shadow:0 0 0 .2rem rgb(var(--color-background)),0 0 0 .4rem rgb(var(--color-foreground))}.visual-select__option[aria-disabled=true]{opacity:.5;cursor:not-allowed;text-decoration:line-through}@media screen and (max-width:480px){.visual-select__listbox{grid-template-columns:repeat(2,1fr)}}
/*# sourceMappingURL=/cdn/shop/t/9/assets/component-visual-select.css.map */