// --------------
// Regular button
// --------------

.btn {
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    font-weight: bold;
    letter-spacing: .05rem;
    cursor: pointer;
    padding: .75rem;
    background: var(--color-background);
    border: 2px solid var(--color-primary-400);
    color: var(--color-primary-light);
    border-radius: .5rem;
    transition: border-color .1s ease-in;
}

.btn-small {
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    font-weight: bold;
    cursor: pointer;
    padding: .5rem;
    background: var(--color-background);
    border: 2px solid var(--color-primary-400);
    color: var(--color-primary-light);
    border-radius: .5rem;
}

.btn-small:hover,
.btn:hover {
    border-color: var(--anchor-color-hover);
    color:  var(--anchor-color-hover);
}

.btn,
.btn-small {
    img {
        filter: invert(77%) sepia(40%) saturate(250%) hue-rotate(164deg) brightness(100%) contrast(94%);
    }
    
    &:hover img {
        filter: invert(85%) sepia(46%) saturate(3508%) hue-rotate(287deg) brightness(112%) contrast(94%);
    }
}

// --------------
// Text button
// --------------


.btn-text {
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: inherit;
    cursor: pointer;
    transition: color .1s ease-in;
    /* text-decoration: underline; */
}

.btn-text:hover {
    color: var(--anchor-color-hover) !important;
}

// --------------
// Icon button 
// --------------

.btn-icon {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: inherit;
    transition: color .1s ease-in;
    /* text-decoration: underline; */
}