// 1. We need to set the background-color of the non-disabled Radio input to initial color when it is hovered
//    or active, because we need it contrasting with the background color.

@use 'sass:map';
@use '../../theme/form-fields' as form-fields-theme;
@use '../../tools/form-fields' as form-fields-tools;
@use 'theme';

$_field-name: 'Radio';

.Radio {
    @include form-fields-tools.inline-field-root();
}

.Radio__input {
    @include form-fields-tools.inline-field-input();

    display: grid;
    width: theme.$input-size;
    height: theme.$input-size;
    margin: theme.$input-margin;
    font: inherit;
    border-radius: theme.$input-border-radius;
    background-color: form-fields-theme.$input-background-color;
    place-content: center;

    &:checked {
        border-color: form-fields-theme.$inline-field-input-border-color-checked;
    }

    &::before {
        content: '';
        width: theme.$input-inner-dot-size;
        height: theme.$input-inner-dot-size;
        border-radius: theme.$input-border-radius;
        background-color: theme.$input-background-color;
        transform: scale(0);
        transition-property: transform;
        transition-duration: theme.$input-transition-duration;
        transition-timing-function: theme.$input-transition-timing;
    }

    &:checked::before {
        transform: scale(1);
    }
}

.Radio__helperText {
    @include form-fields-tools.helper-text();

    margin-left: form-fields-theme.$inline-field-gap;
}

@include form-fields-tools.input-field-validation-states($_field-name);

.Radio__label {
    @include form-fields-tools.inline-field-label();

    margin-left: form-fields-theme.$inline-field-gap;
}

.Radio__label--hidden {
    @include form-fields-tools.label-hidden();
}

.Radio__label--required::after {
    @include form-fields-tools.label-required();
}

.Radio--item {
    @include form-fields-tools.item();
}

.Radio--item:is(.Radio--disabled, .Radio.is-disabled),
.Radio--item:has(.Radio__input:disabled) {
    @include form-fields-tools.item-disabled();
}

.Radio--item .Radio__label {
    @include form-fields-tools.item-label();
}

.Radio--item .Radio__helperText {
    @include form-fields-tools.item-helper-text();
}

:is(.Radio--disabled, .Radio.is-disabled),
.Radio:has(.Radio__input:disabled) {
    @include form-fields-tools.inline-field-root-disabled();
}

:is(.Radio--disabled, .Radio.is-disabled) .Radio__label,
.Radio:has(.Radio__input:disabled) .Radio__label {
    @include form-fields-tools.label-disabled();
}

:is(.Radio--disabled, .Radio.is-disabled) .Radio__helperText,
.Radio:has(.Radio__input:disabled) .Radio__helperText {
    @include form-fields-tools.helper-text-disabled();
}

:is(.Radio--disabled, .Radio.is-disabled) > .Radio__input,
.Radio > .Radio__input:disabled {
    @include form-fields-tools.input-disabled();

    border-color: form-fields-theme.$input-border-color-state-disabled;
    background-color: form-fields-theme.$input-background-color-state-disabled;

    &:checked {
        border-color: form-fields-theme.$input-border-color-state-disabled;
    }

    &::before {
        background-color: theme.$input-background-color-state-disabled;
    }
}

// stylelint-disable-next-line selector-max-specificity -- 1.
.Radio--item:not(.Radio--disabled, .Radio.is-disabled) .Radio__input:is(:hover, :active):not(:checked, :disabled) {
    background-color: form-fields-theme.$input-background-color;
}
