.ui_alert_layer {
  position: fixed;
  z-index: 200;
  top: 20px;
  left: 50%;
  display: grid;
  width: min(300px, calc(100% - 32px));
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: none;
}

.ui_alert {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--ui_color_border);
  border-radius: var(--ui_radius_sm);
  background: rgba(25, 34, 45, .88);
  color: var(--ui_color_text);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--ui_shadow_md);
  animation: ui_alert_in .2s ease both;
  pointer-events: auto;
}

.ui_alert:empty {
  display: none;
}

.ui_alert.is_leaving {
  animation: ui_alert_out .2s ease forwards;
  pointer-events: none;
}

.ui_alert_info {
  border-color: rgba(42, 104, 255, .6);
  background: rgba(42, 104, 255, .11);
}

.ui_alert_success {
  border-color: rgba(48, 164, 108, .6);
  background: rgba(48, 164, 108, .11);
}

.ui_alert_warning {
  border-color: rgba(240, 160, 0, .65);
  background: rgba(240, 160, 0, .11);
}

.ui_alert_error {
  border-color: rgba(229, 72, 77, .65);
  background: rgba(229, 72, 77, .11);
  color: #ffb4b6;
}

@keyframes ui_alert_in {
  from {
    opacity: 0;
    transform: translateY(-45px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui_alert_out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-45px);
  }
}

@media (max-width: 899px) {
  .ui_alert_layer {
    left: 10px;
    width: calc(100% - 20px);
    transform: none;
  }
}