@import '../utils.less';

/**
 * @name Link
 * @selector [tuiLink]
 *
 * @description
 * Plain link design, applicable to both links and buttons
 *
 * @example
 * <a tuiLink>Click me</a>
 *
 * @see-also
 * Icons, Appearance, Button
 */
[tuiLink]:where(*&) {
    .transition(~'color, text-decoration, opacity');

    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    border-radius: 0.125rem;
    outline-width: 1px;
    outline-offset: -1px;
    text-underline-offset: 0.2em;
    text-decoration: none dashed currentColor 1px;
    text-decoration-color: color-mix(in lch, currentColor, transparent);

    &::before {
        margin-inline-end: 0.25rem;
    }

    &::after {
        margin-inline-start: 0.25rem;
    }

    &[tuiIcons]:where(:not([data-icon-start='font']))::before,
    &[tuiIcons]:where(:not([data-icon-end='font']))::after {
        content: '\2060';
        padding: calc(var(--tui-icon-size, 1rem) / 2);
        vertical-align: super;
        font-size: 0;
        line-height: 0;
        box-sizing: border-box;
        mask-size: calc(100% + 10 * var(--tui-stroke-width)) 100%;
        transition: none;
    }

    &[data-icon-start='font']::before,
    &[data-icon-end='font']::after {
        display: inline;
        font-size: var(--tui-icon-size, 1rem);
        vertical-align: sub;
    }

    &[tuiChevron]::after {
        display: inline-block;
        vertical-align: initial;
    }

    .appearance-hover({
        text-decoration-color: currentColor;
    });

    .appearance-active({
        text-decoration-color: currentColor;
    });

    &[data-appearance=''] {
        text-decoration-line: underline;
        text-decoration-style: solid;
    }
}