.ButtonGroup {
    display: flex;
    background: var(--color-main);
    border-radius: var(--radius-default);
    overflow: hidden;
    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-darkest);
            --background: var(--color-gradient-main);
        }

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

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