notice-box a {
  color: inherit;
  text-decoration: underline;
}

notice-box details {
  cursor: help;
}

notice-box.inline-spacing {
  margin: 0.6em 0;
}

notice-box p {
  /* Mystery: .react p has all margin & padding removed. Didn't want
  to investigate, so added !important here. */
  padding: 0.3em 0 !important;
}

notice-box p:first-of-type {
  padding-top: 0 !important;
}

notice-box p:last-of-type {
  padding-bottom: 0 !important;
}

notice-box [slot="close"] {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: end;
}

notice-box[presentation="toast"] {
  --transition-duration: 0.6s;
  z-index: 99999;
  position: fixed;
  top: 0%;
  right: 20px;
  /* easeOutBack https://easings.net/#easeOutBack */
  transition: top var(--transition-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
  visibility: hidden;
}

notice-box[presentation="toast"].fade-in {
  top: 10%;
  visibility: visible;
}

/* For better presentation of longer messages */
notice-box {
  max-width: 550px;
}