/* ===== 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;
}

/* ButtonGroup: nie breiter als der Container. Buttons mit Text dürfen schrumpfen und kürzen ihren Text mit „…“;
   Buttons nur mit Icon und die Icons selbst behalten ihre Größe. */
.oo-btn-group {
    max-width: 100%;
}

.oo-btn-group > .oo-btn:has(> .oo-btn__text),
.oo-btn-group > .oo-togglebutton-wrapper:has(> .oo-btn > .oo-btn__text),
.oo-btn-group > .oo-togglebutton-wrapper > .oo-btn:has(> .oo-btn__text) {
    min-width: 0;
    flex-shrink: 1;
}

.oo-btn-group .oo-btn > .oo-icon {
    flex-shrink: 0;
}

/* Gekürzter Text behält Platz für einen Buchstaben und „…“: Wird er schmaler, zeichnet der Browser kein „…“ mehr,
   sondern schneidet die Buchstaben hart ab oder lässt den Text ganz verschwinden. */
.oo-btn-group > .oo-btn > .oo-btn__text,
.oo-btn-group > .oo-togglebutton-wrapper > .oo-btn > .oo-btn__text,
.oo-toggle-btn-group > .oo-btn > .oo-btn__text,
.oo-toggle-btn-group > .oo-toggle-btn-group__menu > .oo-context-menu-trigger > .oo-btn > .oo-btn__text {
    min-width: 1.6em;
}

/* In schmalen Containern schrumpfen die Segmente und kürzen ihren Text mit „…“, statt die Seite zu verbreitern. */
.oo-toggle-btn-group > .oo-btn {
    border-color: var(--oo-neutral-outline);
    border-radius: var(--oo-radius-md) !important;
    flex-shrink: 1;
    min-width: 0;
}

/* 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-btn,
:is(.oo-btn-group--vertical, .oo-toggle-btn-group--vertical) > .oo-togglebutton-wrapper > .oo-btn {
    width: 100%;
}

/* ToggleButtonGroup: Option mit Rechtsklick-Menü (ToggleButtonGroupItem.ContextMenuContent).
   Die Hülle ist das Segment in der Gruppe und enthält auch das offene Menü; die Fläche des Kontextmenüs fällt aus dem Layout,
   der Button darin sieht aus wie ein direktes Segment. */
.oo-toggle-btn-group > .oo-toggle-btn-group__menu {
    display: flex;
    flex-shrink: 1;
    min-width: 0;
}

.oo-toggle-btn-group__menu > .oo-context-menu-trigger {
    display: contents;
}

.oo-toggle-btn-group > .oo-toggle-btn-group__menu > .oo-context-menu-trigger > .oo-btn {
    position: relative;
    border-color: var(--oo-neutral-outline);
    border-radius: var(--oo-radius-md) !important;
    flex-shrink: 1;
    min-width: 0;
}

.oo-toggle-btn-group > .oo-toggle-btn-group__menu > .oo-context-menu-trigger > .oo-btn:is(:hover, :focus-visible) {
    z-index: 1;
}

.oo-toggle-btn-group:not(.oo-toggle-btn-group--vertical) > .oo-toggle-btn-group__menu:not(:last-child) > .oo-context-menu-trigger > .oo-btn {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right-width: 0;
}

.oo-toggle-btn-group:not(.oo-toggle-btn-group--vertical) > .oo-toggle-btn-group__menu:not(:first-child) > .oo-context-menu-trigger > .oo-btn {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.oo-toggle-btn-group--vertical > .oo-toggle-btn-group__menu:not(:last-child) > .oo-context-menu-trigger > .oo-btn {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-width: 0;
}

.oo-toggle-btn-group--vertical > .oo-toggle-btn-group__menu:not(:first-child) > .oo-context-menu-trigger > .oo-btn {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.oo-toggle-btn-group--vertical > .oo-toggle-btn-group__menu > .oo-context-menu-trigger > .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;
    max-width: 100%;
    gap: 0;
    padding: 0;
    border: 0;
}

/* ToggleButtonGroupItem IconOnly (Icon oder Avatar): quadratisch, schrumpft nicht. Ein Avatar im Item zeigt den Zeiger des Buttons. */
.oo-toggle-btn-group > .oo-btn.oo-btn--icon-only,
.oo-toggle-btn-group > .oo-toggle-btn-group__menu > .oo-context-menu-trigger > .oo-btn.oo-btn--icon-only {
    flex-shrink: 0;
    min-width: var(--_btn-icon-only-size);
}

.oo-toggle-btn-group > .oo-toggle-btn-group__menu:has(> .oo-context-menu-trigger > .oo-btn--icon-only) {
    flex-shrink: 0;
}

.oo-toggle-btn-group .oo-btn .oo-avatar {
    cursor: inherit;
}

/* Overflow="OoToggleOverflow.Scroll": Die Leiste scrollt waagrecht, statt die Segmente zu kürzen.
   Jede Option behält ihre Breite und steht immer an derselben Stelle. */
.oo-toggle-btn-group--scroll {
    overflow-x: auto;
    scrollbar-width: thin;
}

.oo-toggle-btn-group--scroll > .oo-btn,
.oo-toggle-btn-group--scroll > .oo-toggle-btn-group__menu,
.oo-toggle-btn-group--scroll > .oo-toggle-btn-group__menu > .oo-context-menu-trigger > .oo-btn {
    flex-shrink: 0;
}

/* Overflow="OoToggleOverflow.Wrap": Umbruch in weitere Zeilen. Ein verbundener Rahmen wäre an den Zeilenenden offen,
   deshalb stehen die Optionen hier als einzelne Segmente mit eigenem Rahmen und kleinem Abstand. */
.oo-toggle-btn-group--wrap {
    flex-wrap: wrap;
    gap: var(--oo-space-1);
}

.oo-toggle-btn-group--wrap > .oo-toggle-btn-group__menu {
    flex-shrink: 0;
    max-width: 100%;
}

.oo-toggle-btn-group.oo-toggle-btn-group--wrap > .oo-btn,
.oo-toggle-btn-group.oo-toggle-btn-group--wrap:not(.oo-toggle-btn-group--vertical) > .oo-toggle-btn-group__menu > .oo-context-menu-trigger > .oo-btn {
    flex-shrink: 0;
    max-width: 100%;
    border-width: var(--oo-border-width) !important;
    border-radius: var(--oo-radius-md) !important;
}

/* DimInactive: Nicht gewählte Optionen blass und grau, damit die gewählten herausstechen – auch Avatare und eigener Inhalt.
   Beim Überfahren und im Fokus wieder voll. */
.oo-toggle-btn-group--dim .oo-btn[aria-pressed="false"] > * {
    opacity: 0.45;
    filter: grayscale(1);
    transition: var(--oo-transition);
}

.oo-toggle-btn-group--dim .oo-btn[aria-pressed="false"]:is(:hover, :focus-visible) > * {
    opacity: 1;
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .oo-toggle-btn-group--dim .oo-btn[aria-pressed="false"] > * {
        transition: none;
    }
}