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

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

        &[href] {
            text-decoration: none;
    
            &:hover, &:focus {
                text-decoration: underline;
            }
        }
    }
    &_icon {
        flex-shrink: 0;
        height: 1em;
        fill: inherit;

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

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