@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';

a:not(.nav-link):not(.btn) {
    color: $link-color;
    cursor: pointer;
    position: relative;

    
    &::before, &::after {
        content: '';
        position: absolute;
        bottom: -2.5px;
        height: 2px;
        transition: width .3s ease-out;
    }
    
    &::before {
        left: 0;
        width: 100%;

        @include themify {
            background: themed('linkUnderlineInactive')
        }
    }
    
    &::after {
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        background: $link-underline-active-color;
    }

    &:hover {
        &::after {
            width: 100%;
        }
    }
}