.birthstone-picker{--bs-columns: 2;--bs-columns-mobile: 2;display:grid;gap:var(--spacing-4, 1rem)}.birthstone-field{display:grid;gap:var(--spacing-2, .5rem)}.birthstone-field__header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--spacing-2, .5rem)}.birthstone-field__label{color:rgb(var(--text-color) / var(--text-subdued-opacity, .7));font-size:var(--text-sm, .875rem)}.birthstone-field__asterisk{color:rgb(var(--text-color))}.birthstone-field__control{position:relative}.birthstone-field__trigger{display:flex;align-items:center;justify-content:center;gap:var(--spacing-2, .5rem);width:100%;height:var(--input-height);padding-block:0;padding-inline:calc(var(--input-padding-inline) * 2);position:relative;border:1px solid rgb(var(--border-color));border-radius:var(--rounded-input, 0);background:transparent;color:rgb(var(--text-color));font-size:var(--text-base, 1rem);text-align:center;cursor:pointer;transition:border-color .15s ease-in-out}.birthstone-field__trigger:hover{border-color:rgb(var(--text-color) / .4)}.birthstone-field__trigger:focus-visible{outline:2px solid rgb(var(--text-color) / .5);outline-offset:2px}.birthstone-field.has-error .birthstone-field__trigger{border-color:rgb(var(--error-text-color, 200 40 40))}.birthstone-field__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.birthstone-field__value.is-placeholder{color:rgb(var(--text-color) / .6)}.birthstone-field__thumb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.5rem;height:1.5rem;border-radius:var(--rounded-full, 9999px);overflow:hidden;background:rgb(var(--text-color) / .04)}.birthstone-field__thumb img{width:100%;height:100%;object-fit:contain}.birthstone-field__chevron{position:absolute;inset-inline-end:var(--input-padding-inline);top:50%;translate:0 -50%;pointer-events:none}.birthstone-field__clear{display:none;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;position:absolute;inset-inline-end:calc(var(--input-padding-inline) - .375rem);top:50%;translate:0 -50%;padding:0;border:1px solid rgb(var(--text-color) / .25);border-radius:var(--rounded-full, 9999px);background:transparent;color:rgb(var(--text-color));cursor:pointer;transition:border-color .15s ease-in-out,background .15s ease-in-out}.birthstone-field__clear:hover{border-color:rgb(var(--text-color) / .6);background:rgb(var(--text-color) / .06)}.birthstone-field__clear:focus-visible{outline:2px solid rgb(var(--text-color) / .5);outline-offset:2px}.birthstone-field.has-value .birthstone-field__clear{display:flex}.birthstone-field.has-value .birthstone-field__chevron{display:none}.birthstone-field__help{flex:none;background:none;border:none;padding:0;cursor:pointer}.birthstone-field__error{color:rgb(var(--error-text-color, 200 40 40));font-size:var(--text-sm, .875rem)}.birthstone-picker__grid{display:grid;grid-template-columns:repeat(var(--bs-columns-mobile, 2),minmax(0,1fr));gap:var(--spacing-3, .75rem);width:100%;align-self:start}@media screen and (min-width:700px){.birthstone-picker__grid{grid-template-columns:repeat(var(--bs-columns, 2),minmax(0,1fr))}}.birthstone-option{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--spacing-2, .5rem);padding:1rem .5rem;border:1px solid transparent;border-radius:var(--rounded-sm, .25rem);background:rgb(var(--text-color) / .04);color:rgb(var(--text-color));cursor:pointer;text-align:center;transition:border-color .15s ease-in-out,background .15s ease-in-out}.birthstone-option:hover{border-color:rgb(var(--text-color) / .25)}.birthstone-option[aria-checked=true]{border-color:rgb(var(--text-color));background:rgb(var(--text-color) / .07)}.birthstone-option:focus-visible{outline:2px solid rgb(var(--text-color) / .5);outline-offset:2px}.birthstone-option.is-disabled,.birthstone-option[disabled]{opacity:.35;cursor:not-allowed}.birthstone-option__media{display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;border-radius:var(--rounded-full, 9999px);background:rgb(var(--background, 255 255 255));overflow:hidden}.birthstone-option__media img{width:78%;height:78%;object-fit:contain}.birthstone-option__dot{width:60%;height:60%;border-radius:var(--rounded-full, 9999px)}.birthstone-option__dot--empty{background:rgb(var(--text-color) / .12)}.birthstone-option__name{font-size:var(--text-sm, .875rem);line-height:1.2}.birthstone-option__note{font-size:var(--text-xs, .75rem);color:rgb(var(--text-color) / .6)}.birthstone-drawer::part(body){align-items:start}x-drawer.birthstone-drawer[open]{visibility:visible!important}x-drawer.birthstone-drawer:not([open]){pointer-events:none}.birthstone-drawer__title{text-transform:uppercase;letter-spacing:.04em}
/*# sourceMappingURL=/cdn/shop/t/63/assets/birthstone-picker.css.map */