@use "../../core";
@use "../../core/size";
@use "../../core/mixins/focus" as *;
@use "../../core/utils/functions" as *;
@use "variables" as *;

$radio_button_label_offset: 0.1rem;

.radio-button {
    display: flex;
    min-height: var(--f-height-medium);
    margin-bottom: core.densify(size.$margin-100);
    margin-right: size.$margin-150;

    &:last-child {
        margin-bottom: 0;
        margin-right: 0;
    }

    &__input {
        appearance: none;
        outline: none;
        border: none;
    }

    &__label {
        min-width: 4.5rem; // set to avoid being too small when limited or no text is used
        cursor: pointer;
        display: inline-block;
        font-size: var(--f-font-size-standard);
        line-height: var(--f-line-height-small);
        padding-left: size.$padding-175;
        padding-top: $radio_button_label_offset;
        padding-bottom: $radio_button_label_offset;
        position: relative;
        color: $radio-button-color-text-default;

        // Safari: required to make label clickable
        * {
            pointer-events: none;
        }

        &::before,
        &::after {
            border-radius: 50%;
            content: "";
            height: var(--f-icon-size-medium);
            left: 0;
            margin: $radio_button_label_offset 0;
            position: absolute;
            top: 0;
            cursor: pointer;
            width: var(--f-icon-size-medium);
            background-color: $radio-button-color-background-default;
            border: var(--f-border-width-medium) solid $radio-button-color-border-default;
            display: block;
            transition:
                background-color ease var(--f-animation-duration-medium),
                border-color ease var(--f-animation-duration-medium),
                opacity ease var(--f-animation-duration-medium);
        }

        // Inner and outer ring of the custom radio input
        &::after {
            background-color: $radio-button-color-background-selected;
            box-shadow: inset 0 0 0 var(--f-border-width-medium) $radio-button-color-background-default;
            opacity: 0;
            @media (forced-colors: active) {
                forced-color-adjust: none;
                background-color: Highlight;
                box-shadow: inset 0 0 0 var(--f-border-width-medium) Canvas;
            }
        }
    }

    &.disabled {
        color: $radio-button-color-text-disabled;
        @media (forced-colors: active) {
            color: GrayText;
        }

        .radio-button__label {
            color: $radio-button-color-text-disabled;
            cursor: default;

            &::before,
            &::after {
                background: $radio-button-color-background-disabled;
                border: var(--f-border-width-medium) solid $radio-button-color-border-disabled;
                cursor: default;
                @media (forced-colors: active) {
                    border: var(--f-border-width-medium) solid GrayText;
                }
            }
        }
    }

    // Hide inner and outer ring by default
    input[type="radio"] + label::after {
        opacity: 0;
    }

    // Show inner and outer ring and change color on outer ring when checked
    input[type="radio"]:checked + label::after {
        border: var(--f-border-width-medium) solid $radio-button-color-border-selected;
        opacity: 1;
    }

    input[type="radio"]:focus-visible + label {
        @include focus-indicator;
    }
}