.message-center {
  position: fixed;
  top: 0;
  left: $nav-width + 2;
  width: calc(100% - 58px);
  height: 100%;
  overflow: auto;
  background: $white;
  z-index: 100;

  .header {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 16px;
    font-weight: 500;
    font-size: 20px;
    line-height: 64px;
    border-bottom: 1px solid $color-border;

    i {
      color: $color-dark-4;
      font-size: 32px;
      cursor: pointer;
    }
  }

  .content {
    padding: 16px;
  }

  .summary {
    margin-bottom: 20px;
    color: $color-dark-6;
  }

  .message-list {
    margin: 12px;
    border: 1px solid $color-border;
    border-radius: 4px;
  }

  .message-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 42px;
    padding: 0 16px 0 8px;
    line-height: 42px;
    border-bottom: 1px solid $color-border;
    cursor: pointer;

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

    .status {
      display: inline-block;
      width: 14px;
    }

    .message-item-content {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      width: calc(100% - 125px);
    }

    &:last-child {
      border-bottom: none;
    }

    .unread-count {
      vertical-align: baseline;

      .unread-count-text {
        font-size: 12px;
        background: $red;
        color: #fff;
        padding: 0 8px;
        border-radius: 8px;
      }
    }

    .message-time {
      display: inline-block;
      width: 70px;
    }
  }
}

.site-message-drawer {
  .ant-drawer-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
}
