@import '@vuepress-denaro/core/styles/variables.scss';

.#{$classPrefix} {
  &-message-container {
    .message {
      &.move-in {
        animation: messageMoveIn 0.3s ease-in-out;
      }

      &.move-out {
        animation: messageMoveOut 0.3s ease-in-out;
        animation-fill-mode: forwards;
      }

      background: #fff;
      margin: 10px 0;
      padding: 0 10px;
      height: 40px;
      box-shadow: 0 0 10px 0 #ccc;
      font-size: 14px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      transition:
        height 0.2s ease-in-out,
        margin 0.2s ease-in-out;

      .text {
        color: #333;
        padding: 0 20px 0 5px;
      }
    }

    position: fixed;
    left: 0;
    top: 100px;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@keyframes messageMoveOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes messageMoveIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}