@use "../../core/jkl";
@use "../icon/base-styles" as icon;

@layer jokul.components {
    .jkl-link {
        --link-color: var(--jkl-color-text-default);

        color: inherit;
        outline: none;
        text-decoration: none;

        @include jkl.motion("standard", "energetic");
        transition-property: color;

        &__content {
            text-decoration: underline;
            text-underline-offset: 0.08lh;
            text-decoration-thickness: 0.05em;
            text-decoration-color: rgb(from currentColor r g b / 70%);
        }

        &__icon {
            margin-inline-start: 0.2em;
            margin-block-start: -0.1em;
            vertical-align: middle;
        }

        &--external::after,
        &[target="_blank"]::after,
        &[download]::after {
            --jkl-icon-fill: 0;
            --jkl-icon-size: 1em;
            --jkl-icon-opsz: 20;

            content: "\feff\e89e" / "(Åpnes i ny fane)";
            margin-block-start: -0.1em;
            padding-inline-start: 0.2em;
            vertical-align: middle;

            @include icon.base-styles;

            // Trengs for at non breaking space skal ha effekt
            display: inline;
        }

        &[download]::after {
            content: "\feff\f090" / "(Last ned fil)";
        }

        &:hover:not(:focus) {
            --link-color: var(--jkl-color-text-subdued);
        }

        &:focus-visible {
            @include jkl.focus-outline($offset: 0);
        }

        @include jkl.forced-colors-mode {
            &:hover:not(:focus) {
                --link-color: HighLight;
            }
        }
    }
}