/* Alert: a solid status banner. Page alerts, toasts and alert lines all use it.
 *
 *   <div class="alert alert-success" role="status">
 *     <img src="/images/alert-green.svg" alt=""/>
 *     <span class="alert-text">Order placed.</span>
 *     <button type="button" class="btn-close" aria-label="Close" data-dismiss="alert">
 *       <span class="icon icon-x" aria-hidden="true"></span>
 *     </button>
 *   </div>
 *
 * Variants: alert-success, alert-info, alert-warning (dark text on amber), alert-danger.
 * The status colours are the same in both brands. Use role="alert" for errors that need
 * attention now and role="status" for the rest; a container that receives toasts later
 * should carry aria-live="polite".
 * Older class names map onto these: .toast-content.success|info|warning|danger (and the
 * -without-btn forms), .alert-item.alert-green|blue|yellow|red.
 */
.alert {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  font-size: var(--cf-font-size);
  line-height: 1.4;
}

.alert,
.toast-content,
.alert-item {
  position: relative;
  border: 0;
  border-radius: var(--cf-radius);
  background: var(--cf-alert-bg, var(--cf-info));
  color: var(--cf-alert-color, var(--cf-on-primary));
}

.alert-success,
.toast-content:is(.success, .success-without-btn),
.alert-item.alert-green {
  --cf-alert-bg: var(--cf-success);
  --cf-alert-color: var(--cf-on-primary);
}

.alert-info,
.toast-content:is(.info, .info-without-btn),
.alert-item.alert-blue {
  --cf-alert-bg: var(--cf-info);
  --cf-alert-color: var(--cf-on-primary);
}

.alert-warning,
.toast-content:is(.warning, .warning-without-btn),
.alert-item.alert-yellow {
  --cf-alert-bg: var(--cf-warning);
  --cf-alert-color: var(--cf-on-warning);
}

.alert-danger,
.toast-content:is(.danger, .danger-without-btn),
.alert-item.alert-red {
  --cf-alert-bg: var(--cf-danger);
  --cf-alert-color: var(--cf-on-primary);
}

.alert > img {
  flex: none;
}

.alert-text {
  flex: 1;
  min-width: 0;
}

.alert > .btn-close {
  margin: -6px -8px -6px auto;
}

/* older markup: the close button sits in the right corner */
:is(.toast-content, .alert-item) > .btn-close {
  position: absolute;
  top: 50%;
  right: 8px;
  translate: 0 -50%;
}