button, .button-style {
    background-color: var(--interactive-element-background);
    color: var(--interactive-element-text);

    border: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 200ms ease;
}
button:hover, .button-style:hover {
    background-color: var(--interactive-element-background-hover);
    color: var(--interactive-element-text-hover);
}
button:active, .button-style:active {
    background-color: var(--interactive-element-background-active);
    color: var(--interactive-element-text-active);
}
button:disabled, .button-style.disabled {
    background-color: var(--interactive-element-background-disabled);
    color: var(--interactive-element-text-disabled);

    cursor: default;
}

button.dark, .button-style.dark {
    background-color: var(--interactive-element-dark-background);
}
button.dark:hover, .button-style.dark:hover {
    background-color: var(--interactive-element-dark-background-hover);
}
button.dark:active, .button-style.dark:active {
    background-color: var(--interactive-element-dark-background-active);
}
button.dark:disabled, .button-style.dark:disabled {
    background-color: var(--interactive-element-dark-background-disabled);
}

button.toggled, .button-style.button-style-toggled {
    filter: brightness(80%);
}
button.toggled:hover, .button-style.button-style-toggled:hover {
    filter: brightness(90%);
}
button.toggled:active, .button-style.button-style-toggled:active {
    filter: brightness(100%);
}


button, .button-style {
    min-width: 50px;
    min-height: 50px;
    padding: var(--space-4);
    font-size: large;
}
button.small, .button-style.button-style-small {
    min-width: 40px;
    min-height: 40px;
    padding: var(--space-3);
    font-size: medium;
}
button.small-padding, .button-style.button-style-small-padding {
    padding: var(--space-1);
}


.invert * {
    transition: all 200ms ease;
}
.invert.toggled > img {
    rotate: 180deg;
}