/* ===== OO ButtonGroup / ToggleButtonGroup =====
   ButtonGroup: Buttons ohne Abstand zu einer Leiste verbunden. Button und ToggleButton setzen ihren Radius inline
   (border-radius), deshalb setzen die inneren Ecken ihn hier mit !important auf 0; die Außenecken behalten ihn.
   An Übergängen entfällt jeweils ein Rahmen; keine Überlappung mit rundungsabhängigen negativen Abständen.
   ToggleButtonGroup: derselbe verbundene Rahmen, mit Radius Md außen und farbiger Auswahl direkt im Segment.
   =============================================== */

:is(.oo-btn-group, .oo-toggle-btn-group) {
    display: inline-flex;
    align-items: stretch;
}

:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) {
    flex-direction: column;
}

.oo-toggle-btn-group > .oo-btn {
    border-color: var(--oo-neutral-outline);
    border-radius: var(--oo-radius-md) !important;
}

/* Die Buttons der Gruppe, direkt oder in der Hülle eines ToggleButton. */
:is(.oo-btn-group, .oo-toggle-btn-group) > .oo-btn,
:is(.oo-btn-group, .oo-toggle-btn-group) > .oo-togglebutton-wrapper > .oo-btn {
    position: relative;
}

:is(.oo-btn-group, .oo-toggle-btn-group) > .oo-btn:hover,
:is(.oo-btn-group, .oo-toggle-btn-group) > .oo-btn:focus-visible,
:is(.oo-btn-group, .oo-toggle-btn-group) > .oo-togglebutton-wrapper > .oo-btn:hover,
:is(.oo-btn-group, .oo-toggle-btn-group) > .oo-togglebutton-wrapper > .oo-btn:focus-visible {
    z-index: 1;
}

/* Waagrecht: innen keine Ecken, genau eine Trennlinie pro Übergang. */
:is(.oo-btn-group, .oo-toggle-btn-group):not(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > :not(:last-child),
:is(.oo-btn-group, .oo-toggle-btn-group):not(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper:not(:last-child) > .oo-btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

:is(.oo-btn-group, .oo-toggle-btn-group):not(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > :not(:first-child),
:is(.oo-btn-group, .oo-toggle-btn-group):not(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper:not(:first-child) > .oo-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

:is(.oo-btn-group, .oo-toggle-btn-group):not(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-btn:not(:last-child),
:is(.oo-btn-group, .oo-toggle-btn-group):not(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper:not(:last-child) > .oo-btn {
    border-right-width: 0;
}

/* Senkrecht: dasselbe oben und unten; die Buttons sind gleich breit. */
:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > :not(:last-child),
:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper:not(:last-child) > .oo-btn {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > :not(:first-child),
:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper:not(:first-child) > .oo-btn {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-btn:not(:last-child),
:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper:not(:last-child) > .oo-btn {
    border-bottom-width: 0;
}

:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper > .oo-btn {
    width: 100%;
}

/* Der Rahmen liegt auf den Segmenten selbst, ohne Abstand zu ihrer Auswahlfläche.
   Die gemeinsamen Regeln oben entfernen innere Rundungen und doppelte Trennlinien. */
.oo-toggle-btn-group {
    flex-shrink: 0;
    gap: 0;
    padding: 0;
    border: 0;
}