/*
 * .c-notice: inline messages. Flat tint, a rounded bar on the left, a round icon, a title and a text.
 * The meaning is in the words and the icon shape; the tint only supports it.
 *
 *   <div class="c-notice c-notice--info" role="status">
 *     <span class="c-notice__icon" aria-hidden="true"><span class="c-icon c-icon--info"></span></span>
 *     <div class="c-notice__body">
 *       <p class="c-notice__title">Ignoramos un filtro que no reconocimos.</p>
 *       <p class="c-notice__text">Mostramos todos los negocios de la comuna.</p>      (optional)
 *     </div>
 *   </div>
 *
 * Kinds: --info, --success, --error, --warning. Use role="status" for info/success/warning and
 * role="alert" for errors that appear after an action.
 */
.c-notice {
  --_tint: var(--md-color-tint-primary);
  --_bar: var(--md-color-primary);
  --_icon-bg: var(--md-color-primary);
  --_icon-fg: var(--md-color-on-primary);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--md-space-3);
  padding: var(--md-space-4) var(--md-space-4) var(--md-space-4) var(--md-space-5);
  border-radius: var(--md-radius-lg);
  background: var(--_tint);
  color: var(--md-color-ink);
}

.c-notice::before {
  content: '';
  position: absolute;
  inset-block: var(--md-space-3);
  inset-inline-start: var(--md-space-2);
  inline-size: 0.25rem;
  border-radius: var(--md-radius-full);
  background: var(--_bar);
}

.c-notice__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--md-radius-full);
  background: var(--_icon-bg);
  color: var(--_icon-fg);
}

.c-notice__icon .c-icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.c-notice__body {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-1);
  padding-block-start: var(--md-space-1);
}

.c-notice__title {
  font-weight: var(--md-weight-bold);
}

.c-notice__text {
  font-size: var(--md-font-size-sm);
}

.c-notice a {
  color: var(--md-color-primary);
  font-weight: var(--md-weight-bold);
}

.c-notice--success {
  --_tint: var(--md-color-tint-success);
  --_bar: var(--md-color-accent);
  --_icon-bg: var(--md-color-accent);
  --_icon-fg: var(--md-color-surface);
}

.c-notice--error {
  --_tint: var(--md-color-tint-danger);
  --_bar: var(--md-color-danger);
  --_icon-bg: var(--md-color-danger);
  --_icon-fg: var(--md-color-on-danger);
}

.c-notice--error .c-notice__title {
  color: var(--md-color-danger);
}

.c-notice--warning {
  --_tint: var(--md-color-tint-warning);
  --_bar: var(--md-color-action);
  --_icon-bg: var(--md-color-action);
  --_icon-fg: var(--md-color-on-action);
}