.mu-link {
    transition: color $m-transition-duration ease;
    position: relative;
    display: inline-flex;
    align-items: center;
    font-weight: $m-font-weight-semi-bold;
    color: $m-color-interactive;
    text-decoration: none;
    outline-color: $m-color-interactive;

    &:hover,
    &:focus {
        .mu-link-text {
            @extend %mu-link-text--hover-focus;
        }
    }

    &:hover {
        color: $m-color-interactive-light;
    }

    &:active,
    &:focus:not(:hover) {
        color: $m-color-interactive-dark;
    }

    &:not(.mu-link-unvisited):not(:hover):not(:focus):visited {
        color: $m-color-interactive-darker;
    }
}

.mu-link-text {
    position: relative;
    vertical-align: middle;
}

%mu-link-text--hover-focus {
    text-decoration: underline;
}

.mu-link-icon-left,
.mu-link-icon-right {
    display: inline-flex;
    flex-shrink: 0;
    vertical-align: middle;
    stroke-width: 2px;
    width: 0.8em;
}

.mu-link-icon-left {
    margin-right: $m-space-xs;
}

.mu-link-icon-right {
    margin-left: $m-space-xs;
}