@require "variables"

// Skin-specific styles go here. Demo-specific styles go in demo/style.styl.

get_radio_bg_gradient(color) {
    return radial-gradient(circle at center, color 0%, color calc(100% - 5px), transparent calc(100% - 5px), transparent 100%)
}

.b-radio-wrapper {
    display: flex;
}

.b-radio,
.b-radio-label {
    cursor: pointer;
}

.b-radio {
    appearance: none;
    background: get_radio_bg_gradient(Radio-backgroundColor);
    border: 1px solid Radio-borderColor;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 1px 3px 0;
    padding: 0;
    height: 16px;
    width: 16px;

    transition: all 200ms ease;

    &[disabled],
    &[disabled]:active,
    &[disabled]:focus,
    &[disabled]:hover {
        background: get_radio_bg_gradient(Radio-backgroundColor-disabled);
        border-color: Radio-borderColor-disabled;
        cursor: not-allowed;
        opacity: Radio-opacity-disabled;
    }

    &:active {
        background: get_radio_bg_gradient(Radio-backgroundColor-active);
        border-color: Radio-borderColor-active;
    }

    &:focus {
        background: get_radio_bg_gradient(Radio-backgroundColor-focus);
        border-color: Radio-borderColor-focus;
    }

    &:hover {
        background: get_radio_bg_gradient(Radio-backgroundColor-hover);
        border-color: Radio-borderColor-hover;
    }

    &.b-radio-selected,
    &.b-radio-selected:hover,
    &.b-radio-selected:focus,
    &.b-radio-selected:active {
        background: get_radio_bg_gradient(Radio-backgroundColor-active);
        border-color: Radio-borderColor-active;
    }
}

.b-radio-label {
    line-height: 1.2;
    margin-left: 0.25em;
}