.basic-button {
    background-color: var(--bg-button-color);
    color: var(--white);

    border-radius: var(--border-radius);

    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    min-width: 2.5rem;

    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    cursor: pointer;

    transition: color 200ms ease-in-out;

    font-size: 1rem;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
}

.basic-button.light {
    background-color: var(--white);
    color: var(--hekkerij-brown);
}

/* hover */
.basic-button:hover {
    background-color: var(--bg-button-color-hover);
}

.basic-button:hover.light {
    background-color: var(--gray);
    color: var(--hekkerij-brown);
}

.basic-button.no-hover:hover {
    background-color: var(--bg-button-color);
    color: var(--hekkerij-brown);
}

/* display */
.basic-button.hidden {
    display: none;
}

.basic-button-container {
    display: flex;
    flex-direction: row;
    column-gap: 1rem;
    align-items: center;
}

.basic-button-container.center {
    justify-content: center;
}

.basic-button-container.left {
    justify-content: start;
}

.basic-button-container.right {
    justify-content: end;
}

.basic-button-container.full .basic-button {
    width: 100%;
}