@use '../../variables' as *;

$b: '.link';

@mixin transform($property: color) {
    transition-duration: var(--duration-micro-s);
    transition-property: $property;
    transition-timing-function: var(--easing-standard);
}

@mixin link($color: $link-color, $active-color: $link-active-color) {
    cursor: default;
    text-decoration: none;

    @include transform;

    &:any-link,
    &:enabled,
    &[tabindex] {
        color: $color;
        cursor: pointer;

        &:hover,
        &:focus-visible {
            color: $active-color;
        }
    }
}

#{$b} {
    @include link;

    &_solid:any-link,
    &_solid:enabled,
    &_solid[tabindex] {
        &:not(#{$b}_partial),
        & #{$b}__text {
            @include ul-solid($link-color);
        }

        &:hover,
        &:focus-visible {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-solid($link-active-color);
            }
        }
    }

    &_dashed:any-link,
    &_dashed:enabled,
    &_dashed[tabindex] {
        &:not(#{$b}_partial),
        & #{$b}__text {
            @include ul-dashed($link-color);
        }

        &:hover,
        &:focus-visible {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dashed($link-active-color);
            }
        }
    }

    &_dotted:any-link,
    &_dotted:enabled,
    &_dotted[tabindex] {
        &:not(#{$b}_partial),
        & #{$b}__text {
            @include ul-dotted($link-color);
        }

        &:hover,
        &:focus-visible {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dotted($link-active-color);
            }
        }
    }

    &_alt {
        &:any-link,
        &:enabled,
        &[tabindex] {
            color: $link-alt-color;

            &:hover,
            &:focus-visible {
                color: $link-alt-active-color;
            }
        }

        &#{$b}_solid:any-link,
        &#{$b}_solid:enabled,
        &#{$b}_solid[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-solid($link-alt-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-solid($link-alt-active-color);
                }
            }
        }

        &#{$b}_dashed:any-link,
        &#{$b}_dashed:enabled,
        &#{$b}_dashed[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dashed($link-alt-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-dashed($link-alt-active-color);
                }
            }
        }

        &#{$b}_dotted:any-link,
        &#{$b}_dotted:enabled,
        &#{$b}_dotted[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dotted($link-alt-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-dotted($link-alt-active-color);
                }
            }
        }
    }

    &_grey {
        &:any-link,
        &:enabled,
        &[tabindex] {
            color: $link-grey-color;

            &:hover,
            &:focus-visible {
                color: $link-grey-active-color;
            }
        }

        &#{$b}_solid:any-link,
        &#{$b}_solid:enabled,
        &#{$b}_solid[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-solid($link-grey-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-solid($link-grey-active-color);
                }
            }
        }

        &#{$b}_dashed:any-link,
        &#{$b}_dashed:enabled,
        &#{$b}_dashed[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dashed($link-grey-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-dashed($link-grey-active-color);
                }
            }
        }

        &#{$b}_dotted:any-link,
        &#{$b}_dotted:enabled,
        &#{$b}_dotted[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dotted($link-grey-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-dotted($link-grey-active-color);
                }
            }
        }
    }

    &_inverted {
        &:any-link,
        &:enabled,
        &[tabindex] {
            color: $link-inverted-color;

            &:hover,
            &:focus-visible {
                color: $link-inverted-active-color;
            }
        }

        &#{$b}_solid:any-link,
        &#{$b}_solid:enabled,
        &#{$b}_solid[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-solid($link-inverted-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-solid($link-inverted-active-color);
                }
            }
        }

        &#{$b}_dashed:any-link,
        &#{$b}_dashed:enabled,
        &#{$b}_dashed[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dashed($link-inverted-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-dashed($link-inverted-active-color);
                }
            }
        }

        &#{$b}_dotted:any-link,
        &#{$b}_dotted:enabled,
        &#{$b}_dotted[tabindex] {
            &:not(#{$b}_partial),
            & #{$b}__text {
                @include ul-dotted($link-inverted-color);
            }

            &:hover,
            &:focus-visible {
                &:not(#{$b}_partial),
                & #{$b}__text {
                    @include ul-dotted($link-inverted-active-color);
                }
            }
        }
    }

    &__text {
    }

    &__icon {
        fill: currentcolor;
    }
}