@use "../utilities/mixins";

.kern-link {
    @include mixins.normalize;
    @include mixins.body-default;
    color: var(--kern-color-action-default, #1A3DA5);

    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: var(--kern-1, 1px); /* 5.556% */
    text-underline-offset: var(--kern-metric-space-2x-small, 2px); /* 11.111% */
    text-underline-position: from-font;
    
    display: inline-flex;
    align-items: flex-start;
    gap: var(--kern-metric-space-x-small, 4px);

    .kern-icon {
        background-color: var(--kern-color-action-default, #1A3DA5);
    }

    &:has(.kern-icon) {
        text-decoration: none;  

        &:active,
        &:hover {
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: auto;
            text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */
            text-underline-offset: var(--kern-metric-space-2x-small, 2px); /* 11.111% */
            text-underline-position: from-font;
        }
    }

    &:hover {
        text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */
    }

    &:active {
        color: var(--kern-color-action-default, #1A3DA5);
        text-decoration-thickness: var(--kern-3, 3px); /* 16.667% */

        .kern-icon {
            background-color: var(--kern-color-action-default, #1A3DA5);
        }
    }

    &:visited {
        color: var(--kern-color-action-visited, #75009E);

        .kern-icon {
            background-color: var(--kern-color-action-visited, #75009E);
        }
    }

    &--small {
        gap: var(--kern-metric-space-2x-small, 2px);
        @include mixins.body-small;
        color: var(--kern-color-action-default, #1A3DA5);
        
        .kern-icon {
            width: var(--kern-metric-dimension-small, 20px);
            height: var(--kern-metric-dimension-small, 20px);
            min-width: var(--kern-metric-dimension-small, 20px);
            min-height: var(--kern-metric-dimension-small, 20px);
        }
    }

    &:not(.kern-link--stretched) {
        &:focus-visible {
            position: relative;
            z-index: 1;
            outline-color: transparent;
            border-radius: var(--kern-metric-border-radius-small, 0.125rem);
            box-shadow: var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 2px var(--kern-color-action-on-default), // TODO: Variable mit Design überprüfen
                var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 4px var(--kern-color-action-focus-border-inside),
                var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) var(--kern-metric-space-none, 0px) 6px var(--kern-color-action-focus-border-outside);
            @include mixins.forced-colors-focus;
        }
    }
}

// LinkButton
a {
    &.kern-btn {
        text-decoration: none;
    }
}