.bl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bl-space-1);
  padding: var(--bl-space-1) var(--bl-space-2);
  border: var(--bl-line-width) solid var(--bl-color-border-soft);
  border-radius: var(--bl-radius-button);
  background-color: var(--bl-color-surface);
  color: var(--bl-color-text-muted);
  font-size: var(--bl-text-tiny);
  white-space: nowrap;
}

.bl-chip-strong {
  border-color: var(--bl-color-border);
  color: var(--bl-color-text);
  font-weight: 600;
}

.bl-chip-accent {
  border-color: var(--bl-color-accent-soft);
  background-color: var(--bl-color-accent-wash);
  color: var(--bl-color-accent-strong);
}

.bl-chip.is-active {
  border-color: var(--bl-color-accent);
  background-color: var(--bl-color-accent-wash);
}

.bl-chip-time {
  border-color: transparent;
  background-color: transparent;
  color: var(--bl-color-text-faint);
  font-weight: 600;
  padding: 0;
}

.bl-eyebrow {
  display: block;
  color: var(--bl-color-text-muted);
  font-size: var(--bl-text-tiny);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bl-alert {
  display: flex;
  align-items: center;
  gap: var(--bl-space-2);
  padding: var(--bl-space-2) var(--bl-space-3);
  border: var(--bl-line-width) solid var(--bl-red-line);
  border-radius: var(--bl-radius-button);
  background-color: var(--bl-red-pastel);
  color: var(--bl-color-danger);
  font-size: var(--bl-text-small);
  opacity: 1;
  transition:
    opacity var(--bl-motion-fast) var(--bl-easing),
    display var(--bl-motion-fast) var(--bl-easing) allow-discrete;
}

.bl-alert[hidden] {
  display: none;
  opacity: 0;
}

@starting-style {
  .bl-alert {
    opacity: 0;
  }
}

.bl-alert-quiet {
  border-color: var(--bl-color-border-soft);
  background-color: var(--bl-color-surface-sunken);
  color: var(--bl-color-text-muted);
}