.root {
    composes: gap-3 from global;
    composes: grid from global;
    composes: grid-flow-col from global;
    composes: items-center from global;
    composes: justify-items-center from global;
    composes: leading-normal from global;
    composes: m-0 from global;
    composes: text-colorDefault from global;
    grid-template-areas: 'input label';
    grid-template-columns: min-content 1fr;
}

.input {
    composes: appearance-none from global;
    composes: bg-clip-content from global;
    composes: bg-transparent from global;
    composes: border-8 from global;
    composes: border-solid from global;
    composes: border-transparent from global;
    composes: h-[1.5rem] from global;
    composes: m-0 from global;
    composes: rounded-full from global;
    composes: w-[1.5rem] from global;
    composes: z-foreground from global;
    grid-area: input;

    composes: active_outline-none from global;
    composes: active_shadow-radioActive from global;

    composes: checked_bg-brand-dark from global;

    composes: focus_outline-none from global;
    composes: focus_shadow-radioFocus from global;
}

.icon {
    composes: h-[1.5rem] from global;
    composes: w-[1.5rem] from global;
    composes: z-surface from global;
    grid-area: input;
}

.icon svg {
    @apply stroke-gray-600;
}

.label {
    composes: justify-self-start from global;
    composes: text-sm from global;
    grid-area: label;
}

.input:checked + .icon svg {
    @apply stroke-brand-base;
}

.input_shimmer {
    composes: h-[1.5rem] from global;
    composes: m-0 from global;
    composes: rounded-full from global;
    composes: w-[1.5rem] from global;
    composes: z-foreground from global;
}