.variant-wrapper{display:flex;flex-direction:column;gap:1em}.variant-wrapper fieldset{border:none}.variant-wrapper fieldset.disabled{opacity:.25;pointer-events:none}.variant-wrapper fieldset legend{display:flex;margin-bottom:.5em;gap:.25em}.variant-wrapper fieldset legend span{font-size:.875em}.variant-wrapper fieldset legend span.variant-name{font-weight:700}.variant-wrapper fieldset.plain legend span.variant-name{display:none}.variant-wrapper fieldset.plain .variant-options{gap:.5em}.variant-wrapper fieldset .variant-options{display:flex;flex-wrap:wrap;gap:.25em}.variant-wrapper fieldset .variant-options label{display:block;background-color:var(--color-bg-light);border:1px solid var(--color-border-primary);cursor:pointer;width:2.5em;height:2.5em;border-radius:50%;position:relative;overflow:hidden}.variant-wrapper fieldset .variant-options label.active{border-color:var(--color-text-body)}.variant-wrapper fieldset .variant-options label span{display:flex;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 4px);height:calc(100% - 4px);border-radius:50%;align-items:center;justify-content:center}.variant-wrapper fieldset .variant-options label.disabled{opacity:.5}.variant-wrapper fieldset .variant-options label.disabled:after{content:'';width:4em;height:2px;background-color:var(--color-bg-light);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-45deg)}.variant-wrapper fieldset .variant-options label.plain{border-radius:.25em;background-color:var(--color-bg-light);border-color:var(--color-text-body);padding:0 1em;height:3em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;min-width:3em}.variant-wrapper fieldset .variant-options label.plain span{position:relative;left:auto;top:auto;transform:none;width:100%;height:100%;border-radius:.125em;background-color:transparent;font-size:1.125em}.variant-wrapper fieldset .variant-options label.plain.disabled{opacity:1;background-color:transparent}.variant-wrapper fieldset .variant-options label.plain.disabled span{opacity:.65}.variant-wrapper fieldset .variant-options label.plain.disabled:after{height:1px;background-color:rgba(0,0,0,.3)}.variant-wrapper fieldset .variant-options label.plain.active{background-color:var(--color-text-body);color:var(--color-bg-light)}.variant-wrapper fieldset .variant-options label.plain.active.disabled:after{background-color:rgba(255,255,255,.3)}.variant-wrapper fieldset .variant-options input{display:none}.variant-wrapper .variant-error{color:#e23a3a}.variant-wrapper .variant-error>span{font-size:.75em}.variant-wrapper .variant-error.hidden{display:none}