.notification-center {
  > .notification {
    padding: 9px 5px;
    border: none;
    color: $medium-gray;
    background: transparent;

    > .material-icons {
      font-size: 1.375rem;
      line-height: 1.375rem;
      vertical-align: middle;
    }

    > .count {
      @include notification_counter();

      &.hide {
        display: none;
      }
    }
  }

  > .notification::after {
    display: none;
  }

  .dropdown-menu {
    margin: 0;
    padding: 0;
    border-radius: 0;
    min-width: 25rem;
  }

  .notifications {
    font-size: $font-size-base;
    margin: 0;
    padding: 0;
    border-radius: 0;
    min-width: 25rem;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
    top: 42px;
    right: 5px !important;
    &:before, &:after {
      bottom: 100%;
      right: 9px;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
    }
    &:after {
      border-color: transparent;
      border-bottom-color: white;
      border-width: 7px;
      margin-right: 1px;
    }
    &:before {
      border-color: transparent;
      border-bottom-color: #bbcdd2;
      border-width: 8px;
      margin-left: -8px;
    }

    .nav {
      .nav-item {
        margin-left: 0;
        width: 33%;
        text-align: center;
      }

      .nav-link {
        color: $gray-medium;
        font-weight: $font-weight-normal;
        padding: 0.9375rem 0.9375rem 0.625rem 0.9375rem;

        &.active {
          border-top: 0;
          border-bottom: 2px solid $nav-tabs-active-link-hover-border-color;
          color: $gray-dark;
        }

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

    .tab-content {
      border-top: 0.125rem solid $gray-light;
      padding: 0;
      margin-top: -0.0625rem;

      > .tab-pane {
        height: 11.88rem;
        overflow-y: auto;

        .no-notification {
          display: none;
        }

        &.empty {
          color: $gray-medium;
          text-align: center;

          &::after {
            content: "\E7F5";
            font-family: "Material Icons";
            opacity: 0.7;
            font-size: 5.625rem;
            color: $gray-light;
          }

          > .no-notification {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: block;
            .mobile & {
              bottom: 3.125rem;
            }
          }
        }
      }

      .notif {
        display: block;
        padding: 0.625rem 0.9375rem;
        color: $gray-medium;

        .material-icons {
          vertical-align: top;
        }

        .message-notification-status {
          &.open {
            color: $brand-success;
          }

          &.closed {
            color: $brand-danger;
          }

          &.pending1, &.pending2 {
            color: $brand-secondary;
          }
        }

        strong {
          color: $gray-dark;
        }

        &:hover {
          background-color: $dropdown-link-hover-bg;
          color: $dropdown-link-hover-color;
          text-decoration: none;

          strong {
            color: $dropdown-link-hover-color;
          }
        }
      }
    }
  }
  .mobile & {
    .nav-link::before {
      font-family: 'Material Icons';
      display: block;
      font-size: 30px;
      color: $gray-dark;
    }
    #orders-tab::before {
      content: "\E8CB";
    }
    #customers-tab::before {
      content: "\E7FE";
    }
    #messages-tab::before {
      content: "\E0BE";
    }
    .no-notification {
      top: 13.75rem;
    }
  }
}