:root {
  /* base look */
  --tf-toast-font-family:
    inherit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --tf-toast-border-radius: 12px;
  --tf-toast-border-width: 1px;
  --tf-toast-padding: 16px;
  --tf-toast-bg: var(--tf-toast-normal-bg-default);
  --tf-toast-color: var(--tf-toast-normal-text-default);
  --tf-toast-border-color: var(--tf-toast-normal-border-default);

  /* layout inside toast */
  --tf-toast-gap: 10px;
  --tf-toast-buttons-gap: calc(var(--tf-toast-gap) / 2);
  --tf-toast-buttons-content-gap: calc(var(--tf-toast-gap) / 2);

  /* stack padding (used for scrollable stack) */
  --tf-toast-stack-padding-top: 8px;
  --tf-toast-stack-padding-right: 8px;
  --tf-toast-stack-padding-bottom: 18px;
  --tf-toast-stack-padding-left: 0;

  /* title */
  --tf-toast-title-font-size: 14px;
  --tf-toast-title-font-weight: 600;
  --tf-toast-title-line-height: 1.25;
  --tf-toast-title-color: var(--tf-toast-color);

  /* description */
  --tf-toast-description-font-size: 13px;
  --tf-toast-description-line-height: 1.4;
  --tf-toast-description-color: var(--tf-toast-color);

  /* created at and close floating bar */
  --tf-toast-float-x: 0.4;
  --tf-toast-float-y: -0.4;

  /* created at badge */
  --tf-toast-created-at-font-size: 11px;
  --tf-toast-created-at-offset: 0;
  --tf-toast-created-at-padding-x: 8px;
  --tf-toast-created-at-border-radius: 999px;
  --tf-toast-created-at-bg: var(--tf-toast-close-bg);
  --tf-toast-created-at-border-color: var(--tf-toast-close-border-color);
  --tf-toast-created-at-color: var(--tf-toast-close-color);

  /* close button */
  --tf-toast-close-size: 18px;
  --tf-toast-close-icon-size: 12px;
  --tf-toast-close-border-width: var(--tf-toast-border-width);
  --tf-toast-close-border-radius: var(--tf-toast-border-radius);
  --tf-toast-close-border-color: var(--tf-toast-border-color);
  --tf-toast-close-color: var(--tf-toast-color);
  --tf-toast-close-bg: var(--tf-toast-bg);
  --tf-toast-close-ring-color: var(--tf-toast-close-border-color);
  --tf-toast-close-font-size: 11px;
  --tf-toast-close-offset: 40%;

  /* buttons */
  --tf-toast-button-font-size: 12px;
  --tf-toast-button-line-height: 1;
  --tf-toast-button-padding-y: 7px;
  --tf-toast-button-padding-x: 9px;
  --tf-toast-button-border-radius: 10px;
  --tf-toast-button-border-width: var(--tf-toast-border-width);
  --tf-toast-button-bg: var(--tf-toast-bg);
  --tf-toast-button-color: var(--tf-toast-color);
  --tf-toast-button-border-color: var(--tf-toast-border-color);

  /* icon */
  --tf-toast-icon-size: 24px;
  --tf-toast-icon-loading: var(--tf-toast-loading-text-default);
  --tf-toast-icon-default: var(--tf-toast-normal-text-default);
  --tf-toast-icon-success: var(--tf-toast-success-text-default);
  --tf-toast-icon-error: var(--tf-toast-error-text-default);
  --tf-toast-icon-warning: var(--tf-toast-warning-text-default);
  --tf-toast-icon-info: var(--tf-toast-info-text-default);

  /* progress bar */
  --tf-toast-progress-height: 4px;
  --tf-toast-progress-bg: color-mix(
    in srgb,
    var(--tf-toast-color) 20%,
    transparent
  );
  --tf-toast-progress-border-radius: var(--tf-toast-border-radius);
  --tf-toast-progress-bar-bg: var(--tf-toast-color);
  --tf-toast-progress-duration: 5000ms;

  /* accent presets */
  --tf-toast-normal-bg-default: #fff;
  --tf-toast-normal-border-default: #e6e8eb;
  --tf-toast-normal-text-default: #11181c;
  --tf-toast-normal-progress-bar-bg-default: var(
    --tf-toast-normal-text-default
  );
  --tf-toast-normal-progress-bg-default: color-mix(
    in srgb,
    var(--tf-toast-normal-text-default) 20%,
    transparent
  );
  --tf-toast-normal-color-default: var(--tf-toast-normal-text-default);
  --tf-toast-normal-title-color-default: var(--tf-toast-normal-text-default);
  --tf-toast-normal-description-color-default: var(
    --tf-toast-normal-text-default
  );
  --tf-toast-normal-close-bg-default: var(--tf-toast-normal-bg-default);
  --tf-toast-normal-close-border-default: var(--tf-toast-normal-border-default);
  --tf-toast-normal-close-ring-default: var(--tf-toast-normal-border-default);
  --tf-toast-normal-close-color-default: var(--tf-toast-normal-text-default);
  --tf-toast-normal-button-color-default: var(--tf-toast-normal-text-default);
  --tf-toast-normal-button-border-default: var(
    --tf-toast-normal-border-default
  );
  --tf-toast-normal-button-bg-default: transparent;
  --tf-toast-normal-created-at-bg-default: var(--tf-toast-normal-bg-default);
  --tf-toast-normal-created-at-border-default: var(
    --tf-toast-normal-border-default
  );
  --tf-toast-normal-created-at-color-default: var(--tf-toast-description-color);

  --tf-toast-loading-bg-default: hsl(48, 100%, 96%);
  --tf-toast-loading-border-default: hsl(46, 100%, 88%);
  --tf-toast-loading-text-default: hsl(40, 100%, 32%);
  --tf-toast-loading-progress-bar-bg-default: var(
    --tf-toast-loading-text-default
  );
  --tf-toast-loading-progress-bg-default: color-mix(
    in srgb,
    var(--tf-toast-loading-text-default) 20%,
    transparent
  );
  --tf-toast-loading-color-default: var(--tf-toast-loading-text-default);
  --tf-toast-loading-title-color-default: var(--tf-toast-loading-text-default);
  --tf-toast-loading-description-color-default: var(
    --tf-toast-loading-text-default
  );
  --tf-toast-loading-close-bg-default: var(--tf-toast-loading-bg-default);
  --tf-toast-loading-close-border-default: var(
    --tf-toast-loading-border-default
  );
  --tf-toast-loading-close-ring-default: var(--tf-toast-loading-border-default);
  --tf-toast-loading-close-color-default: var(--tf-toast-loading-text-default);
  --tf-toast-loading-button-color-default: var(--tf-toast-loading-text-default);
  --tf-toast-loading-button-border-default: var(
    --tf-toast-loading-border-default
  );
  --tf-toast-loading-button-bg-default: transparent;
  --tf-toast-loading-created-at-bg-default: var(--tf-toast-loading-bg-default);
  --tf-toast-loading-created-at-border-default: var(
    --tf-toast-loading-border-default
  );
  --tf-toast-loading-created-at-color-default: var(
    --tf-toast-loading-text-default
  );

  --tf-toast-success-bg-default: hsl(143, 85%, 96%);
  --tf-toast-success-border-default: hsl(145, 92%, 87%);
  --tf-toast-success-text-default: hsl(140, 100%, 27%);
  --tf-toast-success-progress-bar-bg-default: var(
    --tf-toast-success-text-default
  );
  --tf-toast-success-progress-bg-default: color-mix(
    in srgb,
    var(--tf-toast-success-text-default) 20%,
    transparent
  );
  --tf-toast-success-color-default: var(--tf-toast-success-text-default);
  --tf-toast-success-title-color-default: var(--tf-toast-success-text-default);
  --tf-toast-success-description-color-default: var(
    --tf-toast-success-text-default
  );
  --tf-toast-success-close-bg-default: var(--tf-toast-success-bg-default);
  --tf-toast-success-close-border-default: var(
    --tf-toast-success-border-default
  );
  --tf-toast-success-close-ring-default: var(--tf-toast-success-border-default);
  --tf-toast-success-close-color-default: var(--tf-toast-success-text-default);
  --tf-toast-success-button-color-default: var(--tf-toast-success-text-default);
  --tf-toast-success-button-border-default: var(
    --tf-toast-success-border-default
  );
  --tf-toast-success-button-bg-default: transparent;
  --tf-toast-success-created-at-bg-default: var(--tf-toast-success-bg-default);
  --tf-toast-success-created-at-border-default: var(
    --tf-toast-success-border-default
  );
  --tf-toast-success-created-at-color-default: var(
    --tf-toast-success-text-default
  );

  --tf-toast-info-bg-default: hsl(208, 100%, 97%);
  --tf-toast-info-border-default: hsl(221, 91%, 93%);
  --tf-toast-info-text-default: hsl(210, 92%, 45%);
  --tf-toast-info-progress-bar-bg-default: var(--tf-toast-info-text-default);
  --tf-toast-info-progress-bg-default: color-mix(
    in srgb,
    var(--tf-toast-info-text-default) 20%,
    transparent
  );
  --tf-toast-info-color-default: var(--tf-toast-info-text-default);
  --tf-toast-info-title-color-default: var(--tf-toast-info-text-default);
  --tf-toast-info-description-color-default: var(--tf-toast-info-text-default);
  --tf-toast-info-close-bg-default: var(--tf-toast-info-bg-default);
  --tf-toast-info-close-border-default: var(--tf-toast-info-border-default);
  --tf-toast-info-close-ring-default: var(--tf-toast-info-border-default);
  --tf-toast-info-close-color-default: var(--tf-toast-info-text-default);
  --tf-toast-info-button-color-default: var(--tf-toast-info-text-default);
  --tf-toast-info-button-border-default: var(--tf-toast-info-border-default);
  --tf-toast-info-button-bg-default: transparent;
  --tf-toast-info-created-at-bg-default: var(--tf-toast-info-bg-default);
  --tf-toast-info-created-at-border-default: var(
    --tf-toast-info-border-default
  );
  --tf-toast-info-created-at-color-default: var(--tf-toast-info-text-default);

  --tf-toast-warning-bg-default: hsl(49, 100%, 97%);
  --tf-toast-warning-border-default: hsl(49, 91%, 84%);
  --tf-toast-warning-text-default: hsl(31, 92%, 45%);
  --tf-toast-warning-progress-bar-bg-default: var(
    --tf-toast-warning-text-default
  );
  --tf-toast-warning-progress-bg-default: color-mix(
    in srgb,
    var(--tf-toast-warning-text-default) 20%,
    transparent
  );
  --tf-toast-warning-color-default: var(--tf-toast-warning-text-default);
  --tf-toast-warning-title-color-default: var(--tf-toast-warning-text-default);
  --tf-toast-warning-description-color-default: var(
    --tf-toast-warning-text-default
  );
  --tf-toast-warning-close-bg-default: var(--tf-toast-warning-bg-default);
  --tf-toast-warning-close-border-default: var(
    --tf-toast-warning-border-default
  );
  --tf-toast-warning-close-ring-default: var(--tf-toast-warning-border-default);
  --tf-toast-warning-close-color-default: var(--tf-toast-warning-text-default);
  --tf-toast-warning-button-color-default: var(--tf-toast-warning-text-default);
  --tf-toast-warning-button-border-default: var(
    --tf-toast-warning-border-default
  );
  --tf-toast-warning-button-bg-default: transparent;
  --tf-toast-warning-created-at-bg-default: var(--tf-toast-warning-bg-default);
  --tf-toast-warning-created-at-border-default: var(
    --tf-toast-warning-border-default
  );
  --tf-toast-warning-created-at-color-default: var(
    --tf-toast-warning-text-default
  );

  --tf-toast-error-bg-default: hsl(359, 100%, 97%);
  --tf-toast-error-border-default: hsl(359, 100%, 94%);
  --tf-toast-error-text-default: hsl(360, 100%, 45%);
  --tf-toast-error-progress-bar-bg-default: var(--tf-toast-error-text-default);
  --tf-toast-error-progress-bg-default: color-mix(
    in srgb,
    var(--tf-toast-error-text-default) 20%,
    transparent
  );
  --tf-toast-error-color-default: var(--tf-toast-error-text-default);
  --tf-toast-error-title-color-default: var(--tf-toast-error-text-default);
  --tf-toast-error-description-color-default: var(
    --tf-toast-error-text-default
  );
  --tf-toast-error-close-bg-default: var(--tf-toast-error-bg-default);
  --tf-toast-error-close-border-default: var(--tf-toast-error-border-default);
  --tf-toast-error-close-ring-default: var(--tf-toast-error-border-default);
  --tf-toast-error-close-color-default: var(--tf-toast-error-text-default);
  --tf-toast-error-button-color-default: var(--tf-toast-error-text-default);
  --tf-toast-error-button-border-default: var(--tf-toast-error-border-default);
  --tf-toast-error-button-bg-default: transparent;
  --tf-toast-error-created-at-bg-default: var(--tf-toast-error-bg-default);
  --tf-toast-error-created-at-border-default: var(
    --tf-toast-error-border-default
  );
  --tf-toast-error-created-at-color-default: var(--tf-toast-error-text-default);

  /* animations */
  --tf-toast-motion-offset: 10px;
  --tf-toast-animation-in-duration: 260ms;
  --tf-toast-animation-out-duration: 220ms;
}

