/* CUIButton - mirrors cui_button.dart. Variants: primary|secondary|link|danger. Sizes: small|medium|large.
   Shapes: (default)|banner|circular|oval. States: :active/.is-pressed, :focus-visible/.is-focused, [disabled]/.is-disabled. */
.cui-button {
  --_bg: var(--cui-color-surface-bg-brand); --_fg: var(--cui-color-text-on-brand); --_border: transparent;
  --_h: 48px; --_py: var(--cui-space-xs); --_px: var(--cui-space-md); --_gap: var(--cui-space-xs);
  --_icon: var(--cui-size-icon-md); --_seg: 36px; --_radius: var(--cui-radius-pill);
  appearance: none; margin: 0; cursor: pointer; border: 0; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; max-width: 100%;
  min-height: var(--_h); padding: 0; overflow: hidden;
  background: var(--_bg); color: var(--_fg);
  border-radius: var(--_radius);
  font: inherit; outline: none; -webkit-tap-highlight-color: transparent;
}
.cui-button__label-wrap { display: inline-flex; align-items: center; justify-content: center; gap: var(--_gap);
  padding: var(--_py) var(--_px); min-width: 0; }
.cui-button__label { font-family: var(--cui-type-body-md-semi-family); font-size: var(--cui-type-body-md-semi-size);
  font-weight: var(--cui-type-body-md-semi-weight); letter-spacing: var(--cui-type-body-md-semi-spacing);
  line-height: round(var(--cui-type-body-md-semi-line), 1px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cui-button .cui-icon { width: var(--_icon); height: var(--_icon); font-size: var(--_icon); }

/* sizes */
.cui-button--small  { --_h: 40px; --_px: var(--cui-space-sm); --_seg: 28px; --_icon: var(--cui-size-icon-sm); }
.cui-button--medium { --_h: 48px; --_px: var(--cui-space-md); --_seg: 36px; --_icon: var(--cui-size-icon-md); }
.cui-button--large  { --_h: 56px; --_px: var(--cui-space-lg); --_py: var(--cui-space-sm); --_gap: var(--cui-space-sm);
  --_seg: 44px; --_icon: var(--cui-size-icon-lg); }
.cui-button--small .cui-button__label { font-family: var(--cui-type-body-sm-semi-family); font-size: var(--cui-type-body-sm-semi-size);
  font-weight: var(--cui-type-body-sm-semi-weight); letter-spacing: var(--cui-type-body-sm-semi-spacing); line-height: round(var(--cui-type-body-sm-semi-line), 1px); }
/* icons are bigger when a quantity segment is present */
.cui-button--small.has-segment  { --_icon: var(--cui-size-icon-md); }
.cui-button--medium.has-segment, .cui-button--large.has-segment { --_icon: var(--cui-size-icon-lg); }

/* variants */
.cui-button--secondary { --_bg: var(--cui-color-surface-bg-sunken); --_fg: var(--cui-color-text-brand); --_border: var(--cui-color-border-default); }
.cui-button--link { --_bg: transparent; --_fg: var(--cui-color-text-brand); }
.cui-button--danger { --_bg: var(--cui-color-surface-bg-danger-muted); --_fg: var(--cui-color-text-brand); }

/* full width */
.cui-button--full { display: flex; width: 100%; }
.cui-button--full .cui-button__label-wrap { flex: 1; }

/* quantity / trailing segment */
.cui-button__segment { display: inline-flex; align-items: center; justify-content: center; align-self: stretch;
  min-width: calc(var(--_seg) + var(--cui-border-default)); padding: 0 var(--cui-space-xs);
  border-left: var(--cui-border-default) solid color-mix(in srgb, var(--_fg) 30%, transparent);
  font-family: var(--cui-type-body-md-semi-family); font-size: var(--cui-type-body-md-semi-size);
  font-weight: var(--cui-type-body-md-semi-weight); line-height: round(var(--cui-type-body-md-semi-line), 1px); }
.cui-button--small .cui-button__segment { font-size: var(--cui-type-body-sm-semi-size); line-height: round(var(--cui-type-body-sm-semi-line), 1px); }

/* circular: icon-only, padding by size */
.cui-button--circular { --_px: var(--cui-space-sm); --_py: var(--cui-space-sm); --_icon: var(--cui-size-icon-lg); min-height: 0; }
.cui-button--circular .cui-button__label-wrap { padding: var(--_py); }
.cui-button--circular.cui-button--small  { --_py: var(--cui-space-xs); }
.cui-button--circular.cui-button--medium { --_py: var(--cui-space-sm); }
.cui-button--circular.cui-button--large  { --_py: var(--cui-space-md); }

/* oval: danger icon + optional label, small */
.cui-button--oval { --_icon: var(--cui-size-icon-sm); --_py: calc(var(--cui-space-md) - var(--cui-space-3xs));
  --_px: calc(var(--cui-space-md) + var(--cui-space-2xs)); min-height: 44px; }
.cui-button--oval .cui-button__label { font-family: var(--cui-type-body-sm-semi-family); font-size: var(--cui-type-body-sm-semi-size);
  font-weight: var(--cui-type-body-sm-semi-weight); line-height: round(var(--cui-type-body-sm-semi-line), 1px); }

/* banner: a sunken card holding supporting text above a large pill */
.cui-button-banner { display: flex; flex-direction: column; width: 100%; background: var(--cui-color-surface-bg-sunken);
  border-radius: var(--cui-radius-banner-outer); padding: 0 var(--cui-space-xs) var(--cui-space-xs); }
.cui-button-banner__supporting { display: flex; align-items: center; justify-content: center; gap: var(--cui-space-xs);
  padding: var(--cui-space-xs) var(--cui-space-lg); color: var(--cui-color-text-brand);
  font-family: var(--cui-type-caption-family); font-size: var(--cui-type-caption-size); font-weight: var(--cui-type-caption-weight);
  letter-spacing: var(--cui-type-caption-spacing); line-height: round(var(--cui-type-caption-line), 1px); text-align: center; }
.cui-button-banner__supporting .cui-icon { width: var(--cui-size-icon-sm); height: var(--cui-size-icon-sm); font-size: var(--cui-size-icon-sm); }
.cui-button-banner:has(.cui-button[disabled], .cui-button.is-disabled) .cui-button-banner__supporting { color: var(--cui-color-text-disabled); }
.cui-button--banner { --_radius: var(--cui-radius-2xl); --_px: var(--cui-space-lg); --_py: var(--cui-space-sm); --_gap: var(--cui-space-sm);
  --_h: 56px; --_icon: var(--cui-size-icon-lg); width: 100%; min-height: 0; /* Dart: banner pill = padding + content, no minHeight */ }

/* pressed = 8% darker, like the Flutter widget */
.cui-button:not([disabled]):active, .cui-button.is-pressed {
  background: color-mix(in srgb, var(--_bg) 92%, black); color: color-mix(in srgb, var(--_fg) 92%, black);
  outline-color: color-mix(in srgb, var(--_border) 92%, black);
}
.cui-button:focus-visible, .cui-button.is-focused { box-shadow: 0 0 0 2px var(--cui-color-border-focus); }

/* disabled */
.cui-button[disabled], .cui-button.is-disabled { cursor: default; pointer-events: none;
  --_bg: var(--cui-color-surface-bg-disabled); --_fg: var(--cui-color-text-disabled); --_border: var(--cui-color-border-disabled); }
.cui-button--link[disabled], .cui-button--link.is-disabled { --_bg: transparent; --_border: transparent; }
.cui-button--primary[disabled], .cui-button--primary.is-disabled,
.cui-button--link[disabled], .cui-button--link.is-disabled { --_border: transparent; }
.cui-button--danger[disabled], .cui-button--danger.is-disabled { --_bg: var(--cui-color-surface-bg-danger-muted);
  --_fg: var(--cui-color-text-brand); opacity: .5; }

/* animateQuantityEntrance: segment slides in 36px, 650ms, Curves.easeOutBack */
@keyframes cui-button-seg-in { from { transform: translateX(36px); } to { transform: none; } }
.cui-button__segment--enter { animation: cui-button-seg-in calc(650ms / var(--cui-speed, 1)) cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }

/* Flutter wraps the pill in ConstrainedBox(minWidth: 48, minHeight: 48) (max(48, pill height) in layout) and centres it. */
.cui-button-hit { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; max-width: 100%; vertical-align: top; }
.cui-button-hit--full { display: flex; width: 100%; }
.cui-button-hit--full > .cui-button { flex: 1; }
.cui-button--oval { --_h: 44px; }
/* Flutter paints the border inside the box (it does not add to the size) -> inset outline instead of a border. */
.cui-button { border: 0; outline: var(--cui-border-default) solid var(--_border); outline-offset: calc(-1 * var(--cui-border-default)); }

/* ---- split: two separate pills (label + count) 4px apart on a scrim track (Dart _buildSplit) ---- */
.cui-button--split { --_track: var(--cui-color-surface-bg-scrim); --_sbg: var(--_bg); --_sborder: transparent;
  --_outer: var(--cui-radius-3xl); --_inner: var(--cui-radius-md);
  gap: var(--cui-space-2xs); padding: var(--cui-space-2xs); min-height: 0; overflow: visible; box-sizing: border-box;
  background: var(--_track); outline: 0; border-radius: var(--cui-radius-pill); }
.cui-button--split.cui-button--secondary { --_sborder: var(--cui-color-border-default); }
.cui-button--split .cui-button__label-wrap, .cui-button--split .cui-button__segment {
  position: relative; box-sizing: border-box; min-height: var(--_h); overflow: hidden; background: var(--_sbg);
  outline: var(--cui-border-default) solid var(--_sborder); outline-offset: calc(-1 * var(--cui-border-default)); }
.cui-button--split .cui-button__label-wrap { border-radius: var(--_outer) var(--_inner) var(--_inner) var(--_outer); }
.cui-button--split:not(.has-segment) .cui-button__label-wrap { border-radius: var(--_outer); }
.cui-button--split .cui-button__segment { align-self: auto; border: 0; border-radius: var(--_inner) var(--_outer) var(--_outer) var(--_inner);
  min-width: var(--_seg); padding: 0 var(--cui-space-xs); }
.cui-button--split .cui-button__overlay { position: absolute; right: -8px; top: -8px; width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--cui-color-text-on-brand) 30%, transparent); pointer-events: none; }
/* pressed: segments darken, the track keeps its colour */
.cui-button--split:not([disabled]):active, .cui-button--split.is-pressed { background: var(--_track);
  --_sbg: color-mix(in srgb, var(--_bg) 92%, black); }
