.kpd-toast-region {
  position: fixed;
  top: 96px;
  left: 50%;
  z-index: var(--kpd-toast-z-index, var(--resource-toast-z-index, 99999));
  display: flex;
  width: auto;
  max-width: calc(100vw - 32px);
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.kpd-toast {
  display: inline-flex;
  width: max-content;
  max-width: min(680px, calc(100vw - 32px));
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 22px;
  border: 1px solid color-mix(in srgb, var(--font-color, #1f2937) 10%, transparent);
  border-radius: 9999px;
  background: color-mix(in srgb, var(--card-bg, #fff) 86%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, #1f2937 16%, transparent);
  color: var(--font-color, #1f2937);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(0, -8px, 0) scale3d(.92, .92, 1);
  transform-origin: center center;
  transition:
    background 180ms ease,
    border-color 180ms ease;
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.kpd-toast.is-visible {
  animation: kpd-toast-pop-in 220ms cubic-bezier(.22, 1, .36, 1) both;
}

.kpd-toast.is-leaving {
  animation: kpd-toast-pop-out 280ms cubic-bezier(.4, 0, .2, 1) both;
}

.kpd-toast__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.kpd-toast__icon svg {
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  overflow: visible;
  transform: translateZ(0);
}

.kpd-toast__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  justify-content: center;
}

.kpd-toast__title {
  overflow-wrap: anywhere;
  text-align: left;
  line-height: 1.28;
}

.kpd-toast__description {
  color: color-mix(in srgb, var(--font-color, #1f2937) 62%, transparent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.kpd-toast__action {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  border: 0;
  border-radius: 9999px;
  background: color-mix(in srgb, currentColor 12%, transparent);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  padding: 0 10px;
  transition: transform 160ms ease, background 160ms ease;
}

.kpd-toast__action:hover {
  background: color-mix(in srgb, currentColor 18%, transparent);
}

.kpd-toast__action:active {
  transform: scale(.97);
}

.kpd-toast--success {
  border-color: color-mix(in srgb, #16a34a 22%, transparent);
}

.kpd-toast--success .kpd-toast__icon {
  color: #16a34a;
}

.kpd-toast--error {
  border-color: color-mix(in srgb, #dc2626 20%, transparent);
}

.kpd-toast--error .kpd-toast__icon {
  color: #dc2626;
}

.kpd-toast--warning {
  border-color: color-mix(in srgb, #d97706 22%, transparent);
}

.kpd-toast--warning .kpd-toast__icon {
  color: #d97706;
}

.kpd-toast--info .kpd-toast__icon {
  color: var(--heo-main, #2563eb);
}

html[data-theme="dark"] .kpd-toast,
body[data-theme="dark"] .kpd-toast,
html.color-scheme-dark .kpd-toast,
body.color-scheme-dark .kpd-toast,
.color-scheme-dark .kpd-toast {
  border-color: color-mix(in srgb, #e5e7eb 14%, transparent);
  background: color-mix(in srgb, #111827 82%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, #000 34%, transparent);
  color: #eef3ff;
}

html[data-theme="dark"] .kpd-toast__description,
body[data-theme="dark"] .kpd-toast__description,
html.color-scheme-dark .kpd-toast__description,
body.color-scheme-dark .kpd-toast__description,
.color-scheme-dark .kpd-toast__description {
  color: color-mix(in srgb, #eef3ff 68%, transparent);
}

@media (max-width: 640px) {
  .kpd-toast-region {
    top: 84px;
    max-width: calc(100vw - 32px);
  }

  .kpd-toast {
    max-width: calc(100vw - 32px);
    min-height: 44px;
    padding: 10px 18px;
    font-size: 14px;
  }

  .kpd-toast__icon {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .kpd-toast__icon svg {
    width: 14px;
    height: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kpd-toast {
    transform: none;
    transition: opacity 120ms ease;
  }

  .kpd-toast.is-visible {
    animation: kpd-toast-fade-in 120ms ease both;
    transform: none;
  }

  .kpd-toast.is-leaving {
    animation: kpd-toast-fade-out 120ms ease both;
    transform: none;
  }
}

.snackbar-container {
  display: none !important;
}

@keyframes kpd-toast-pop-in {
  0% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale3d(.92, .92, 1);
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

@keyframes kpd-toast-pop-out {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale3d(.94, .94, 1);
  }
}

@keyframes kpd-toast-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes kpd-toast-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}