@import "../var.scss";

$j-prefix-radio: "#{$j-prefix}-radio" !default;
$j-prefix-radio-input: "#{$j-prefix}-radio-input" !default;
$j-prefix-radio-icon: "#{$j-prefix}-radio-icon" !default;
$j-prefix-radio-wrapper: "#{$j-prefix}-radio-wrapper" !default;
$j-prefix-radio-label: "#{$j-prefix}-radio-label" !default;

.#{$j-prefix-radio} {
    display: flex;
    position: relative;

    &:not([disabled]):hover {
        .#{$j-prefix-radio-icon} {
            border-color: $j-blue;
        }
    }

    > *:not(:last-child) {
        margin-right: 6px;
    }

    .#{$j-prefix-radio-input} {
        display: block;
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        cursor: pointer;
    }

    .#{$j-prefix-radio-wrapper} {
        display: flex;
        user-select: none;

        > *:not(:last-child) {
            margin-right: 6px;
        }
    }

    .#{$j-prefix-radio-icon} {
        display: inline-block;
        border: 1.5px solid $j-blue;
        width: 18px;
        height: 18px;
        border-radius: 3px;
        vertical-align: middle;
        position: relative;
        flex-shrink: 0;
        top: 2px;
        background: #fff;
        transition: all 0.1s ease-in-out;
        border-radius: 50%;
    }

    .#{$j-prefix-radio-label} {
        // margin-left: 6px;
        display: inline-block;
    }

    .#{$j-prefix-radio-input}:checked
        + .#{$j-prefix-radio-wrapper}
        .#{$j-prefix-radio-icon} {
        border-width: 6px;
        border-color: $j-blue-dark;
    }

    .#{$j-prefix-radio-input}:disabled
        + .#{$j-prefix-radio-wrapper}
        .#{$j-prefix-radio-icon},
    .#{$j-prefix-radio-input}:disabled
        + .#{$j-prefix-radio-wrapper}
        .#{$j-prefix-radio-label} {
        opacity: 0.4;
    }
}