.cui-button--split:not([disabled]):active .cui-button__label-wrap, .cui-button--split.is-pressed .cui-button__label-wrap,
.cui-button--split:not([disabled]):active .cui-button__segment, .cui-button--split.is-pressed .cui-button__segment {
  outline-color: color-mix(in srgb, var(--_sborder) 92%, black); }
.cui-button--split[disabled], .cui-button--split.is-disabled { background: var(--_track); }
.cui-button--split.cui-button--primary[disabled], .cui-button--split.cui-button--primary.is-disabled,
.cui-button--split.cui-button--link[disabled], .cui-button--split.cui-button--link.is-disabled { --_sborder: transparent; }
/* link: transparent segments (Dart look) stay transparent when pressed/disabled */
/* danger: solid danger segments on a danger-muted track, own size (54 high, 44 count, lg/md padding, iconLg); disabled = 50% dim */
.cui-button.cui-button--split-danger { --_bg: var(--cui-color-surface-bg-danger); --_fg: var(--cui-color-text-on-brand);
  --_track: var(--cui-color-surface-bg-danger-muted); --_h: 54px; --_px: var(--cui-space-lg); --_py: var(--cui-space-md);
  --_gap: var(--cui-space-sm); --_icon: var(--cui-size-icon-lg); --_seg: 44px; --_sborder: transparent; }
.cui-button.cui-button--split-danger[disabled], .cui-button.cui-button--split-danger.is-disabled { --_bg: var(--cui-color-surface-bg-danger);
  --_fg: var(--cui-color-text-on-brand); --_sborder: transparent; opacity: .5; }
.cui-button.cui-button--split-danger .cui-button__label { font-family: var(--cui-type-body-md-semi-family); font-size: var(--cui-type-body-md-semi-size);
  font-weight: var(--cui-type-body-md-semi-weight); letter-spacing: var(--cui-type-body-md-semi-spacing); line-height: round(var(--cui-type-body-md-semi-line), 1px); }
.cui-button.cui-button--split-danger .cui-button__segment { font-size: var(--cui-type-body-md-semi-size); line-height: round(var(--cui-type-body-md-semi-line), 1px); }
/* labelOverlay: Dart wraps content in a Stack (loose, top-start aligned) so the label sits at the segment's top-start instead of centred */
.cui-button--split .cui-button__label-wrap:has(> .cui-button__overlay) { align-items: flex-start; justify-content: flex-start; }