@layer components {
    .link {
        --lineStrokeWidth: 2px;
        --linkColor: var(--primary);
        --lineOpacity: 30%;
        --filledLineGradient: linear-gradient(var(--linkColor), var(--linkColor));
        --unfilledLineGradient: linear-gradient(color-mix(in lab, var(--linkColor) var(--lineOpacity), transparent), color-mix(in lab, var(--linkColor) var(--lineOpacity), transparent));
        cursor: pointer;
        display: inline;
        color: var(--linkColor);
        background: var(--filledLineGradient) no-repeat 100% 100% / 0 var(--lineStrokeWidth), var(--unfilledLineGradient) no-repeat 0 100% / 100% var(--lineStrokeWidth);
        padding-bottom: var(--lineStrokeWidth)
    }

    .link:hover,
    .link:focus {
        background: var(--filledLineGradient) no-repeat 0 100% / 100% var(--lineStrokeWidth), var(--unfilledLineGradient) no-repeat 0 100% / 100% var(--lineStrokeWidth)
    }

    @media (prefers-reduced-motion: no-preference) {
        .link {
            transition-duration: var(--durationM);
            transition-timing-function: var(--bezierFastoutSlowin);
            transition-property: background-size
        }
    }

    .link[data-secondary=true] {
        --linkColor: var(--text)
    }
}