// Notification
//================================================== //

.notification {
  align-items: center;
  display: flex;
  height: 0;
  padding: 10px 15px;
  position: relative;
  z-index: 1;

  .notification-link {
    font-weight: 300;
    padding-left: 5px;
    text-decoration: underline;
  }

  .notification-icon {
    flex-shrink: 0;
    margin-right: 10px;
    top: 0;
  }

  .notification-close {
    margin-left: auto;
  }

  @mixin notification-styles($init-bkgd, $init-font, $hover-font) {
    background-color: $init-bkgd;
    color: $init-font;

    .notification-text {
      color: $init-font;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &::after {
        content: '';
        display: block;
      }
    }

    .notification-link,
    .notification-close .icon {
      color: $init-font;

      &:hover {
        color: $hover-font;
      }
    }
  }

  &.error {
    @include notification-styles(
      $notification-color-error-initial-background,
      $notification-color-error-initial-font,
      $notification-color-error-hover-font
    );
  }

  &.alert {
    @include notification-styles(
      $notification-color-alert-initial-background,
      $notification-color-alert-initial-font,
      $notification-color-alert-hover-font);
  }

  &.success {
    @include notification-styles(
      $notification-color-success-initial-background,
      $notification-color-success-initial-font,
      $notification-color-success-hover-font
    );
  }

  &.info {
    @include notification-styles(
      $notification-color-info-initial-background,
      $notification-color-info-initial-font,
      $notification-color-info-hover-font
    );
  }

  &.wrap{
    .notification-text {
      white-space: normal;
    }

    .notification-link{
      display: block;
    }
  }
}

html[dir='rtl'] {
  .notification {
    .notification-link {
      padding-right: 5px;
    }

    .notification-icon {
      margin-left: 10px;
    }

    .notification-close {
      margin-right: auto;
    }

    button.notification-close {
      margin-left: 0;
    }
  }
}