@import "../../include/vars";

:root {
    --radio-size: 22px;
    --radio-color: #575757;
    --radio-color-disabled: #c3c3c3;
    --radio-background-disabled: #efefef;
    --radio-focus-color: #e8e8e8;
}

.dark-side {
    --radio-color: #a6a8a7;
    --radio-color-disabled: #505050;
    --radio-background-disabled: #323030;
    --radio-focus-color: #191919;
}

input[type=radio] {
    appearance: none;
    width: var(--radio-size, 22px);
    height: var(--radio-size, 22px);
    line-height: calc(var(--radio-size) * 1.6);
    border-radius: 50%;
    border: 2px solid var(--radio-color);
    position: relative;
    cursor: pointer;
    flex-shrink: 0!important;
    
    &::before {
        content: "";
        display: block;
        opacity: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--radio-color);
        border: 1px solid var(--radio-color);
        margin: 0 auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s;
    }

    &:checked {
        &::before {
            opacity: 1;
        }
    }
    
    &:focus {
        box-shadow: 0 0 0 3px var(--radio-focus-color);
    }
    
    &:disabled {
        border-color: var(--radio-color-disabled);
        background-color: var(--radio-background-disabled);
        &::before {
            background-color: var(--radio-color-disabled);
            border: none;
        }
    }

    &.small {
        --radio-size: 16px;
    }
    &.medium {
        --radio-size: 19px;
    }
    &.large {
        --radio-size: 25px;
    }
    &.largest {
        --radio-size: 34px;
    }
}

.radio {
    display: inline-flex;
    align-items: center;

    input[type=radio] {
        order: 2
    }

    .caption-prepend, .caption-append {
        font-size: 12px;
        margin: 0 8px;
        position: relative;
        white-space: nowrap;
        user-select: none;
    }

    .caption-prepend {
        order: 1;
    }

    .caption-append {
        order: 3;
    }

    & > input[type=radio]:disabled ~ .caption-prepend,
    & > input[type=radio]:disabled ~ .caption-append {
        color: var(--radio-color-disabled);
    }
}

each(@normalColors, {
    input[type=radio].radio-@{value} {
        border-color: @@value;
        &::before {
            background-color: @@value;
            border-color: @@value;
        }
    }
})