https://versedskin.com/cdn/shop/t/1031/assets/component-radio-wrapper.js?v=174780753716330014981742243424

1import{LitElement,html,css}from"@hh/global.js";class HHRadioWrapper extends LitElement{static properties={disabled:{type:Boolean,reflect:!0}};constructor(){super()}connectedCallback(){super.connectedCallback()}disconnectedCallback(){super.disconnectedCallback()}firstUpdated(){this.disabled=this.input.disabled,this.checked=this.input.checked}get input(){return this.shadowRoot?.querySelector("slot[name='input']")?.assignedNodes()[0]??null}render(){return html`
2      <slot name="input" part="input"></slot>
3      <slot name="label" part="label"></slot>
4    `}static styles=css`
5    *,
6    *::before,
7    *::after {
8      box-sizing: border-box;
9    }
10
11    :host {
12      display: inline-flex;
13      align-items: flex-start;
14      column-gap: var(--hh-column-gap, 0.5rem);
15    }
16
17    ::slotted(input) {
18      appearance: none;
19      touch-action: none;
20      margin: 0;
21      width: var(--hh-width, 2.4rem);
22      height: var(--hh-height, 2.4rem);
23      border: 1px solid var(--hh-color-input-border, #646464);
24      border-radius: var(--hh-border-radius, 50%);
25      position: relative;
26      cursor: pointer;
27    }
28
29    ::slotted(input)::before {
30      content: '';
31      pointer-events: none;
32      width: calc(var(--hh-width, 2.4rem) / var(--hh-dot-to-border-ratio, 2));
33      height: calc(var(--hh-height, 2.4rem) / var(--hh-dot-to-border-ratio, 2));
34      border-radius: var(--hh-border-radius, 50%);
35      background-color: var(--hh-color, #646464);
36      scale: 0;
37      position: absolute;
38      top: 50%;
39      left: 50%;
40      transform: translate(-50%, -50%);
41    }
42
43    :host(:hover) ::slotted(input:not(:disabled):hover),
44    :host(:not([disabled]):hover) ::slotted(label:hover) {
45      border-color: var(--hh-color-input-border-hover, #646464);
46      color: var(--hh-color-label-hover);
47    }
48
49    ::slotted(input:checked)::before {
50      scale: 1;
51    }
52
53    ::slotted(input:focus) {
54      border: 1px solid var(--hh-color, #646464) !important;
55    }
56
57    ::slotted(input:disabled) {
58      border-color: var(--hh-color-input-border-disabled);
59      cursor: default;
60    }
61
62    ::slotted(label) {
63      cursor: pointer;
64      max-width: var(--hh-label-max-width, 21rem);
65      color: var(--hh-color-label);
66      transform: translateY(-3px);
67    }
68
69    :host([disabled]) ::slotted(label) {
70      cursor: default;
71      color: var(--hh-color-label-disabled);
72    }
73  `}customElements.define("hh-radio-wrapper",HHRadioWrapper);
74//# sourceMappingURL=/cdn/shop/t/1031/assets/component-radio-wrapper.js.map?v=174780753716330014981742243424