.ButtonGroup {
    display: flex;

    & button {
        --color: var(--color-white-transparent);
        --background: var(--color-main);
        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-white);
            --background: var(--color-main-dark);
        }

        &:first-child {
            border-radius: var(--radius-default) 0 0 var(--radius-default);
        }

        &:last-child {
            border-radius: 0 var(--radius-default) var(--radius-default) 0;
        }
    }
}