.ButtonGroup {
    display: flex;
    background: var(--color-main);
    box-shadow: var(--box-shadow-z2);

    & button {
        --color: var(--color-light);
        --background: var(--color-main-darkest);
        all: unset;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: .5rem;
        flex-grow: 1;
        background: var(--background);
        color: var(--color);
        cursor: pointer;
        transition: var(--transition-default);

        &.active {
            --color: var(--color-lightest);
            --background: var(--color-main-dark);
        }
    }
}