.color-picker{display:block;width:100%}.color-picker__label-row{display:flex;align-items:baseline;gap:.25rem;margin-bottom:.625rem}.color-picker__label,.color-picker__selected-value{color:var(--primary_text);text-transform:uppercase}.color-picker__swatches{display:flex;flex-wrap:wrap;gap:.625rem}.color-picker__swatch{position:relative;width:28px;height:28px;padding:0;border:none;background:transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--primary_text)}.color-picker__swatch[hidden]{display:none}.color-picker__swatch:before{content:"";position:absolute;top:50%;left:50%;width:2.75rem;height:2.75rem;transform:translate(-50%,-50%)}.color-picker__swatch svg{position:absolute;top:50%;left:50%;width:28px;height:28px;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;opacity:0;transition:opacity .15s ease}.color-picker__swatch:hover svg,.color-picker__swatch.is-selected svg,.color-picker__swatch.is-oos svg{opacity:1}.color-picker__swatch:focus-visible{outline:2px solid var(--primary_text);outline-offset:2px;border-radius:50%}.color-picker__swatch-inner{position:absolute;top:50%;left:50%;width:28px;height:28px;border-radius:50%;transform:translate(-50%,-50%)}.color-picker__swatch.is-selected .color-picker__swatch-inner,.color-picker__swatch:hover .color-picker__swatch-inner,.color-picker__swatch.is-oos .color-picker__swatch-inner{width:20px;height:20px}.color-picker__swatch.is-white .color-picker__swatch-inner{box-shadow:inset 0 0 0 1px var(--tertiary_gray)}.color-picker__swatch.is-oos .color-picker__swatch-inner{opacity:.45}.color-picker__swatch.is-oos:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:linear-gradient(to top left,transparent calc(50% - .5px),var(--primary_text) calc(50% - .5px),var(--primary_text) calc(50% + .5px),transparent calc(50% + .5px));pointer-events:none}.color-picker__swatch.is-oos:not(.is-selected){color:var(--secondary_gray)}.color-picker__swatch.is-oos:not(.is-selected):after{background:linear-gradient(to top left,transparent calc(50% - .5px),var(--secondary_gray) calc(50% - .5px),var(--secondary_gray) calc(50% + .5px),transparent calc(50% + .5px))}@media(prefers-reduced-motion:reduce){.color-picker,.color-picker *{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-color_picker.css.map */