.lens-color-picker{display:block;margin-bottom:calc(4 * var(--space-unit))}.lens-color-picker__trigger{display:flex;align-items:center;justify-content:center;gap:10px}.lens-color-picker__trigger-swatch{--swatch-background-color: transparent;flex:0 0 auto;width:20px;height:20px;border:1px solid rgb(var(--text-color)/.3);border-radius:50%;background-color:var(--swatch-background-color)}.lens-color-picker__trigger-swatch:empty{display:none}.lens-color-picker-drawer{width:90vw;transition:transform .35s ease,visibility .35s ease}.lens-color-picker-drawer[open]{transition:visibility 0s 0s,transform .35s ease}@media(min-width:768px){.lens-color-picker-drawer{width:min(90vw,420px)}}.lens-color-picker__options{display:flex;flex-direction:column;gap:calc(2 * var(--space-unit))}.lens-color-picker__option{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid rgb(var(--text-color)/var(--divider-opacity));border-radius:var(--btn-border-radius);cursor:pointer;transition:border-color .1s,background-color .1s}@media(hover:hover){.lens-color-picker__option:hover{border-color:rgb(var(--text-color)/.5)}}.lens-color-picker__option:has(.lens-color-picker__radio:checked){border-color:rgb(var(--text-color));background-color:rgb(var(--text-color)/.04)}.lens-color-picker__swatch{--swatch-background-color: transparent;flex:0 0 auto;width:40px;height:40px;aspect-ratio:1;border:1px solid rgb(var(--text-color)/var(--divider-opacity));border-radius:50%;background-color:var(--swatch-background-color);background-size:cover;background-position:center}.lens-color-picker__swatch--photo{border-radius:6px}.lens-color-picker__radio:focus-visible+.lens-color-picker__swatch{outline:2px solid rgb(var(--text-color));outline-offset:2px}.lens-color-picker__option-text{display:flex;flex-direction:column;gap:2px}.lens-color-picker__option-name{color:rgb(var(--heading-color));font-weight:var(--base-font-weight)}.lens-color-picker__option-price{color:rgb(var(--text-color)/.65);font-size:var(--smaller-text-size-1)}.lens-color-picker__option-warning{margin:0;padding:8px 12px;border:1px dashed rgb(var(--text-color)/.5);border-radius:var(--btn-border-radius);color:rgb(var(--text-color)/.75)}.lens-color-picker__switcher{margin-bottom:calc(4 * var(--space-unit))}.lens-color-picker__switcher-track{position:relative;display:flex;flex-wrap:nowrap;padding:4px;background-color:rgb(var(--text-color)/.08);border-radius:100px}.lens-color-picker__switcher-thumb{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--lcp-count, 4));background-color:#fff;border-radius:100px;box-shadow:0 2px 15px #00000026;transform:translate(calc(var(--lcp-index, 0) * 100%));transition:transform .3s cubic-bezier(.25,.46,.45,.94)}.lens-color-picker__tab{position:relative;z-index:1;flex:1 1 0;min-width:0;padding:8px 4px;text-align:center;cursor:pointer;opacity:.55;transition:opacity .3s;-webkit-user-select:none;user-select:none}.lens-color-picker__tab:has(.lens-color-picker__finish-radio:checked){opacity:1}.lens-color-picker__finish-radio:focus-visible~.lens-color-picker__tab-text{outline:2px solid rgb(var(--text-color));outline-offset:4px;border-radius:4px}.lens-color-picker__tab-text{display:block;color:rgb(var(--heading-color));font-size:var(--smaller-text-size-1);line-height:1.3}.lens-color-picker__tab-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lens-color-picker__tab-price{display:block;font-size:85%;color:rgb(var(--text-color)/.65);white-space:nowrap}.lens-color-picker__subheading{padding:0;margin-bottom:calc(2 * var(--space-unit));color:rgb(var(--heading-color));font-weight:var(--base-font-weight)}.lens-color-picker__total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:calc(4 * var(--space-unit));padding-top:calc(2 * var(--space-unit));border-top:1px solid rgb(var(--text-color)/var(--divider-opacity))}.lens-color-picker__total-label{color:rgb(var(--heading-color))}.lens-color-picker__total-amount{color:rgb(var(--heading-color));font-weight:700}.lens-color-picker__confirm{margin-top:calc(2 * var(--space-unit))}
/*# sourceMappingURL=/cdn/shop/t/3/assets/lens-color-picker.css.map */