@import '../../common/styles/_abstract-links';

.controlled-link(@normal-color, @active-color: @link-color-active, @loading-color: @link-color-active) {
    color: @normal-color;

    &:visited {
        color: @normal-color;
    }

    &:visited.bloko-link_disable-visited,
    &:visited:hover.bloko-link_disable-visited,
    &:visited:focus.bloko-link_disable-visited,
    &:visited:active.bloko-link_disable-visited {
        color: @normal-color;
    }

    &.bloko-link_underlined {
        text-decoration-color: fade(@normal-color, 30%);
    }

    &:hover.bloko-link_underlined,
    &:focus.bloko-link_underlined,
    &:active.bloko-link_underlined {
        text-decoration-color: @normal-color;
    }

    &:hover,
    &:focus,
    &:active,
    &:visited:hover,
    &:visited:focus,
    &:visited:active {
        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
        color: hsl(floor(hue(@normal-color)), floor(saturation(@normal-color)), floor(lightness(@normal-color) - 20));
    }
}

._bloko-link-visited() {
    &:visited {
        color: @link-color-visited;
    }

    &:visited:hover,
    &:visited:focus,
    &:visited:active {
        /* stylelint-disable-next-line declaration-property-value-disallowed-list */
        color: hsl(
            floor(hue(@link-color-visited)),
            floor(saturation(@link-color-visited)),
            floor(lightness(@link-color-visited) - 20)
        );
    }
}

.bloko-link {
    .abstract-link();
    .abstract-link-focus-visible();
    .controlled-link(@link-color);
    ._bloko-link-visited();

    text-align: left;
    transition: color 0.1s, opacity 0.1s;
}

._bloko-link-underlined() {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.bloko-link_underlined {
    ._bloko-link-underlined();

    .bloko-link__content {
        ._bloko-link-underlined();
    }
}

._bloko-link-pseudo() {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-style: dashed;
}

.bloko-link_pseudo {
    ._bloko-link-pseudo();

    .bloko-link__content {
        ._bloko-link-pseudo();
    }
}

.bloko-link_kind-success {
    .controlled-link(@color-green-50);
}

.bloko-link_kind-inversed-secondary {
    .controlled-link(@color-gray-30);
}

.bloko-link_kind-secondary {
    .controlled-link(@color-gray-50);
}

.bloko-link_kind-tertiary {
    .controlled-link(@color-gray-80);
}

.bloko-link_kind-warning {
    .controlled-link(@color-red-50);
}

.bloko-link_kind-inversed {
    .controlled-link(@color-white);
}

.bloko-link_loading,
.bloko-link_loading:hover,
.bloko-link_loading:focus,
.bloko-link_loading:active,
.bloko-link_loading:visited,
.bloko-link_loading:visited:hover,
.bloko-link_loading.bloko-link_with-icon .bloko-link__content {
    color: @link-color-active;
    cursor: default;
    animation: opacity-animation 0.4s infinite;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-style: dashed;
}

._icon-in-link() {
    .bloko-icon {
        vertical-align: text-bottom;
    }
}

.bloko-link_with-icon {
    text-decoration: none;

    ._icon-in-link();
}

:global(.bloko-link_with-icon) {
    ._icon-in-link();
}

@keyframes opacity-animation {
    0% {
        opacity: 0.7;
    }

    16% {
        opacity: 0.8;
    }

    32% {
        opacity: 0.9;
    }

    50% {
        opacity: 1;
    }

    66% {
        opacity: 0.9;
    }

    82% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.7;
    }
}