@use '../../../style/color/index.scss' as *;
@use '../../../style/utils/message/index.scss' as *;

.ver-message-container {
  position: fixed;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ver-message {
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: 25px;
  display: inline-flex;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  min-height: 45px;
  padding: 10px;
  border-radius: 4px;
  user-select: none;
  background: #ffffff;
  color: $ver-zinc-6;
  border-radius: 8px;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);

  .text {
    margin-inline: 0.5rem;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
  }
}

// type
@include messageType('success', $ver-green-6);
@include messageType('info', $ver-zinc-6);
@include messageType('error', $ver-red-6);
@include messageType('warning', $ver-orange-6);

// plain
@include messageTypePlain('success', $ver-green-1, $ver-green-5);
@include messageTypePlain('error', $ver-red-1, $ver-red-5);
@include messageTypePlain('warning', $ver-orange-1, $ver-orange-5);
@include messageTypePlain('info', $ver-zinc-1, $ver-zinc-5);

// 动画
.down-enter-active,
.down-leave-active {
  transition: all 0.5s;
}

.down-enter-from,
.down-leave-to {
  opacity: 0;
  transform: translate3d(-50%, -100px, 0);
}
