/**
 * ============================================================================
 * Circular checkbox / radio-like selector
 * ----------------------------------------------------------------------------
 * Reusable lightweight UI component that mimics a radio-button appearance.
 *
 * Features:
 * - Circular outer border
 * - Centered inner filled dot when checked
 * - Stable center alignment across browser zoom levels
 * - Fully CSS-driven
 * - Customizable size and color through CSS variables
 *
 * Expected structure:
 *
 * <div class="radio-check radio-check-primary">
 *     <input type="checkbox" id="example">
 *     <label for="example"></label>
 * </div>
 *
 * Optional custom sizing:
 *
 * <div class="radio-check radio-check-success"
 *      style="
 *          --radio-check-size: 12px;
 *          --radio-check-dot-size: 5px;
 *      ">
 *     <input type="checkbox" id="example">
 *     <label for="example"></label>
 * </div>
 *
 * Notes:
 * - The dot is rendered with a centered radial-gradient instead of ::after.
 * - This avoids transform/subpixel alignment issues at different zoom levels.
 * ============================================================================
 */


/**
 * Animatable inner dot radius.
 * ----------------------------------------------------------------------------
 * Allows the radial-gradient dot to animate smoothly while staying centered.
 * This avoids transform-based animation, which can cause subpixel alignment
 * issues in very small components.
 */
@property --radio-check-dot-radius {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/**
 * Root wrapper
 * ----------------------------------------------------------------------------
 * Provides:
 * - Inline grid alignment
 * - Default size variables
 * - Default color variables
 */
.radio-check {
    --radio-check-size: 12px;
    --radio-check-dot-size: 6px;
    --radio-check-dot-radius: 0px;

    --radio-check-color: #5f5f5f;
    --radio-check-border-color: #b8b8b8;
    --radio-check-bg: #fff;

    display: inline-grid;
    place-items: center;

    width: var(--radio-check-size);
    height: var(--radio-check-size);

    line-height: 0;
}


/**
 * Hidden native checkbox
 * ----------------------------------------------------------------------------
 * Preserves semantic behavior while removing the browser default checkbox UI.
 */
.radio-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/**
 * Visible circular control
 * ----------------------------------------------------------------------------
 * The label becomes the rendered checkbox element.
 *
 * Important:
 * - Uses a 1px border instead of 1.5px to avoid subpixel rendering issues.
 * - Uses CSS Grid to keep internal rendering centered.
 * - Uses radial-gradient for the checked dot instead of transform-based pseudo-elements.
 */
.radio-check label {
    width: var(--radio-check-size);
    height: var(--radio-check-size);

    box-sizing: border-box;

    display: grid;
    place-items: center;

    border: 1px solid var(--radio-check-border-color);
    border-radius: 50%;

    background-color: var(--radio-check-bg);
    background-image: radial-gradient(
        circle at center,
        var(--radio-check-color) 0,
        var(--radio-check-color) var(--radio-check-dot-radius),
        transparent calc(var(--radio-check-dot-radius) + 0.25px)
    );
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

    cursor: pointer;

    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        --radio-check-dot-radius 0.15s ease;
}


/**
 * Checked state
 * ----------------------------------------------------------------------------
 * Draws the inner dot exactly in the center using a radial-gradient.
 *
 * The dot size is controlled by --radio-check-dot-size.
 */
.radio-check input:checked + label {
    --radio-check-dot-radius: calc(var(--radio-check-dot-size) / 2);

    border-color: var(--radio-check-color);
}


/**
 * Focus state
 * ----------------------------------------------------------------------------
 * Keeps keyboard accessibility visible without changing layout dimensions.
 */
.radio-check input:focus-visible + label {
    outline: 2px solid color-mix(in srgb, var(--radio-check-color) 35%, transparent);
    outline-offset: 2px;
}


/* ============================================================================
   Color utility classes
   ----------------------------------------------------------------------------
   Ready-to-use semantic color variants.
   These override --radio-check-color.
   ========================================================================== */

.radio-check-primary {
    --radio-check-color: var(--bs-primary);
}

.radio-check-secondary {
    --radio-check-color: var(--bs-secondary);
}

.radio-check-success {
    --radio-check-color: var(--bs-success);
}

.radio-check-info {
    --radio-check-color: var(--bs-info);
}

.radio-check-warning {
    --radio-check-color: var(--bs-warning);
}

.radio-check-danger {
    --radio-check-color: var(--bs-danger);
}

.radio-check-dark {
    --radio-check-color: var(--bs-dark);
}


/**
 * Extra custom color variants
 * ----------------------------------------------------------------------------
 * Useful for design systems that include additional semantic palettes.
 */
.radio-check-teal {
    --radio-check-color: #14b8a6;
}

.radio-check-indigo {
    --radio-check-color: #6366f1;
}

.radio-check-darken {
    --radio-check-color: #2f2f2f;
}