bl-flash-area {
  display: block;
}

bl-flash-message {
  position: fixed;
  top: 6px;
  right: 10px;
  margin: 0;
  padding: 0.7rem 2rem 0.7rem 1.5rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  color: white;

  &.notice {
    color: var(--color-gray-800);
    background-color: var(--color-green);
    animation: appear-then-fade 4s both;
  }

  &.warning {
    background-color: var(--warning-background-color);
    animation: appear-then-fade 6s both;
  }

  &.alert {
    background-color: var(--error-background-color);

    .close {
      position: absolute;
      top: 3px;
      right: 5px;
      margin: 0;
      padding: 0 0.5rem;
      font-size: 1.5rem;
      cursor: pointer;
      background: transparent;

      &:hover {
        background: transparent;
      }
    }
  }

  ul {
    padding: 0.5rem;
    margin: 0;

    > li {
      margin: 0.1rem;
    }
  }
}

bl-flash-message:popover-open {
  width: max-content;
  inset: unset;
  top: 5px;
  right: 5px;
}