// 1. Use an `::after` pseudo-element to create a decorative border.

@use 'theme';

%link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: var(--header-link-padding-y, #{theme.$header-link-padding-y})
        var(--header-link-padding-x, #{theme.$header-link-padding-x});
    color: theme.$header-link-color;
    background-color: theme.$header-link-background-color;
    transition-property: color, background-color;
    transition-duration: theme.$header-link-transition-duration;

    // 1.
    &::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        width: var(--header-link-decoration-width, 100%);
        height: var(--header-link-decoration-height, 100%);
        background-color: theme.$header-link-current-border-color;
        transform: scale(var(--header-link-decoration-scale-x, 0), var(--header-link-decoration-scale-y, 0));
        transform-origin: var(--header-link-decoration-transform-origin, center);
    }

    &:hover {
        text-decoration: none;
        color: theme.$header-link-color-state-hover;
        background-color: theme.$header-link-background-color-state-hover;
    }

    &:active {
        text-decoration: none;
        color: theme.$header-link-color-state-active;
        background-color: theme.$header-link-background-color-state-active;
    }

    @media (prefers-reduced-motion: no-preference) {
        // 1.
        &::after {
            transition: transform theme.$header-link-transition-timing theme.$header-link-transition-duration;
        }
    }
}

%link-current {
    color: theme.$header-link-color-current;
    background-color: theme.$header-link-background-color-current;

    &:hover,
    &:active {
        color: theme.$header-link-color-current;
        background-color: theme.$header-link-background-color-current;
    }
}
