@import "../variables/variables";
@import "../mixins/private/icon-mixins";
@import "../mixins/private/token-mixins";

$dimensions-radio: 18px;
$dimensions-radio-large: 24px;

.radio {
    display: inline-flex;
    position: relative;
    vertical-align: text-bottom;
}

.radio__control[type="radio"] {
    height: $dimensions-radio;
    min-width: $dimensions-radio;
    width: $dimensions-radio;
}

.radio--large .radio__control[type="radio"] {
    height: $dimensions-radio-large;
    min-width: $dimensions-radio-large;
    width: $dimensions-radio-large;
}

span.radio__icon {
    display: inline-flex;
    height: $dimensions-radio;
    outline-offset: 1px;
}

.radio--large span.radio__icon {
    height: $dimensions-radio-large;
}

/* progressive enhancement - override hidden SVG */
span.radio__icon[hidden] {
    display: inline-flex;
}

svg.radio__checked {
    @include color-token(radio-checked-color, color-foreground-primary);
}

svg.radio__unchecked {
    @include color-token(radio-unchecked-color, color-foreground-primary);
}

input.radio__control[type="radio"] {
    font-size: 100%;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
}

.radio svg {
    @include icon-base-mixin();

    height: $dimensions-radio;
    width: $dimensions-radio;
}

.radio--large svg {
    height: $dimensions-radio-large;
    width: $dimensions-radio-large;
}

input.radio__control[type="radio"] + span.radio__icon svg.radio__checked {
    display: none;
}

input.radio__control[type="radio"] + span.radio__icon svg.radio__unchecked {
    display: inline-block;
}

input.radio__control[type="radio"]:checked
    + span.radio__icon
    svg.radio__checked {
    display: inline-block;
}

input.radio__control[type="radio"]:checked
    + span.radio__icon
    svg.radio__unchecked {
    display: none;
}

input.radio__control[type="radio"][disabled] + span.radio__icon {
    opacity: 1;

    svg {
        @include fill-token(radio-disabled-color, color-foreground-disabled);
    }
}

/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
input.radio__control[type="radio"]:focus + span.radio__icon {
    outline: 1px auto;
    outline-offset: 2px;
    @include outline-color-token(radio-outline, color-foreground-secondary);
}

input.radio__control[type="radio"]:focus:not(:focus-visible)
    + span.radio__icon {
    outline: none;
}
