$ar-radio-bg-active-color: $color-gray-dark !default;
$ar-radio-border-color: $color-blue !default;
$ar-radio-size: 18px !default;
$ar-radio-dot-size: 10px !default;

@mixin radio-dot($radio-color) {
    border-radius: 100%;
    background-color: $radio-color;
    width: $ar-radio-dot-size;
    height: $ar-radio-dot-size;
}

label.ar-radio {
    position: relative;
    display: flex;
    min-width: $ar-radio-size;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    user-select: none;

    * {
        pointer-events: none;
    }

    input {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    > span:last-child {
        position: relative;
        width: $ar-radio-size;
        height: $ar-radio-size;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid $ar-radio-border-color;
        border-radius: 100%;
        padding: 0;

        > span {
            position: relative;
            opacity: 0;
            margin: 0;
            @include radio-dot($ar-radio-bg-active-color);
        }
    }

    > span:first-child {
        flex-grow: 1;
    }

    &.ar-radio-label-left {
        > span:first-child {
            margin-right: 10px;
            text-align: left;
        }
    }

    &.ar-radio-label-right {
        flex-direction: row-reverse;

        > span:first-child {
            margin-left: 10px;
            text-align: right;
        }
    }

    input:focus + span:last-child {
        box-shadow: 0 0 1px 2px rgba($ar-radio-bg-active-color, 0.25);
    }

    input:checked + span:last-child {
        > span {
            opacity: 1;
            @include radio-dot($ar-radio-bg-active-color);
        }
    }

    @each $clr-name, $clr-codes in $buttons {
        &-#{$clr-name} {

            input:focus + span:last-child {
                box-shadow: 0 0 1px 2px rgba(nth($clr-codes, 1), 0.25);
            }

            input + span:last-child {
                border-color: nth($clr-codes, 1);

                > span {
                    opacity: 0;
                }
            }

            input:checked + span:last-child {
                > span {
                    opacity: 1;
                }
            }
        }
    }

    &:hover {
        input:focus + span:last-child {
            box-shadow: none;
        }
    }
}