a.link {
    transition: all .2s ease;

    background-position-y: -0%;
    background-image: linear-gradient(180deg, transparent 50%, var(--transp-2) 50%) !important;
    background-size: 2px;
    background-size: auto 190%;
    padding: 0;
    font-size: var(--p);

    &:hover {
        background-image: linear-gradient(180deg, transparent 60%, var(--accent-200) 60%) !important;
        background-position-y: 0%;
        color: var(--accent);
        @include transition(all, .2s);
    }
    
    &:focus {
        outline: none;
    }
    
    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
        border-radius: 2px;
    }

    &-primary {
        background-image: linear-gradient(180deg, transparent 50%, var(--primary-500) 50%) !important;
        color: var(--primary);

        &:hover {
            background-image: linear-gradient(180deg, transparent 50%, var(--primary) 50%) !important;
            color: var(--primary);
        }
        
        &:focus-visible {
            outline-color: var(--primary);
        }
    }

    &-accent {
        background-image: linear-gradient(180deg, transparent 50%, var(--accent-500) 50%) !important;
        color: var(--accent);

        &:hover {
            background-image: linear-gradient(180deg, transparent 50%, var(--accent) 50%) !important;
            color: var(--accent);
        }
        
        &:focus-visible {
            outline-color: var(--accent);
        }
    }

    &-secondary {
        background-image: linear-gradient(180deg, transparent 50%, var(--secondary-500) 50%) !important;
        color: var(--secondary);

        &:hover {
            background-image: linear-gradient(180deg, transparent 50%, var(--secondary) 50%) !important;
            color: var(--secondary);
        }
    }

    &-error {
        background-image: linear-gradient(180deg, transparent 50%, var(--error-light) 50%) !important;
        color: var(--error);

        &:hover {
            background-image: linear-gradient(180deg, transparent 50%, var(--error) 50%) !important;
            color: var(--error);
        }
    }

    &-success {
        background-image: linear-gradient(180deg, transparent 50%, var(--success-light) 50%) !important;
        color: var(--success);

        &:hover {
            background-image: linear-gradient(180deg, transparent 50%, var(--success) 50%) !important;
            color: var(--success);
        }
    }

    &-warning {
        background-image: linear-gradient(180deg, transparent 50%, var(--warning-light) 50%) !important;
        color: var(--warning);

        &:hover {
            background-image: linear-gradient(180deg, transparent 50%, var(--warning) 50%) !important;
            color: var(--warning);
        }
    }

    &-info {
        background-image: linear-gradient(180deg, transparent 50%, var(--info-light) 50%) !important;
        color: var(--info);

        &:hover {
            background-image: linear-gradient(180deg, transparent 50%, var(--info) 50%) !important;
            color: var(--info);
        }
    }
}