@import "../common/varible";
@import "../common/animation";

.yu-notification {
  font-family: $font-family;
  display: inline-block;
  position: fixed;
  z-index: 1000;
  & > .notice {
    width: $notification-width;
    display: block;
    background-color: #fff;
    box-sizing: border-box;
    padding: $space;
    box-shadow: $box-shadow;
    margin-bottom: $space;
    transition: all $transition-time ease;
    border-radius: $radius;
    & > .content {
      display: inline-block;
      vertical-align: top;
      position: relative;
      & > .message {
        font-size: $large;
        margin-bottom: $space-small;
      }

      & > .description {
        margin-bottom: $space-small;
        font-size: $normal;
        color: $text;
      }
    }

    & > i.icon-close {
      position: absolute;
      right: $space;
      top: $space;
    }
    & > i:not(.icon-close) {
      vertical-align: top;
      display: inline-block;
      font-size: $notification-icon-font-size;
      color: $info;
      margin-right: $space-small;
      &.icon-check-circle {
        color: $success;
      }
      &.icon-warning-circle {
        color: $warning;
      }
      &.icon-close-circle {
        color: $danger;
      }
      &.icon-information {
        color: $info;
      }
    }
  }

  &.top-right {
    top: $space-large;
    right: 0;
    & > .notice {
      transform: translateX($notification-width);
      &.active {
        transform: translateX(-$space-large);
      }
    }
  }
  &.top-left {
    top: $space-large;
    left: 0;
    & > .notice {
      transform: translateX(-$notification-width);
      &.active {
        transform: translateX($space-large);
      }
    }
  }
  &.bottom-right {
    bottom: $space-large;
    right: 0;
    & > .notice {
      transform: translateX($notification-width);
      &.active {
        transform: translateX(-$space-large);
      }
    }
  }
  &.bottom-left {
    bottom: $space-large;
    left: 0;
    & > .notice {
      transform: translateX(-$notification-width);
      &.active {
        transform: translateX($space-large);
      }
    }
  }
}