@layer marielco-links {
    :where(.marielco-link, .marielco-button__label) {
        position: relative;
        display: inline-block;
    }

    :where(.marielco-link, .marielco-button__label)::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        inset-block-end: calc(-1 * var(--marielco-underline-offset));
        block-size: var(--marielco-border-width);
        background: currentColor;
        transform: scaleX(var(--marielco-underline-scale));
        transform-origin: left center;
        opacity: var(--marielco-underline-opacity);
        transition: transform var(--marielco-transition-standard) ease, opacity var(--marielco-transition-standard) ease;
        pointer-events: none;
    }

    .marielco-button__label {
        --marielco-underline-scale: 0;
        --marielco-underline-opacity: 1;
    }

    .marielco-link {
        --marielco-underline-scale: 1;
        --marielco-underline-opacity: 0.65;
        color: inherit;
        text-decoration: none;
    }

    .marielco-button:where(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) .marielco-button__label {
        --marielco-underline-scale: 1;
    }

    .marielco-link:where(:hover, :focus-visible) {
        --marielco-underline-opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        :where(.marielco-link, .marielco-button__label)::after {
            transition: none;
        }
    }

    @media (forced-colors: active) {
        :where(.marielco-link, .marielco-button__label)::after {
            background: CanvasText;
        }
    }
}