@import './var.less';

:root {
  --toast-bg:rgba(255, 255, 255, 0.25);
}

@media (prefers-color-scheme: dark) {
  :root {
    --toast-bg:rgba(0, 0, 0, 0.55);
  }
}


.@{prefix}-toast {
  position: fixed;
  top: 8px;
  left: 16px;
  right: 16px;
  max-width: 475px;
  z-index: 10001;

  &__inner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    padding: 0 16px;
    background: var(--toast-bg);
    backdrop-filter: blur(24px);
    box-shadow: 0 3px 12px 0 rgba(4, 10, 26, 0.16);
    border-radius: 8px;
  }

  &-success {
    color: var(--feedback-success) !important;
  }

  &-error {
    color: var(--feedback-error) !important;
  }

  &-info {
    color: var(--brand-standard) !important;
  }

  &__txt {
    color: var(--text-primary);
    font-size: 16px;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.toast-enter-active {
  animation: ToastSlideTopIn 0.3s ease;
}

.toast-leave-active {
  animation: ToastSlideTopOut 0.3s ease;
}

@keyframes ToastSlideTopIn {
  from {
    transform: translate3d(0, -100%, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ToastSlideTopOut {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(0, calc(-100% - 16px), 0);
  }
}