/* Base Toast Styles */
.bs-toast {
  background-color: var(--bs-white);
  border-top: 4px solid var(--bs-blue-400);
  bottom: 1.5rem;
  box-shadow: var(--bs-shadow-contentMedium);
  left: 0;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
  opacity: 0;
  position: fixed;
  right: 0;
  transform: translateY(calc(100% + 1.5rem));
  /* Clamp width for mobile -> full screen */
  width: clamp(17rem, 100vw - 3rem, 25rem);
  z-index: 999;
}

.bs-toast[data-stacked] {
  bottom: auto;
  left: auto;
  position: static;
  right: auto;
  z-index: auto;
}

/* Mobile - Toast comes up from bottom */
@keyframes slideDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100% + 1.5rem));
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(calc(100% + 1.5rem));
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Dark mode toast */
:where(.dark) .bs-toast {
  background-color: var(--bs-navy-400);
}

.bs-toast:where([data-shown]) {
  /* Small delay on load to alow for HTML element to exist */
  animation-delay: 10ms;
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-name: slideUp;
  animation-timing-function: ease;
}

.bs-toast:where([data-dismissed]) {
  animation-duration: 200ms;
  animation-fill-mode: forwards;
  animation-name: slideDown;
  animation-timing-function: ease;
}

.bs-toast :where(.bs-toast-header) {
  align-items: center;
  color: var(--bs-ink-base);
  display: flex;
  gap: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 1rem;
}

.bs-toast :where(.bs-toast-header .bs-toast-header-icon) {
  color: var(--bs-blue-400);
}

.bs-toast :where(h5) {
  font-weight: 400;
}

.bs-toast :where(.bs-toast-content) {
  border-bottom: 1px solid var(--bs-border);
  color: var(--bs-ink-light);
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
}

.bs-toast :where(.bs-toast-actions) {
  /* Mobile - Buttons will be stacked */
  display: flex;
  flex-direction: column-reverse;
  gap: 1rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
}

/* Warning Toast Styles */
.bs-toast:where([data-variant^="warning"]) {
  border-top: 4px solid var(--bs-orange-warning);
}

.bs-toast:where([data-variant^="warning"]) :where(.bs-toast-header .bs-toast-header-icon) {
  color: var(--bs-orange-warning);
}

/* Positive Toast Styles */
.bs-toast:where([data-variant^="positive"]) {
  border-top: 4px solid var(--bs-purple-400);
}

.bs-toast:where([data-variant^="positive"]) :where(.bs-toast-header .bs-toast-header-icon) {
  color: var(--bs-purple-400);
}

:where(.dark) .bs-toast:where([data-variant^="positive"]) {
  border-top: 4px solid var(--bs-purple-200);
}

:where(.dark) .bs-toast:where([data-variant^="positive"]) :where(.bs-toast-header .bs-toast-header-icon) {
  color: var(--bs-purple-200);
}

/* Negative Toast Styles */
.bs-toast:where([data-variant^="negative"]) {
  border-top: 4px solid var(--bs-red-400);
}

.bs-toast:where([data-variant^="negative"]) :where(.bs-toast-header .bs-toast-header-icon) {
  color: var(--bs-red-400);
}

@media (min-width: 440px) {
  .bs-toast {
    left: auto;
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    right: 1.5rem;
    transform: translateX(calc(100% + 1.5rem));
  }

  .bs-toast:where([data-shown]) {
    /* Small delay on load to alow for HTML element to exist */
    animation-delay: 10ms;
    animation-duration: 200ms;
    animation-fill-mode: forwards;
    animation-name: slideLeft;
    animation-timing-function: ease;
  }

  .bs-toast:where([data-dismissed]) {
    animation-duration: 200ms;
    animation-fill-mode: forwards;
    animation-name: slideRight;
    animation-timing-function: ease;
  }

  /* Non-mobile toasts come in from the right */
  @keyframes slideRight {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(calc(100% + 1.5rem));
    }
  }
  @keyframes slideLeft {
    0% {
      opacity: 0;
      transform: translateX(calc(100% + 1.5rem));
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  .bs-toast :where(.bs-toast-actions) {
    /* Non-mobile - Buttons will be side-by-side */
    flex-direction: row;
    justify-content: flex-end;
  }
}
:host {
  display: block;
}

.bs-toast-header :where(h5) {
  font-size: var(--bs-text-md);
  margin: 0;
}

.bs-toast-content :where(p) {
  margin: 0;
}