.alert.map-alert {
  --map-alert-accent: var(--map-info-strong);
  --map-alert-bg: var(--map-info-soft);
  --map-alert-border: color-mix(in srgb, var(--map-alert-accent) 24%, var(--map-border));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.7143rem;
  padding: 1rem 1.1429rem;
  border: 1px solid var(--map-alert-border);
  border-radius: var(--map-radius-lg);
  background: var(--map-alert-bg);
  color: var(--map-text-2);
  box-shadow: none;
}

.alert.map-alert::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--map-alert-accent);
  content: "";
}

.alert.map-alert-success {
  --map-alert-accent: var(--map-green-dark);
  --map-alert-bg: color-mix(in srgb, var(--map-success-soft) 72%, var(--map-surface));
  --map-alert-border: color-mix(in srgb, var(--map-green-dark) 26%, var(--map-border));
}

.alert.map-alert-error,
.alert.map-alert-danger {
  --map-alert-accent: var(--map-red);
  --map-alert-bg: color-mix(in srgb, var(--map-danger-soft-08) 76%, var(--map-surface));
  --map-alert-border: color-mix(in srgb, var(--map-red) 25%, var(--map-border));
}

.alert.map-alert-warning {
  --map-alert-accent: var(--map-warning-strong);
  --map-alert-bg: color-mix(in srgb, var(--map-warning-soft) 80%, var(--map-surface));
  --map-alert-border: color-mix(in srgb, var(--map-yellow) 36%, var(--map-border));
}

.alert.map-alert-info {
  --map-alert-accent: var(--map-info-strong);
  --map-alert-bg: color-mix(in srgb, var(--map-info-soft) 86%, var(--map-surface));
  --map-alert-border: color-mix(in srgb, var(--map-info-strong) 24%, var(--map-border));
}

.map-alert-close {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--map-text-4);
  flex-shrink: 0;
  transition: color var(--map-transition-fast);
}

.map-alert-close:hover {
  color: var(--map-text-2);
}

.map-alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.0714rem;
  width: 1.4286rem;
  height: 1.4286rem;
  flex-shrink: 0;
  color: var(--map-alert-accent);
}

.map-alert-icon.is-success {
  color: var(--map-green-dark);
}

.map-alert-icon.is-error,
.map-alert-icon.is-danger {
  color: var(--map-red);
}

.map-alert-icon.is-warning {
  color: var(--map-warning-strong);
}

.map-alert-icon.is-info {
  color: var(--map-info-strong);
}

.map-alert-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.map-alert-title {
  margin-bottom: 0.1429rem;
  color: var(--map-text-1);
  font-size: var(--map-font-size-md);
  font-weight: 700;
}

.map-alert-message {
  color: var(--map-text-2);
  font-size: var(--map-font-size-sm);
  line-height: 1.5;
}