/* Indux Radios */

@layer components {

    input[type=radio] {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.625);
        padding: 5px;
        border-radius: 50%;
        cursor: pointer;

        /* Notch */
        &::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 60%;
            height: 60%;
            background-color: var(--color-field-inverse, oklch(16.6% 0.026 267));
            border-radius: 50%;
            transform-origin: center;
            transition: var(--transition, all .05s ease-in-out);

            /* Notch unchecked */
            opacity: 0;
            transform: translateX(-50%) translateY(-50%) scale(0)
        }

        /* Notch checked */
        &:checked::after {
            opacity: 1;
            transform: translateX(-50%) translateY(-50%) scale(1)
        }
    }
}