@keyframes slide-down {
  0% {
    transform: translateY(-3rem);
  }
}

.flash {
  animation: slide-down 0.2s ease-in;
  border-radius: 0.5rem;
  border-style: solid;
  border-width: 1px;
  margin: 0.8rem 0.8rem 0.8rem auto;
  padding: 0.4rem 0.8rem 0.4rem 0.8rem !important;
  position: absolute;
  right: 0;
  top: 0;
  width: max-content;
}

.flash.alert,
.flash.alert svg {
  background-color: var(--alert-bg);
  border-color: var(--alert-fg);
  color: var(--alert-fg);
}

.flash.info,
.flash.info svg {
  background-color: var(--info-bg);
  border-color: var(--info-fg);
  color: var(--info-fg);
}

.flash.notice,
.flash.notice svg {
  background-color: var(--notice-bg);
  border-color: var(--notice-fg);
  color: var(--notice-fg);
}

.flash svg {
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  height: 1.3rem;
  padding: 0.2rem;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  width: 1.3rem;
}