/* Indux Switches */

@layer components {

    :where(input[role=switch]) {
        position: relative;
        min-width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
        width: calc(var(--spacing-field-height, 2.25rem) * 0.65 * 2);
        height: calc(var(--spacing-field-height, 2.25rem) * 0.65);
        padding: 0;
        box-sizing: content-box;
        border-radius: calc(var(--spacing-field-height, 2.25rem) * 0.65);
        cursor: pointer;

        /* Marker */
        &::before {
            content: "";
            position: absolute;
            top: 0.125rem;
            left: 0.125rem;
            width: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
            height: calc(var(--spacing-field-height, 2.25rem) * 0.65 - 0.125rem * 2);
            border-radius: 50%;
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 60%, var(--color-field-inverse, oklch(16.6% 0.026 267)));
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            transition: var(--transition, all .05s ease-in-out)
        }

        /* Checked */
        &:checked {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));

            /* Marker */
            &::before {
                left: calc(100% - (var(--spacing-field-height, 2.25rem) * 0.65) + 0.125rem);
                background-color: var(--color-field-inverse, oklch(16.6% 0.026 267))
            }

            &:hover {
                background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
            }
        }
    }
}