.flash {
  text-align: center;
  overflow: hidden;
  position: relative;

  &.auto-hide {
    animation: flashHideAnimation 1s ease 3s forwards;
    max-height: 5em;
  }

  & > div {
    margin: 0 !important;
    display: flex;
    justify-content: space-between;
  }

  & b.close:after {
    content: "\2715";
    cursor: pointer;
  }

}

@keyframes flashHideAnimation {
  0% {
    opacity: 1;
  }
  100% {
    max-height: 0;
  }
}

div.message {
  border: 1px solid var(--message-border-color);
  background: var(--message-background-color);
  color: var(--message-text-color);
  border-radius: 0.25rem;
  padding: 0.75em;
  margin: 1rem 0;

  /* &.notice {
    background: var(--message-notice-background-color);
    color: var(--message-notice-text-color);
    border-color: var(--message-notice-border-color);
  } */

  &.alert,
  &.warning {
    background: var(--message-warning-background-color);
    color: var(--message-warning-text-color);
    border-color: var(--message-warning-border-color);
  }

  &.success {
    background: var(--message-success-background-color);
    color: var(--message-success-text-color);
    border-color: var(--message-success-border-color);
  }

  &.error {
    background: var(--message-error-background-color);
    color: var(--message-error-text-color);
    border-color: var(--message-error-border-color);
  }
}


@media(max-width: 30rem) {

  .flash {
    margin: 0.5rem 1rem;
  }
}