@use "sass:list";

// Bulma variables - compatible with v0.9.x and v1.x
// Uses CSS variables with fallbacks matching Bulma 0.9.4 defaults
// v1.x: CSS variables (--bulma-*) will be used if defined
// v0.9.x: Fallback values will be used (no CSS variables in 0.9.x)

// Colors
$primary: var(--bulma-primary, #00d1b2);
$white: var(--bulma-white, #fff);
$white-bis: var(--bulma-white-bis, #fafafa);
$white-ter: var(--bulma-white-ter, #f5f5f5);
$grey-lighter: var(--bulma-grey-lighter, #dbdbdb);
$grey-light: var(--bulma-grey-light, #b5b5b5);
$grey: var(--bulma-grey, #7a7a7a);
$radius: var(--bulma-radius, 4px);

// Sizes - Sass variables for calculations
$size-small: 0.75rem;
$size-normal: 1rem;
$size-medium: 1.25rem;
$size-large: 1.5rem;

// Color map for variations
$colors: (
    "primary": ($primary, $white),
    "link": (var(--bulma-link, #485fc7), $white),
    "info": (var(--bulma-info, #3e8ed0), $white),
    "success": (var(--bulma-success, #48c78e), $white),
    "warning": (var(--bulma-warning, #ffe08a), rgba(0, 0, 0, 0.7)),
    "danger": (var(--bulma-danger, #f14668), $white)
);

.bbr-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    &.is-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
    }
}

.bbr-radio-item {
    display: flex;
    align-items: center;
}

.is-checkradio.bbr-radio[type="radio"] {
    outline: 0;
    user-select: none;
    display: inline-block;
    position: absolute;
    opacity: 0;

    + label {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding-left: 1.75rem;
        cursor: pointer;
        font-size: $size-normal;
        line-height: 1.25;
        min-height: 1.5rem;

        &::before {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 1.25rem;
            height: 1.25rem;
            border: 0.1rem solid $grey-lighter;
            border-radius: $radius;
            background: transparent;
            content: "";
            transition: background 0.15s ease-out, border-color 0.15s ease-out;
        }

        &::after {
            position: absolute;
            left: 0.3125rem;
            top: 50%;
            transform: translateY(-50%) scale(0);
            width: 0.625rem;
            height: 0.625rem;
            border-radius: $radius;
            background: $primary;
            content: "";
            transition: transform 0.15s ease-out;
        }
    }

    &:checked + label::after {
        transform: translateY(-50%) scale(1);
    }

    &:checked + label::before {
        border-color: $primary;
    }

    &:focus + label::before {
        border-color: $primary;
        box-shadow: 0 0 0 0.125em rgba($primary, 0.25);
    }

    &:hover:not(:disabled) + label::before {
        border-color: $grey-light;
    }

    &:disabled {
        cursor: not-allowed;

        + label {
            opacity: 0.5;
            cursor: not-allowed;
        }
    }

    // Circle style (default for radio)
    &.is-circle + label {
        &::before {
            border-radius: 50%;
        }

        &::after {
            border-radius: 50%;
        }
    }

    // Block style
    &.is-block {
        + label {
            padding: 0.5rem 0.75rem 0.5rem 2.25rem;
            background: $white-bis;
            border-radius: $radius;
            width: 100%;

            &::before {
                left: 0.5rem;
            }

            &::after {
                left: 0.8125rem;
            }

            &:hover {
                background: $white-ter;
            }
        }

        &:checked + label {
            background: rgba($primary, 0.1);
        }
    }

    // Without border
    &.has-no-border + label::before {
        border: none;
        background: $grey-lighter;
    }

    &.has-no-border:checked + label::before {
        background: rgba($primary, 0.2);
    }

    // Has background color
    &.has-background-color + label::before {
        background: $white-ter;
    }

    &.has-background-color:checked + label::before {
        background: rgba($primary, 0.15);
        border-color: $primary;
    }

    // Size variations
    &.is-small {
        + label {
            font-size: $size-small;
            padding-left: 1.5rem;

            &::before {
                width: 1rem;
                height: 1rem;
            }

            &::after {
                width: 0.5rem;
                height: 0.5rem;
                left: 0.25rem;
            }
        }

        &.is-block + label {
            padding-left: 2rem;

            &::before {
                left: 0.5rem;
            }

            &::after {
                left: 0.75rem;
            }
        }
    }

    &.is-medium {
        + label {
            font-size: $size-medium;
            padding-left: 2rem;

            &::before {
                width: 1.5rem;
                height: 1.5rem;
            }

            &::after {
                width: 0.75rem;
                height: 0.75rem;
                left: 0.375rem;
            }
        }

        &.is-block + label {
            padding-left: 2.5rem;

            &::before {
                left: 0.5rem;
            }

            &::after {
                left: 0.875rem;
            }
        }
    }

    &.is-large {
        + label {
            font-size: $size-large;
            padding-left: 2.25rem;

            &::before {
                width: 1.75rem;
                height: 1.75rem;
            }

            &::after {
                width: 0.875rem;
                height: 0.875rem;
                left: 0.4375rem;
            }
        }

        &.is-block + label {
            padding-left: 2.75rem;

            &::before {
                left: 0.5rem;
            }

            &::after {
                left: 0.9375rem;
            }
        }
    }

    // Color variations
    @each $name, $pair in $colors {
        $color: list.nth($pair, 1);

        &.is-#{$name} {
            &:checked + label::before {
                border-color: $color;
            }

            &:checked + label::after {
                background: $color;
            }

            &:focus + label::before {
                border-color: $color;
                box-shadow: 0 0 0 0.125em rgba($color, 0.25);
            }

            &.is-block:checked + label {
                background: rgba($color, 0.1);
            }

            &.has-background-color:checked + label::before {
                background: rgba($color, 0.15);
                border-color: $color;
            }

            &.has-no-border:checked + label::before {
                background: rgba($color, 0.2);
            }
        }
    }
}