.mcc-button-group {
    --mds-button-group-display: inline-flex;
    --mds-button-group-flex-direction: row;
    --mds-button-group-spacing: 0;
    --mds-button-group-block-borders: 0;
    --mds-button-group-inline-borders: calc(1px * -1);
    --mds-button-group-border-radius: 6px;
    --mds-button-group-border-radius-child: 0;
    --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) 0 0 var(--mds-button-group-border-radius);
    --mds-button-group-border-radius-last-child: 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0;
    display: var(--mds-button-group-display);
    flex-direction: var(--mds-button-group-flex-direction);
    gap: var(--mds-button-group-spacing);
}

    .mcc-button-group > * {
        flex: auto;
        margin-block-start: var(--mds-button-group-block-borders);
        margin-inline-start: var(--mds-button-group-inline-borders);
    }

        .mcc-button-group > *:first-child {
            --mds-button-group-block-borders: 0;
            --mds-button-group-inline-borders: 0;
        }

    .mcc-button-group .mcc-button {
        border-radius: var(--mds-button-group-border-radius-child);
    }

    .mcc-button-group > :is(.mcc-button, .mcc-dropdown, mcc-dropdown) summary:focus {
        border-radius: var(--mds-button-group-border-radius-child);
    }

    .mcc-button-group > :is(.mcc-button, .mcc-dropdown, mcc-dropdown):first-child {
        --mds-button-group-border-radius-child: var(--mds-button-group-border-radius-first-child);
    }

    .mcc-button-group > :is(.mcc-button, .mcc-dropdown, mcc-dropdown):last-child {
        --mds-button-group-border-radius-child: var(--mds-button-group-border-radius-last-child);
    }

    .mcc-button-group .mcc-button:where(:focus, :active, .mu-is-active) {
        z-index: 1;
    }

.mcc-button-group--block {
    --mds-button-group-display: flex;
}

    .mcc-button-group--block :is(details, .mcc-button) {
        display: var(--mds-button-group-display);
    }

.mcc-button-group--vertical {
    --mds-button-group-flex-direction: column;
    --mds-button-group-block-borders: calc(1px * -1);
    --mds-button-group-inline-borders: 0;
    --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0 0;
    --mds-button-group-border-radius-last-child: 0 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius);
}

@media (min-width: 36em) {
    .mcc-button-group--inline-sm {
        --mds-button-group-display: inline-flex;
    }

    .mcc-button-group--block-sm {
        --mds-button-group-display: flex;
    }

    .mcc-button-group--horizontal-sm {
        --mds-button-group-flex-direction: row;
        --mds-button-group-block-borders: 0;
        --mds-button-group-inline-borders: calc(1px * -1);
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) 0 0 var(--mds-button-group-border-radius);
        --mds-button-group-border-radius-last-child: 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0;
    }

    .mcc-button-group--vertical-sm {
        --mds-button-group-flex-direction: column;
        --mds-button-group-block-borders: calc(1px * -1);
        --mds-button-group-inline-borders: 0;
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0 0;
        --mds-button-group-border-radius-last-child: 0 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius);
    }
}

@media (min-width: 48em) {
    .mcc-button-group--inline-md {
        --mds-button-group-display: inline-flex;
    }

    .mcc-button-group--block-md {
        --mds-button-group-display: flex;
    }

    .mcc-button-group--horizontal-md {
        --mds-button-group-flex-direction: row;
        --mds-button-group-block-borders: 0;
        --mds-button-group-inline-borders: calc(1px * -1);
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) 0 0 var(--mds-button-group-border-radius);
        --mds-button-group-border-radius-last-child: 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0;
    }

    .mcc-button-group--vertical-md {
        --mds-button-group-flex-direction: column;
        --mds-button-group-block-borders: calc(1px * -1);
        --mds-button-group-inline-borders: 0;
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0 0;
        --mds-button-group-border-radius-last-child: 0 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius);
    }
}

@media (min-width: 62em) {
    .mcc-button-group--inline-lg {
        --mds-button-group-display: inline-flex;
    }

    .mcc-button-group--block-lg {
        --mds-button-group-display: flex;
    }

    .mcc-button-group--horizontal-lg {
        --mds-button-group-flex-direction: row;
        --mds-button-group-block-borders: 0;
        --mds-button-group-inline-borders: calc(1px * -1);
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) 0 0 var(--mds-button-group-border-radius);
        --mds-button-group-border-radius-last-child: 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0;
    }

    .mcc-button-group--vertical-lg {
        --mds-button-group-flex-direction: column;
        --mds-button-group-block-borders: calc(1px * -1);
        --mds-button-group-inline-borders: 0;
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0 0;
        --mds-button-group-border-radius-last-child: 0 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius);
    }
}

@media (min-width: 80em) {
    .mcc-button-group--inline-xl {
        --mds-button-group-display: inline-flex;
    }

    .mcc-button-group--block-xl {
        --mds-button-group-display: flex;
    }

    .mcc-button-group--horizontal-xl {
        --mds-button-group-flex-direction: row;
        --mds-button-group-block-borders: 0;
        --mds-button-group-inline-borders: calc(1px * -1);
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) 0 0 var(--mds-button-group-border-radius);
        --mds-button-group-border-radius-last-child: 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0;
    }

    .mcc-button-group--vertical-xl {
        --mds-button-group-flex-direction: column;
        --mds-button-group-block-borders: calc(1px * -1);
        --mds-button-group-inline-borders: 0;
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0 0;
        --mds-button-group-border-radius-last-child: 0 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius);
    }
}

@media (min-width: 90em) {
    .mcc-button-group--inline-xxl {
        --mds-button-group-display: inline-flex;
    }

    .mcc-button-group--block-xxl {
        --mds-button-group-display: flex;
    }

    .mcc-button-group--horizontal-xxl {
        --mds-button-group-flex-direction: row;
        --mds-button-group-block-borders: 0;
        --mds-button-group-inline-borders: calc(1px * -1);
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) 0 0 var(--mds-button-group-border-radius);
        --mds-button-group-border-radius-last-child: 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0;
    }

    .mcc-button-group--vertical-xxl {
        --mds-button-group-flex-direction: column;
        --mds-button-group-block-borders: calc(1px * -1);
        --mds-button-group-inline-borders: 0;
        --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius) var(--mds-button-group-border-radius) 0 0;
        --mds-button-group-border-radius-last-child: 0 0 var(--mds-button-group-border-radius) var(--mds-button-group-border-radius);
    }
}

.mcc-button-group--spaced {
    --mds-button-group-spacing: var(--mds-spacing-05, 1rem);
    --mds-button-group-inline-borders: 0;
    --mds-button-group-border-radius-child: var(--mds-button-group-border-radius);
    --mds-button-group-border-radius-first-child: var(--mds-button-group-border-radius);
    --mds-button-group-border-radius-last-child: var(--mds-button-group-border-radius);
}

.mcc-button-group--sm .mcc-button {
    --mds-button-border-radius: 6px;
    --mds-button-block-size: var(--mds-spacing-07, 2rem);
    --mds-button-padding-block: calc(var(--mds-spacing-02, 0.25rem) - 1px);
    --mds-button-padding-inline: calc(var(--mds-spacing-05, 1rem) - 1px);
}

.mcc-button-group--sm summary {
    block-size: var(--mds-spacing-07, 2rem);
}
/* Mosaic Design System | button-group | v1.1.5 */