@property --link-underline-color {
    syntax: '<color>';
    inherits: false;
    initial-value: transparent;
}

@layer components {

    [data-link-effect] a:not(.dropdown__item):not(.toc__link),
    a[data-link-effect] {
        text-decoration: none;
        color: var(--link-effect-color, currentColor);
        background-image: linear-gradient(var(--link-underline-color), var(--link-underline-color));
        background-repeat: no-repeat;
        background-position: left calc(100% + var(--link-effect-distance, 0px));
        background-size: 0% var(--link-effect-thickness, 2px);
        padding-block: var(--link-effect-offset, 2px);
        transition:
            background-size var(--link-effect-scale-speed, 250ms) var(--link-effect-easing, ease-out) var(--link-effect-scale-delay, 0ms),
            --link-underline-color var(--link-effect-fade-speed, 200ms) var(--link-effect-easing, ease-out) var(--link-effect-fade-delay, 0ms),
            background-position var(--link-effect-slide-speed, 200ms) var(--link-effect-easing, ease-out) var(--link-effect-scale-delay, 0ms),
            color var(--transition-speed);
    }

    /* All presets: hover reveals underline */
    [data-link-effect] a:not(.dropdown__item):not(.toc__link):hover,
    a[data-link-effect]:hover {
        --link-underline-color: currentColor;
        color: var(--link-effect-hover-color, var(--link-effect-color, currentColor));
        background-size: 100% var(--link-effect-thickness, 2px);
        background-position-y: 100%;
    }

    /* Direction presets — only change background-position-x */
    [data-link-effect="slide-left"] a,
    a[data-link-effect="slide-left"] {
        background-position-x: right;
    }

    [data-link-effect="center-out"] a,
    a[data-link-effect="center-out"] {
        background-position-x: center;
    }

    /* fade — full width already, only color transitions */
    [data-link-effect="fade"] a,
    a[data-link-effect="fade"] {
        background-size: 100% var(--link-effect-thickness, 2px);
    }

    [data-link-effect="fade"] a:hover,
    a[data-link-effect="fade"]:hover {
        background-size: 100% var(--link-effect-thickness, 2px);
    }

    /* grow — always visible, height changes */
    [data-link-effect="grow"] a,
    a[data-link-effect="grow"] {
        --link-underline-color: currentColor;
        background-size: 100% 1px;
        background-position: left 100%;
    }

    [data-link-effect="grow"] a:hover,
    a[data-link-effect="grow"]:hover {
        background-size: 100% var(--link-effect-thickness, 3px);
    }

    /* fill-right — background sweep */
    [data-link-effect="fill-right"] a,
    a[data-link-effect="fill-right"] {
        background-image: linear-gradient(
            var(--link-effect-fill-color, var(--color-primary)),
            var(--link-effect-fill-color, var(--color-primary))
        );
        background-size: 0% 100%;
        background-position: left center;
        padding-inline: 0.2em;
        border-radius: var(--link-effect-fill-radius, var(--radius-sm));
    }

    [data-link-effect="fill-right"] a:hover,
    a[data-link-effect="fill-right"]:hover {
        background-size: 100% 100%;
        background-position: left center;
        color: var(--link-effect-fill-text, inherit);
    }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
        [data-link-effect] a,
        a[data-link-effect] {
            transition: none;
        }
    }
}