@import "theme-mixin";

::ng-deep {
  .themeMixin({
    .notifications-table {
      .notification {
        border-bottom: 1px solid @border-color-base;
      }
    }
  })
}

.notifications-table {
  width: 330px;

  ::ng-deep .ant-table {
    background: transparent;

    table {
      .ant-table-tbody {
        td {
          padding: 0;
          border: none;

          .ant-card {
            background-color: transparent;
          }
        }
      }
    }
  }

  .notification {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding-top: 3px;
    padding-bottom: 5px;
    width: 100%;

    &.read {
      cursor: initial;
    }

    .read-status {
      padding-left: 3px;
    }

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;

      .header {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;

        .date {
          margin-left: auto;
          white-space: nowrap;
        }
      }

      .body {
        display: inline-flex;
        flex-direction: row;
        padding-top: 3px;
      }
    }
  }
}

.mobile {
  :host {
    .notifications-table {
      width: 100%;
      max-width: 500px;
    }
  }
}
