/* Base Toast Styles */
.bs-toast {
  background-color: var(--bs-bg-base-elevated);
  border-top: 4px solid var(--bs-blue-base);
  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: translate(0, calc(100% + 1.5rem));
  transition-duration: 200ms;
  transition-property: transform, opacity;
  transition-timing-function: ease;
  /* Clamp width for mobile -> full screen */
  width: clamp(17rem, 100vw - 3rem, 25rem);
  z-index: 999;
}

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

/* Mobile - Toast comes up from bottom */
.bs-toast:where([data-shown]) {
  opacity: 1;
  transform: translate(0, 0);
}

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

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

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

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

.bs-toast-actions {
  /* Mobile - Buttons will be stacked */
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: flex-end;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
}

.bs-toast-actions:where([data-stacked]) {
  flex-direction: column-reverse;
}

/* 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: translate(calc(100% + 1.5rem), 0);
  }

  .bs-toast:where([data-shown]) {
    opacity: 1;
    transform: translate(0, 0);
  }

  .bs-toast-actions:where([data-stacked]) {
    flex-direction: row;
  }
}
bs-toast {
  display: block;
}