@import '../../../styles/mixins';

.link {
    $icon-spacing: 10px;
    
    &_anchor {
        @include link-themes;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: inherit;
        text-decoration: none;

        &:hover, &:focus {
            text-decoration: underline;
        }

        &:not([href]) {
            &:hover, &:focus {
                text-decoration: none;
            }
        }
    }
    &_icon {
        fill: inherit;
        height: 1em;
        display: flex;

        &Wrapper {
            &--right {
                order: 2;
            }
        }
    }
    &_text {
        &--hidden {
            @extend %sr-only;
        }
    }

    // Spacing
    &_iconWrapper--right + &_text:not(&_text--hidden) {
        margin-right: $icon-spacing;
    }
    &_iconWrapper--left + &_text:not(&_text--hidden) {
        margin-left: $icon-spacing;
    }
}
