$notification-width: 384px;
$notification-padding-vertical: 16px;
$notification-padding-horizontal: 24px;
$notification-padding: $notification-padding-vertical $notification-padding-horizontal;
$notification-margin-bottom: 16px;

@include b(notification) {
  position: fixed;
  width: $notification-width;
  padding: $notification-padding;
  box-sizing: border-box;
  border-radius: var(--radius-md);
  right: 16px;
  background-color: var(--color-text-inverse);
  box-shadow: var(--box-shadow-dark);
  transition: opacity 0.3s, transform .3s, right .3s, top 0.4s;
  line-height: 1.5;
  overflow: hidden;

  @include e(content) {
    margin-left: 0;

    &.has-icon {
      margin-left: 45px;
    }

    @include e(close) {
      position: absolute;
      z-index: 1000;
      width: 16px;
      height: 16px;
      top: 16px;
      right: 22px;

      &:hover {
        color: rgba(0, 0, 0, .67);
      }
    }

    @include e(title) {
      padding-right: 24px;
      font-weight: normal;
      font-size: var(--font-size-lg);
      color: #1f2d3d;
      margin: 0;
    }

    @include e(custom-content) {
      font-size: var(--font-size-md);
      line-height: 21px;
      margin: 10px 0 0;
      color: #8391a5;
      text-align: justify;
    }

    @include e(icon) {
      position: absolute;
      left: 27px;
      top: 16px;
      font-size: 24px;
    }

    @include e(action-area) {
      float: right;
      margin-top: 16px;
    }
  }

  &.notification-in {
    animation-name: notification-in;
  }

  &.notification-out {
    animation-name: notification-out;
  }
}

@keyframes notification-in {
  from {
    opacity: 0;
    transform: translateX(100%);
    right: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes notification-out {
  from {
    opacity: 1;
    margin-bottom: $notification-margin-bottom;
    padding-top: $notification-padding;
    padding-bottom: $notification-padding;
    max-height: 150px;
  }

  to {
    opacity: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    max-height: 0;
  }
}