.tf-toast--paused .tf-toast-progress-bar {
  animation-play-state: paused;
}

.tf-toast-item[data-position^="top-"] {
  --tf-toast-motion-offset: -10px;
}

.tf-toast-item[data-position^="bottom-"] {
  --tf-toast-motion-offset: 10px;
}

.tf-toast-motion {
  width: 100%;
  will-change: transform, opacity;
  transform-origin: center;
}

/* MOVE */
.Toastflow__animation-move {
  transition: transform var(--tf-toast-animation-in-duration)
    cubic-bezier(0.5, 1, 0.25, 1);
  will-change: transform;
}

/* ENTER */
.Toastflow__animation-enter-from > .tf-toast-motion,
.Toastflow__animation-appear-from > .tf-toast-motion {
  opacity: 0;
  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);
}

.Toastflow__animation-enter-active > .tf-toast-motion,
.Toastflow__animation-appear-active > .tf-toast-motion {
  transition:
    opacity var(--tf-toast-animation-in-duration) cubic-bezier(0.5, 1, 0.25, 1),
    transform var(--tf-toast-animation-in-duration)
      cubic-bezier(0.5, 1, 0.25, 1);
}

.Toastflow__animation-enter-to > .tf-toast-motion,
.Toastflow__animation-appear-to > .tf-toast-motion {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* LEAVE */
.Toastflow__animation-leave-from > .tf-toast-motion {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.Toastflow__animation-leave-active > .tf-toast-motion {
  transition:
    opacity var(--tf-toast-animation-out-duration) ease,
    transform var(--tf-toast-animation-out-duration) ease;
}

.Toastflow__animation-leave-to > .tf-toast-motion {
  opacity: 0;
  transform: translate3d(0, var(--tf-toast-motion-offset), 0) scale(0.96);
}

/* CLEAR ALL */
.Toastflow__animation-clearAll .tf-toast-motion {
  animation: Toastflow__clearAll-kf var(--tf-toast-animation-in-duration)
    cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* BUMP & UPDATE */
.Toastflow__animation-bump {
  animation: Toastflow__bump-kf var(--tf-toast-animation-in-duration) ease-out;
}

.Toastflow__animation-update {
  animation: Toastflow__update-kf var(--tf-toast-animation-in-duration)
    cubic-bezier(0.33, 1, 0.68, 1);
}

@keyframes Toastflow__clearAll-kf {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes Toastflow__bump-kf {
  0% {
    transform: none;
  }
  40% {
    transform: scale(1.01);
  }
  100% {
    transform: none;
  }
}

@keyframes Toastflow__update-kf {
  0% {
    transform: none;
  }
  40% {
    transform: scale(1.01);
  }
  100% {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .Toastflow__animation-move {
    transition: none;
  }

  .Toastflow__animation-enter-active .tf-toast-motion,
  .Toastflow__animation-leave-active .tf-toast-motion {
    transition: none;
  }

  .Toastflow__animation-clearAll .tf-toast-motion {
    animation: none;
  }
}