@charset "UTF-8";
@import "../../theme/variables";
@import "~@jereation/sass-helpers/_mixins";

.vui-notification {
  position: fixed;
  z-index: map-get($notification, z-index);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &.vui-notification-info .vui-notification-view {
    background-color: rgb(118, 159, 205);
    color: #fff;
  }
  &.vui-notification-success .vui-notification-view {
    background-color: rgb(63, 202, 67);
    color: #fff;
  }
  &.vui-notification-warning .vui-notification-view {
    background-color: rgb(251, 255, 124);
    color: rgb(146, 37, 63);
  }
  &.vui-notification-error .vui-notification-view {
    background-color: rgb(252, 80, 80);
    color: #fff;
  }
}

.vui-notification-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.vui-notification-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: .45rem 2rem;
}

.vui-notification-message {
  font-size: .6rem;
  word-wrap: break-word;
  overflow: hidden;
}

.vui-notification-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  background-color: rgba(78, 78, 78, .2);
  &:active {
    background-color: rgba(78, 78, 78, .7);
  }
  &:before, &:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 2px;
    background: #fff;
    margin-left: -25%;
    margin-top: -1px;
  }
  &:before {
    @include transform(rotate(45deg));
  }
  &:after {
    @include transform(rotate(-45deg));
  }
}

// animation
.vui-notification {
  @include transition-duration(300ms);
  .vui-notification-view {
    @include transition-property(transform);
    @include transition-duration(300ms);
  }
  &.vui-notification-enter, &.vui-notification-leave-active {
    .vui-notification-view {
      @include transform(translate3d(0, -100%, 0));
    }
  }
  &.vui-notification-enter-to {
    .vui-notification-view {
      @include transform(translate3d(0, 0, 0));
    }
  }
}