@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/utilities/mixins" as mixins;
@use "bulma/sass/utilities/controls" as controls;
@use "../utils/shared";

$radio-active-background-color: cv.getVar('primary') !default;
$radio-size: 1.25em !default;
$radio-colors: shared.$form-colors !default;
$radio-border-color: cv.getVar('border') !default;
$radio-shadow: cv.getVar('shadow') !default;

.#{iv.$class-prefix}b-radio {
    @include cv.register-vars((
        "radio-active-background-color": #{$radio-active-background-color},
        "radio-shadow": #{$radio-shadow},
        "radio-size": #{$radio-size},
        "radio-border-color": #{$radio-border-color}
    ));

    &.radio input[type=radio] + .check {
        @each $name, $pair in $radio-colors {  
          &.#{iv.$class-prefix}is-#{$name} {
            @include cv.register-vars(
              (
                "radio-active-background-color": #{cv.getVar($name)},
                "radio-shadow": 0 0 0.5em #{cv.getRgbaVar($name, 0.8)}
              )
            )
          }
        }
    }
}

.b-radio {

    line-height: cv.getVar('control-line-height');

    &.radio {
        @include mixins.unselectable;
        outline: none;
        display: inline-flex;
        align-items: center;
        &:not(.button) {
            margin-inline-end: 0.5em;
            & + .radio:last-child {
                margin-inline-end: 0;
            }
        }
        // reset Bulma
        & + .radio {
            margin-inline-start: 0;
        }
        input[type=radio] {
            position: absolute;
            inset-inline-start: 0;
            opacity: 0;
            outline: none;
            z-index: -1;
            + .check {
                display: flex;
                flex-shrink: 0;
                position: relative;
                cursor: pointer;
                width: cv.getVar('radio-size');
                height: cv.getVar('radio-size');
                transition: background cv.getVar('speed-slow')  cv.getVar('easing');
                border-radius: 50%;
                border: 2px solid cv.getVar('radio-border-color');
                &:before {
                    content: "";
                    display: flex;
                    position: absolute;
                    inset-inline-start: 50%;
                    margin-inline-start: calc(#{cv.getVar('radio-size')} * -0.5);
                    inset-block-end: 50%;
                    margin-block-end: calc(#{ cv.getVar('radio-size')} * -0.5);
                    width:  cv.getVar('radio-size');
                    height:  cv.getVar('radio-size');
                    transition: transform  cv.getVar('speed-slow')  cv.getVar('easing');
                    border-radius: 50%;
                    transform: scale(0);
                    background-color:  cv.getVar('radio-active-background-color');
                }
            }
            &:checked + .check {
                border-color:  cv.getVar('radio-active-background-color');
                &:before {
                    transform: scale(.5);
                }
            }
            &:focus {
                + .check {
                    box-shadow: cv.getVar('radio-shadow');
                }
                &:checked + .check {
                    box-shadow: cv.getVar('radio-shadow');
                }
            }
            &[disabled] + .check {
                cursor: not-allowed;
            }
        }
        .control-label {
            padding-inline-start:  cv.getVar('control-padding-horizontal');
        }
        &.button {
            display: flex;

            &.is-selected {
                z-index: 1;
            }
        }
        &[disabled] {
            opacity: 0.5;
        }
        &:hover {
            input[type=radio]:not(:disabled) + .check {
                border-color:  cv.getVar('radio-active-background-color');
            }
        }
        &.is-small {
            @include controls.control-small;
        }
        &.is-medium{
            @include controls.control-medium;
        }
        &.is-large {
            @include controls.control-large;
        }
    }
}