.buttons {
    display: flex;
    width: min-content;
    gap: 0.5rem;
}

button, .button {
    width: max-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background-color: unset;
    height: 32px;
    transition: transform 100ms ease-in, filter 100ms ease-in;
}

button {
    font-size: 1rem;
}

a.button:hover {
    text-decoration: none;
}

a.button {
    text-decoration: none;
}

button:hover, .button:hover {
    filter: brightness(95%);
}

button:active, .button:active {
    filter: brightness(88%) !important;
}

button > svg, .button > svg {
    height: 1rem;
    width: 1rem;
    fill: inherit;
}

.button:hover {
    text-decoration: none;
}

.button:visited {
    color: initial;
}

button.elevated, .button.elevated {
    box-shadow: 0 3px 7px 0 var(--main-shadow);
    border-radius: 2rem;
    padding: 1rem 1.5rem;
    background-color: var(--main-background);
    color: var(--main-accent);
    fill: var(--main-accent);
}

button.filled, .button.filled {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--main-accent);
    color: var(--second-accent);
    fill: var(--second-accent);
}

button.filled-tonal, .button.filled-tonal {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--second-accent);
    color: var(--main-accent);
    fill: var(--main-accent);
}

button.outline {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    background-color: var(--main-background);
    outline: 1px solid var(--main-text);
    color: var(--main-accent);
    fill: var(--main-accent);
}

button.text-button, .button.text-button {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--main-accent);
}

button.floating {

}

button.floating-extended {

}