&__link {
    background-color: $component-primary-nav-link-background-color;
    color: $component-primary-nav-link-color;
    display: block;
    padding: $space-inset;
    text-decoration: none;

    &:focus {
        background-color: $component-primary-nav-link-background-color-focus;
        color: $component-primary-nav-link-color-focus;
        outline: none;
        text-decoration: none;
    }

    &:visited {
        color: $component-primary-nav-link-color-visited;
    }

    &:hover {
        background-color: $component-primary-nav-link-background-color-hover;
        color: $component-primary-nav-link-color-hover;
        text-decoration: none;
    }

    &:active {
        background-color: $component-primary-nav-link-background-color-active;
        color: $component-primary-nav-link-color-active;
    }

    @media screen and (min-width: breakpoint(medium)) {
        @include set-text-style($text-style-heading-4);

        padding: $space-inset-squish-l;
    }
}

&__link--active {
    background-color: $component-primary-nav-link-background-color-active;
    color: $component-primary-nav-link-color-active;
}