bl-flash-area {
  display: block;
}

bl-flash-message {
  z-index: 100;
  margin: 6px 10px auto auto;
  padding: 0.7rem 2rem 0.7rem 1.5rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  color: white;
  box-shadow: 0 10px 20px RGBA(20% 20% 20%/0.4);

  &.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: -6px;
      right: 5px;
      margin: 0;
      padding: 0 0.8rem;
      border-radius: 50%;
      font-size: 3rem;
      cursor: pointer;
      background: transparent;

      &:hover {
        background: transparent;
      }
    }

    li.sublist-title {
      list-style: none;

      bl-flash-title {
        display: block;
        margin-top: 1em;
        font-weight: bold;
        text-transform: capitalize;
      }
    }
  }

  ul {
    padding: 0.5rem;
    margin: 0;

    > li {
      margin: 0.1rem;
    }
  }
}

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