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

@layer jokul.components {
    @include jkl.light-mode-variables {
        --jkl-radio-button-error-color: #ab2e43;
    }

    @include jkl.dark-mode-variables {
        --jkl-radio-button-error-color: #d79ba5;
    }

    .jkl-radio-button {
        display: flex;
        position: relative;

        @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;

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

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

            &::before {
                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.$icon-weight-bold};
        }

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

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

        & + &,
        /* 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;
        }
    }
}