grr-user-notification-dialog {
  .modal-body table td {
    padding: 0 !important;
  }
}

grr-user-notification-item {
  display: block;
  position: relative;

  a {
    color: $color-no-link-color;
    padding: 15px;
    display: blocK;
    border: 2px solid transparent;

    &:hover {
      cursor: default;
      color: $color-no-link-color;
      text-decoration: none;
    }
  }

  .has-link a {
    color: $color-notifications-reference;

    &:hover {
      cursor: pointer;
      color: $color-default-font;
      background: $color-notification-highlight-color;
      border: 2px solid $color-default-background;
      transition: border 0.5s ease, background-color 0.5 ease;
    }
  }

  .notification-icon i {
    position: absolute;
    left: 12px;
    width: 35px;
    font-size: 2em;
    margin-top: 5px;
    text-align: center;
    color: $color-no-link-color;
  }

  .has-link .notification-icon i {
    color: $color-infoline-color;
  }

  .notification-content {
    margin-left: 40px;
  }

  grr-timestamp {
    margin: 3px 0 0 0;
    padding: 0;
    font-size: 0.8em;
    display: block;
    color: $color-no-link-color;
  }

  .has-link {
    color: $color-infoline-color;
  }

  .pending {
    a {
      font-weight: bold;

      grr-timestamp {
        font-weight: normal;
      }
    }

    &::after {
      content: '\f069';
      position: absolute;
      left: 5px;
      top: 5px;
      font-family: FontAwesome;
      font-size: 0.75em;
      color: $color-infoline-color;
    }
  }

  .no-link-indicator {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: $color-no-link-color;
    color: $color-default-font-inverted;
    padding: 3px 5px;
    font-size: 0.8em;
  }
}
