button {
    min-width: 120px;
    height: 44px;
    border: none;
    cursor: pointer;
    font-size: var(--fs-bodytext);
    border-radius: var(--rad-xs);
    font-weight: 600;
}

.button-fs-subtext{
    font-size: var(--fs-subtext);
}

.button-sm{
    height: 35px;
    font-weight: 500;
    font-size: var(--fs-subtext);
}

.button-md{
    height: 40px;
    min-width: 280px;
    font-weight: 500;
}
.button-md2{
    height: 40px;
    min-width: 120px;
    font-weight: 500;
}

.button-lg{
    height: 40px;
    min-width: 320px;
    font-weight: 500;
}

.button-sm-width{
    max-width: 120px;
}

.button-primary{
    background-color: var(--co-primary);
    color: var(--co-secondary);
    transition: all 0.4s ease;
}

.button-primary:hover{
    border: 0.5px solid var(--co-primary);
    background-color: var(--co-secondary);
    color: var(--co-primary);
}

.button-secondary{
    background-color: var(--co-secondary);
    color: var(--co-primary);
    border: 0.5px solid var(--co-primary);
    transition: all 0.3s ease-in;
}

.button-secondary:hover{
    border: 0.5px solid var(--co-secondary);
    background-color: var(--co-primary);
    color: var(--co-secondary);
}

.button-tertiary{
    background-color: var(--co-tertiary);
    color: var(--co-secondary);
    transition: all 0.4s ease;
}

.button-tertiary:hover{
    border: 0.5px solid var(--co-tertiary);
    background-color: var(--co-secondary);
    color: var(--co-tertiary);
}

.button-full{
    width: 100%;
}

.button-rad-xs{
    border-radius: var(--rad-xs);
}

.button-rad-sm{
    border-radius: var(--rad-sm);
}

.button-rad-md{
    border-radius: var(--rad-md);
}

.button-rad-lg{
    border-radius: var(--rad-lg);
}

.button-rad-full{
    border-radius: var(--rad-full);
}

.button-primary-nohover{
    background-color: var(--co-primary);
    color: var(--co-secondary);
}

.button-tertiary-nohover{
    background-color: var(--co-tertiary);
    color: var(--co-secondary);
}

.button-icon {
    min-width: 30px;
    max-width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--co-secondary);
    font-size: var(--fs-bodytext);
}

.button-text-icon{
    display: grid;
    /* justify-content: center; */
    align-items: center;
    grid-template-columns: auto 30px;
    text-align: center;
    font-size: var(--fs-bodytext);
}