/* ECO component CSS: button group (toggle group). Shared by the docs playgrounds and every prototype/product page.
   Skill: eco-button (section "Button group"). Link it, do not copy it: <link rel="stylesheet" href="/components/css/button-group.css">
   Joined System buttons (eco-button, btn--sm): frame, selected = black-12 fill (aria-pressed="true"), uppercase label.
   2-4 short, related options on one row; more options: a select. Not the pill: that is eco-pill-segment-control. Tokens only. */
.btn-group { display: inline-flex; max-width: 100%; align-self: flex-start; }
.btn-group button + button { margin-left: -1px; }  /* shared 1px frame between joined buttons */
.btn-group button {
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px;
  margin: 0; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; text-transform: uppercase;
  background: var(--color-surface-opacity-white-0); color: var(--color-text-action-primary);
  box-shadow: inset 0 0 0 1px var(--color-border-action-3);
  font-family: 'Breuer Condensed', Arial, sans-serif; font-weight: 600; font-size: 14px; line-height: 14px; letter-spacing: 0.42px;
  outline: 2px solid transparent; outline-offset: 2px;
  transition: outline-color var(--duration-fast-2) var(--ease-standard), box-shadow var(--duration-fast-2) var(--ease-standard);
}
.btn-group button::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--color-surface-opacity-black-12); opacity: 0; transition: opacity var(--duration-fast-2) var(--ease-standard); }
.btn-group button:is(:hover, [data-state="hover"]):not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-border-hover); }
.btn-group button:is(:hover, [data-state="hover"]):not([aria-pressed="true"]):not(:disabled)::before { opacity: 1; }
.btn-group button[aria-pressed="true"] { background: var(--color-surface-opacity-black-12); }
.btn-group button:disabled { color: var(--color-text-disabled); box-shadow: inset 0 0 0 1px var(--color-border-disabled); cursor: not-allowed; }
.btn-group button:is(:hover, [data-state="hover"]):not(:disabled) { z-index: 1; }  /* hover frame on top of the neighbours' */
.btn-group button[data-state="focus"], body.keyboard-nav .btn-group button:focus { outline-color: var(--color-border-focus); z-index: 2; }
@media (min-width: 769px) { .btn-group button { height: 40px; padding: 0 var(--dimension-spacing-space-16); font-size: 16px; line-height: 16px; letter-spacing: 0.48px; } }
@media (prefers-reduced-motion: reduce) { .btn-group button, .btn-group button::before { transition: none; } }