/* bidmio-css-layer-wrapped: app (DS icon button, close X and toggle chip; standalone so no bundle budget grows — linked by templates/components/_icon_buttons_css.html in every head that loads the components bundle) */
@layer vendor, app, overrides, utilities;
@layer app {
/* ========================================
   ICON BUTTONS: .ds-icon-btn and .ds-close
   ========================================
   Owner decision 2026-11-06 ("Dva nové komponenty (odporúčam)"): one DS
   component for an icon-only button and one for the close X, instead of a
   page class per header icon, nav toggle and banner X. Markup and rules:
   docs/components/ICON_BUTTONS.md. Every one needs an aria-label (or
   aria-labelledby): tests/architecture/test_icon_button_labels.py.

   .ds-icon-btn — a ghost square button around one icon (header actions,
   layout toggles, scroll arrows). 36px on a wide screen, the 44px touch
   floor at 768px and below (the same floor as .ds-btn in
   buttons-extended.css); .ds-icon-btn--sm is 32px, --xs 24px, --lg 48px.
   --danger turns the hover red; --inverse is a light icon on a dark
   overlay (media viewers, annotation toolbar). Hover takes the header
   pill's tint. Hover and pressed keep the specificity of one class
   (:where), so a page class or a modifier such as --inverse can recolour
   them.
   .ds-close — the X of a modal, banner, chip or panel. It inherits the text
   colour of what it sits on, so it reads on a white modal and on a coloured
   banner alike; the hover adds a light overlay of that colour. */

/* Base box at zero specificity (:where), so a page class used beside it in
   the bundles (positioning, a size) keeps its own box. */
:where(.ds-icon-btn, .ds-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  border: var(--border-width) solid transparent;
  border-radius: var(--border-radius-sm);
  background: transparent;
  line-height: 1;
  cursor: pointer;
  transition: var(--transition-colors);
}

:where(.ds-icon-btn) {
  width: 2.25rem;
  height: 2.25rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.ds-icon-btn--sm {
  width: 2rem;
  height: 2rem;
  font-size: var(--font-size-xs);
}

.ds-icon-btn:where(:hover:not(:disabled)) {
  color: var(--color-brand-text);
  background: var(--color-nav-hover-bg);
  border-color: var(--color-nav-hover-border);
}

.ds-icon-btn--xs {
  width: 1.5rem;
  height: 1.5rem;
  font-size: var(--font-size-xs);
}

.ds-icon-btn--lg {
  width: 3rem;
  height: 3rem;
  font-size: var(--font-size-lg);
}

.ds-icon-btn--danger:where(:hover:not(:disabled)) {
  color: var(--color-danger-badge-text);
  background: var(--color-danger-bg);
  border-color: transparent;
}

.ds-icon-btn--inverse {
  color: var(--color-text-inverse);
}

.ds-icon-btn--inverse:where(:hover:not(:disabled)) {
  color: var(--color-text-inverse);
  background: color-mix(in srgb, var(--color-text-inverse) 18%, transparent);
  border-color: transparent;
}

.ds-icon-btn:where([aria-pressed="true"], .is-active) {
  color: var(--color-brand-text);
  background: var(--color-nav-hover-bg);
}

:where(.ds-close) {
  width: 2rem;
  height: 2rem;
  color: inherit;
  font-size: var(--font-size-lg);
  opacity: 0.85;
}

.ds-close:where(:hover:not(:disabled)) {
  opacity: 1;
  background: color-mix(in srgb, currentcolor 10%, transparent);
}

.ds-icon-btn:focus-visible,
.ds-close:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.ds-icon-btn:disabled,
.ds-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:is(.ds-icon-btn, .ds-close)[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .ds-icon-btn,
  .ds-icon-btn--sm,
  .ds-icon-btn--xs,
  .ds-close {
    min-width: var(--btn-height-mobile);
    min-height: var(--btn-height-mobile);
  }
}

/* ========================================
   CHIP: .ds-chip (toggle chip)
   ========================================
   A small pill that toggles one option on or off in a row of options
   (filters, presets, people in a planning strip). docs/components/CHIPS.md.
   The pressed look applies to .ds-chip--active and [aria-pressed="true"]
   alike, through one :where() rule, so either hook works and a page class
   kept beside the chip can still restyle it. A toggle chip carries
   aria-pressed; an icon-only chip needs an aria-label
   (tests/architecture/test_ds_chip_a11y.py). */

.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--border-radius-full);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors);
}

.ds-chip--sm {
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
}

.ds-chip:where(:hover:not(:disabled)) {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.ds-chip:where(.ds-chip--active, [aria-pressed="true"]) {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  color: var(--color-brand-text);
}

.ds-chip:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
}

.ds-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-chip[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .ds-chip,
  .ds-chip--sm {
    min-height: var(--btn-height-mobile);
  }
}
}

/* The danger menu item (a "Delete" / "Log out" row). In the utilities
   layer: page stylesheets restyle `.dropdown-menu .dropdown-item` (and its
   hover) in the app layer with more specificity, and the light-mode block in
   templates/layout/_head_init.html skips this modifier. It lives here, not in
   navigation.css, because the components bundle is at its gzip budget. */
@layer utilities {
  .ds-dropdown__item--danger,
  .ds-dropdown__item--danger :is(i, svg) {
    color: var(--color-danger-badge-text);
    -webkit-text-fill-color: var(--color-danger-badge-text);
  }

  /* Hover, focus and pressed share the red tint: the generic pressed state
     (brand fill, white text) would put red on navy. */
  .ds-dropdown__item--danger:is(:hover, :focus, :active, .active) {
    background: var(--color-danger-bg);
  }
}