@charset "UTF-8";
@use "sass:string";
@use "../../jkl";
@use "../icon/base-styles" as icon;

@layer jokul.components {
    .jkl-radio-button {
        display: flex;
        position: relative;

        --text-color: var(--jkl-color-text-default);
        --icon-color: var(--jkl-color-background-contrast);

        @include jkl.text-style("text-medium");
        @include jkl.reset-outline;

        &__input {
            // Keep the real input on top of the icon so automation tools can target it.
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 0;
            block-size: 1lh;
            inline-size: 1lh;
            margin: 0;
            padding: 0;
            cursor: pointer;
            z-index: 1;
            appearance: none;
            background: transparent;
            border: 0;

            @include jkl.reset-outline;
        }

        &__label {
            cursor: pointer;
            display: flex;
            color: var(--text-color);

            @include jkl.motion;
            transition-property: color;

            &::before {
                color: var(--icon-color);
                content: "radio_button_unchecked" / "";
                margin-inline-end: 0.25em;

                @include icon.base-styles;
            }
        }

        &__input:focus-visible + &__label::before {
            border-radius: var(--jkl-border-radius-full);

            @include jkl.focus-outline;
        }

        &__input:is(:hover, :active) + &__label,
        &__label:hover,
        &__label:active {
            --jkl-icon-weight: #{jkl.$font-weight-bold};
        }

        &__input:checked + &__label::before {
            content: "radio_button_checked" / "";
        }

        &__input[aria-invalid="true"] + &__label::before {
            color: var(--jkl-color-error-background-contrast);
        }

        & + &,
        /* Ta høyde for at det rendres support label etter radio button inntil videre */
        .jkl-dormant-form-support-label + &,
        .jkl-form-support-label + & {
            margin-top: 0.75lh;
        }

        &--inline {
            display: inline-flex;
            margin-right: var(--jkl-unit-30);
        }

        &--inline + &--inline,
        /* Ta høyde for at det rendres support label etter radio button inntil videre */
        .jkl-dormant-form-support-label + &--inline,
        .jkl-form-support-label + &--inline {
            margin-top: 0;
        }

        + .jkl-form-support-label {
            margin-left: 1.75em;
            margin-top: 0.25lh;
            margin-bottom: jkl.$unit-10;
        }
    }
}