[role="alert"] {
  position: fixed;
  width: 300px;
  right: 10px;
  float: right;
  bottom: 10px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  background-color: var(--pico-background-color);
}

[role="alert"] > [role="close"] {
  position: absolute;
  top: 0px;
  right: 10px;
  color: inherit;
}

.notice {
  color: rgb(85, 194, 30);
  border-color: rgb(44, 108, 12);
}

.info {
  color: rgb(156, 167, 250);
  border-color: rgb(29, 89, 208);
}

.error {
  color: rgb(243, 143, 121);
  border-color: rgb(175, 41, 29);
}

.warning {
  color: rgb(187, 172, 0);
  border-color: rgb(104, 95, 0);
}