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


$rem: 20px;

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

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

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

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

.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
.notification {
  @include transition-duration(300ms);
  .notification-view {
    @include transition-property(transform);
    @include transition-duration(300ms);
  }
  &.ng-enter, &.ng-leave-active {
    .notification-view {
      @include transform(translate3d(0, -100%, 0));
    }
  }
  &.ng-enter-active {
    .notification-view {
      @include transform(translate3d(0, 0, 0));
    }
  }
}