@import "../mixins/mixins";
@import "../config/variables";

@include b(message) {
  max-width: 280px;
  min-width: 120px;
  box-sizing: border-box;
  border-radius: 25px;
  border: none;
  position: fixed;
  left: 50%;
  top: $--size-base * 4;
  transform: translateX(-50%);
  background: $--color-text;
  transition: opacity 0.3s, transform .4s;
  overflow: hidden;
  padding: $--size-base * 4 $--size-base * 8;
  display: flex;
  align-items: center;
  color: $--color-white;
  font-size: 0;

  p {
    margin: 0;
    display: inline-block;
    width: 100%;
  }

  @include e(content) {
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    letter-spacing: 0.5px;
    font-weight: bold;
    &:focus {
      outline-width: 0;
    }
  }
}

.el-message-fade-enter,
.el-message-fade-leave-active {
  opacity: 0;
  transform: translate(-50%, -100%);
}