@use '../core/styles/common/tokens' as *;

@use './link-tokens';

@mixin kbq-link-geometry() {
    display: inline;

    text-decoration: none;
    cursor: pointer;

    outline-offset: var(--kbq-link-size-state-focused-outline-offset);

    &:focus {
        outline: none;
    }

    &.kbq-text-only,
    & .kbq-link__text {
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-thickness: var(--kbq-link-underline-width);
        text-decoration-color: transparent;
        text-underline-offset: calc(var(--kbq-link-size-multiline-hit-area-gap) + var(--kbq-link-underline-width));
    }

    &.kbq-link_multiline {
        padding-top: var(--kbq-link-size-multiline-hit-area-gap);
        padding-bottom: var(--kbq-link-size-multiline-hit-area-gap);
        box-decoration-break: clone;
    }

    &.kbq-text-with-icon {
        .kbq-icon {
            vertical-align: baseline;

            &:has(> svg) {
                vertical-align: middle;
                line-height: 0;
            }
        }
    }

    &.kbq-text-with-icon .kbq-link__text {
        &:not(:first-child) {
            margin-left: var(--kbq-link-size-normal-content-padding);
        }

        &:not(:last-child) {
            margin-right: var(--kbq-link-size-normal-content-padding);
        }
    }

    &.kbq-link_compact {
        &.kbq-text-with-icon {
            .kbq-icon.kbq-icon_left {
                vertical-align: text-top;
            }

            .kbq-icon.kbq-icon_right {
                vertical-align: middle;
            }

            .kbq-link__text {
                &:not(:first-child) {
                    margin-left: var(--kbq-link-size-compact-content-padding);
                }

                &:not(:last-child) {
                    margin-right: var(--kbq-link-size-compact-content-padding);
                }
            }
        }
    }

    &.kbq-link_big {
        &.kbq-text-with-icon .kbq-link__text {
            &:not(:first-child) {
                margin-left: var(--kbq-link-size-big-content-padding);
            }

            &:not(:last-child) {
                margin-right: var(--kbq-link-size-big-content-padding);
            }
        }
    }

    &.kbq-text-with-icon.kbq-link_external {
        .kbq-link__text:not(:last-child) {
            margin-right: 1px;
        }

        &.kbq-link_compact {
            .kbq-link__text:not(:last-child) {
                margin-right: 0;
            }

            .kbq-icon {
                margin-bottom: 1px;
            }
        }

        &.kbq-link_big {
            .kbq-link__text:not(:last-child) {
                margin-right: 2px;
            }
        }
    }
}

@mixin kbq-link-state($state-name: null) {
    $base-path: link;

    @if $state-name {
        $base-path: link-#{$state-name};
    }

    color: var(--kbq-#{$base-path}-text);

    &:not(.kbq-link_pseudo, .kbq-link_no-underline) {
        &.kbq-text-only:not(.kbq-text-with-dot),
        & .kbq-link__text {
            text-decoration-color: var(--kbq-#{$base-path}-border-bottom);
        }
    }

    & .kbq-icon.kbq-empty {
        color: var(--kbq-#{$base-path}-text) !important;
    }
}

@mixin kbq-link-theme() {
    .kbq-link {
        @include kbq-link-geometry();

        @include kbq-link-state();

        transition: color ease-out 300ms;

        &.kbq-hovered,
        &:hover {
            transition: color 0ms;

            @include kbq-link-state(state-hover);

            &.kbq-link_pseudo {
                &.kbq-text-only:not(.kbq-text-with-dot),
                & .kbq-link__text {
                    text-decoration-color: var(--kbq-link-state-hover-border-bottom);
                }
            }
        }

        &:active,
        &.kbq-active {
            @include kbq-link-state(state-active);

            &.kbq-link_pseudo {
                &.kbq-text-only:not(.kbq-text-with-dot),
                & .kbq-link__text {
                    text-decoration-color: var(--kbq-link-state-active-border-bottom);
                }
            }
        }

        &.kbq-link_use-visited.kbq-visited:not(.kbq-disabled),
        &.kbq-link_use-visited:not(.kbq-disabled):visited {
            @include kbq-link-state(state-visited);

            &.kbq-hovered,
            &:hover {
                @include kbq-link-state(state-visited-hover);
            }

            &:active,
            &.kbq-active {
                @include kbq-link-state(state-visited-active);
            }
        }

        &.cdk-keyboard-focused {
            outline-style: solid;
            outline-width: var(--kbq-link-size-state-focused-outline-width);
            outline-color: var(--kbq-link-state-focused-outline);
        }

        &.kbq-disabled {
            cursor: default;
            pointer-events: none;

            @include kbq-link-state(state-disabled);
        }

        @media print {
            .kbq-link_print:not(.kbq-disabled) {
                &.kbq-text-only,
                &.kbq-text-with-icon .kbq-link__text,
                &.kbq-text-with-dot .kbq-link__text {
                    text-decoration: none;
                }

                &::after {
                    content: ':\a' attr(print);
                    white-space: pre;
                }
            }
        }
    }
}

@mixin kbq-link-typography() {
    .kbq-link {
        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
    }

    .kbq-link.kbq-link_compact {
        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
    }

    .kbq-link.kbq-link_big {
        @include kbq-typography-level-to-styles-css-variables(typography, text-big);
    }
}