/* Bulk selection bar: the close, the count and the actions on the marked items. */
.ds-selection-bar {
  display: flex;
  align-items: center;
  gap: var(--ds-space-2);
  min-inline-size: 0;
  padding: var(--ds-space-2) var(--ds-space-3);
  border-block-start: 1px solid var(--ds-border);
  background: var(--ds-bg-pure);
}

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

/* The label hidden on a phone is absolute; anchored here, the filter base.css puts on hover and disabled cannot move it. */
.ds-selection-bar .cs-btn { position: relative; }
/* A loading button wraps its icon and name in cs-btn__label; laid out like the button, it keeps the button's size. */
.ds-selection-bar .cs-btn__label { display: inline-flex; align-items: center; gap: inherit; }

.ds-selection-bar__count {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  color: var(--ds-text);
  font-size: var(--ds-font-size-sm);
  font-weight: var(--ds-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* v5: the composer pill's height and colour, so swapping one for the other moves nothing; the actions are its 36 px circles. */
html[data-visual="v5"] .ds-selection-bar {
  gap: var(--ds-space-1);
  min-block-size: var(--ds-composer-height);
  padding: 0 calc((var(--ds-composer-height) - var(--ds-composer-control)) / 2);
  border: 0;
  border-radius: min(var(--ds-radius-full), 1.5rem);
  background-color: var(--ds-composer-field);
}

html[data-visual="v5"] .ds-selection-bar .cs-btn.cs-btn--icon {
  inline-size: var(--ds-composer-control);
  block-size: var(--ds-composer-control);
  min-inline-size: 0;
  min-block-size: 0;
}

html[data-visual="v5"] .ds-selection-bar__count {
  padding-inline: var(--ds-space-1);
  font-weight: var(--ds-weight-semibold);
}

@media (max-width: 40rem) {
  .ds-selection-bar .cs-btn:has(.ds-selection-bar__label) { aspect-ratio: 1; padding-inline: 0; }
  .ds-selection-bar__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (pointer: coarse) {
  .ds-selection-bar .cs-btn { min-inline-size: 2.75rem; min-block-size: 2.75rem; }
}