.btn {
    display:block; 
    text-decoration:none;
    font-size:0.7rem; 
    letter-spacing:0.2em; 
    text-transform:uppercase;
    padding: 0.7rem 1.8rem;
    border: 1px solid var(--app-color-accent);
    color: var(--app-color-accent) !important;
    background: transparent;
    cursor:pointer;
    transition: background .25s, color .25s, box-shadow .25s;
    position:relative; 
    overflow:hidden;
}

.btn::before {
    content:''; 
    position:absolute; 
    inset:0;
    background: var(--app-color-accent);
    transform: scaleX(0); 
    transform-origin:left;
    transition: transform .3s ease;
    z-index:-1;
}

.btn:hover { 
    color: var(--app-color-primary) !important; 
    box-shadow: 0 0 20px var(--app-color-accent-light); 
}

.btn:hover::before { 
    transform: scaleX(1); 
}

.btn-solid {
    background: var(--app-color-accent); 
    color: var(--app-color-primary) !important; 
    font-weight:600;
    border-color: var(--app-color-accent);
}

.btn-solid::before { 
    background: var(--app-color-light); 
}

.btn-solid:hover { 
    color: var(--app-color-primary) !important; 
}