/**
 * Summary meta box
 */
.wpmud {
  .wrap-wphb-notifications .box-summary.sui-summary:not(.sui-rebranded):not(.sui-unbranded):not(.sui-summary-sm) {
    @if variable-exists(summary-image) {
      @include background-2x("#{$image--path}/hb-icon", 'png', $summary-image--width, $summary-image--height, 30px center );
    }

    @include media(max-width, md) {
      background-image: unset;
    }
  }

  // Overwrite upsells.
  .sui-wrap .box-notifications-configure .sui-box-body {
    &.sui-upsell-items {

      .sui-box-body {
        padding-bottom: 0;
      }

      .sui-box-settings-row {
        padding: 0;
        padding-top: 30px;

        &.sui-upsell-row{
          padding: 30px 30px 10px;
        }

        tbody {
          box-shadow: inset 2px 0 0 #17A8E3;

          td{
            font-weight: 500;
            
          }
        }

        @include bp(desktop-small) {
          padding-top: 25px;
        }
      }   
    }
  }

  // Modals
  #notification-modal {
    .sui-box { margin-bottom: 0; }

    .sui-box-banner {
      background-color: #F2F2F2;

      img {
        max-width: 169px;
        margin-top: 30px;
      }
    }

    /**
     * Schedule slide
     */
    #notifications-slide-schedule  {
      .sui-side-tabs { margin-top: 10px; }
    }

    #select2-report-threshold-free-results {
      li:first-child{
        background-color: rgb(229 229 253);
        color: black;
        padding-top: 8px;
        padding-bottom: 8px;
        cursor:default;

        span{
            display: block;
            position: absolute;
            right: 20px;
            top: 20px;
            border: 2px solid;
            padding: 0px 6px;
            border-radius: 40%;
            letter-spacing: 1px;
            font-size: 12px;
            line-height: 2;
          }

        a {
          color: rgb(74 26 192);
          display: block;
          text-decoration: underline;
        }
      }
    }

    /**
     * Recipients slide
     */
    #enm-recipients-content,
    #notifications-slide-recipients .sui-box-body {
      .sui-recipient {
        .sui-recipient-email {
          flex-basis: 200px;
          flex-grow: 1;
        }
        & > button {
          flex-basis: 30px;
          &:last-of-type { margin-left: 15px; }
        }
      }

      /**
       * Add users & Add by email recipient list.
       */
      #notifications-add-users-content .sui-recipient-name,
      #notifications-invite-users-content .sui-recipient-name {
        display: flex;
        align-items: center;
        flex-basis: 160px;
        overflow: initial;
        white-space: pre-line;
        &:before { display: none; }

        .subscriber {
          height: 20px;
          width: 20px;
          margin-right: 10px;

          img {
            border-radius: 50%;
            width: 20px;
          }
        }
      }

      .resend-invite {
        margin-right: -15px;
      }

      /**
       * Users list
       */
      #modal-wp-user-list {
        max-height: 300px;
        overflow-x: hidden;
      }

      /**
       * Add by email
       */
      #notifications-invite-users-content {
        p.sui-description:first-of-type { margin-bottom: 20px; }
        .sui-form-field:first-of-type { margin-top: 10px; }
      }

      strong { font-size: 13px; }
    }
  }

  /**
   * Configure meta box and modal recipient icons.
   */
  .box-pro-notifications-configure,
  #notifications-add-users-content .sui-recipient-name,
  #notifications-invite-users-content .sui-recipient-name {
    .subscriber {
      display: flex;
      width: 34px;

      &.pending { @include icon( after, 'clock' ); }
      &.confirmed { @include icon( after, 'check-tick' ); }
      &.unsubscribed { @include icon( after, 'warning-alert' ); }
      &.pending:after,
      &.confirmed:after,
      &.unsubscribed:after {
        width: 12px;
        height: 12px;
        position: relative;
        top: 10px;
        left: -10px;
        border: 2px solid #fff;
        background-color: #fff;
        border-radius: 50%;
      }
      &.pending:after { color: #888; }
      &.confirmed:after { color: #1abc9c; }
      &.unsubscribed:after { color: #FF6D6D; }
    }
  }

  .box-pro-notifications-configure .subscriber {
    &.pending:after,
    &.confirmed:after,
    &.unsubscribed:after {
      top: 20px;
      left: -13px;
    }
  }

  /**
   * Configure meta box.
   */
  .box-pro-notifications-configure {
    table {
      tbody { box-shadow: inset 2px 0 0 #888888; }
      tr:last-of-type { border-bottom: 1px solid #E6E6E6; }
      tr th:last-of-type { width: 75px; }
      tr td:last-of-type { text-align: right; }

      td.notification-recipients {
        & > span {
          display: flex;
          align-items: center;
          & > a.wphb-configure-notification { margin-left: 10px; }
        }

        div.sui-tooltip {
          height: 34px;
          margin-right: 5px;
          .subscriber {
            &:last-of-type { margin-right: 0; }
            img {
              width: 34px;
              border-radius: 50%;
            }
          }
        }
      }
    }
  }
}