.announcements_wrapper {
  --alert-primary: rgb(255, 35, 35);
  --alert-surface: rgb(254 223 223);
  --warning-primary: rgb(255 186 22);
  --warning-surface: rgb(248 242 202);
  --info-primary: rgb(10, 198, 32);
  --info-surface: rgb(243 253 226);
  --border-width: 1px;
  --border-radius: 6px;
}

.announcement {
  border-radius: var(--border-radius);
}

.announcement.alert {
  background-color: var(--alert-surface);
  border: var(--alert-primary) var(--border-width) solid;
}

.announcement.alert .icon {
  color: var(--alert-primary);
}

.announcement.warning {
  background-color: var(--warning-surface);
  border: var(--warning-primary) var(--border-width) solid;
}
.announcement.warning .icon {
  color: var(--warning-primary);
}

.announcement.info {
  background-color: var(--info-surface);
  border: var(--info-primary) var(--border-width) solid;
}

.announcement.info .icon {
  color: var(--info-primary);
}