@import "../../styles/index.scss";

.impact-notification-container {
  width: 600px;
  height: 100%;
  transition: width 200ms ease-in;
  .impact-notification-header {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #d9dde7;

    .impact-notification-heading {
      font-size: 16px;
      line-height: 20px;
      font-weight: $BoldFontWeight;
    }

    .impact-notification-header-action-btns {
      display: flex;
      gap: 12px;
      align-items: center;
      button {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: none;
        background-color: #f5f6fa;
        cursor: pointer;
      }
    }

    .collapse-icon {
      background: url("../../assets/collapse-icon-2.svg") no-repeat;
      background-size: 16px;
      background-position: center;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .expand-icon {
      background: url("../../assets/expand-icon.svg") no-repeat;
      background-size: 20px;
      background-position: center;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }

    .impact-notification-header-close-btn {
      background: url("../../assets/close-tags.svg") no-repeat;
      background-size: 24px;
      background-position: center;
      width: 16px;
      height: 16px;
      cursor: pointer;
    }
  }

  .impact-notification-body-container {
    padding: 20px 10px;
    height: calc(100% - 96px);
  }

  .notification-body-container-full {
    height: calc(100% - 40px);
  }

  .impact-notification-body-header-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: baseline;

    .ia-tabContainer {
      width: 100%;
      height: 100%;

      .impact-tab-panel {
        // border: 1px solid red;
        position: absolute;
        width: calc(100% - 32px);
        padding: 20px 6px 0 6px;
        height: calc(100% - 156px);
        overflow: hidden;

        .ia-tabPanel {
          height: 100%;
          // border: 1px solid blue;
          .MuiBox-root:has(.empty-state-container) {
            height: 100%;
          }
        }
      }
    }

    .ia-styles.ia-btn {
      flex-shrink: 0;
    }
  }

  .impact-notification-task-list-filter-container {
    position: absolute;
    top: 65px;
    width: 379px;
    right: 0;
    min-height: 128px;
    border: 1px solid #b3bdf8;
    border-radius: 12px;
    z-index: 99999;
    background: white;
    padding: 16px;
  }

  .impact-notification-task-list-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }

  .impact-notification-task-list-title {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    .impact-notification-task-list-title-text {
      font-size: 16px;
      line-height: 24px;
      font-weight: $semiBoldFontWeight;
      color: $mainFontColor;
    }
    .impact-notification-task-list-title-text-sub {
      font-size: 12px;
      line-height: 16px;
      font-weight: $normalFontWeight;
      color: $textButtonFontColor;
    }
  }

  .impact-notification-task-list-filter-item-badge {
    .MuiChip-root.impact_badges_only_label_subtle {
      border: 1px solid $destructiveSecondaryBg;
      background-color: $textButtonPrimaryBg;
      cursor: pointer;
      .MuiChip-label {
        color: $inputInfoColor;
      }
    }
    &.selected {
      .MuiChip-root.impact_badges_only_label_subtle {
        border: 1px solid $primaryColor;
        background-color: $lightBlueColor;
        cursor: pointer;
        .MuiChip-label {
          color: $primaryColor;
        }
      }
    }
  }

  .body-header-container-full {
    .ia-tabContainer {
      .impact-tab-panel {
        height: calc(100% - 100px);
      }
    }
  }

  .impact-notification-footer-container {
    position: absolute;
    bottom: 0;
    background: white;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 16px;
    height: 56px;
    border-top: 1px solid #d9dde7;
    left: 0;
    right: 0;
  }
}

.impact-notification-task-list-container {
  height: 100vh;
  // border: 1px solid blue;
  &.empty-state-container {
    height: 100%;
  }
  .impact-notification-task-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #d9dde7;
  }

  .impact-notification-task-list-search-container {
    position: relative;

    .impact-input-wrapper {
      height: 27px;
      width: 35px;
      min-width: 100% !important;
      transition: width 200ms ease-in-out;
    }

    .right-input-icon {
      position: relative;
      top: 1px;
      right: 7px;
    }
  }

  .search-expand {
    .impact-input-wrapper {
      width: 240px;
    }

    .right-input-icon {
      left: 0px;
    }
  }

  // .ia-styles.ia-btn.ia-btn-text:focus {
  //   outline: none;
  // }

  .impact-notification-task-list-chips {
    display: flex;
    gap: 4px;
    overflow: hidden;
    flex-basis: 90%;

    .impact-notification-task-list-item {
      display: flex;
      gap: 4px;
      .MuiChip-label {
        font-size: $smallFontSize !important;
      }
    }

    .impact-notification-task-list-item-hidden {
      display: flex;
      gap: 4px;
      width: 0;
      overflow: hidden;
      transition: width 200ms ease-in;
    }

    .list-item-full-width {
      width: 100%;
    }
  }

  .impact-notification-task-list-actions {
    display: flex;
    gap: 4px;
    align-items: center;
  }
}

// notification list

.impact-notification-list-container {
  padding-top: 20px;
  height: 100%;

  .impact-notification-list-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }

  .impact-notification-list-title {
    font-family: $fontFamily;
    font-size: $mediumFontSize;
    line-height: $smallComponent;
    font-weight: $semiBoldFontWeight;
    color: $mainFontColor;
  }

  .impact-notification-list-action-btns {
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;

    // button:last-child {
    //   margin-left: 8px;
    // }
  }

  .impact-notification-list-items-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: calc(100% - 280px);
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-bottom: 20px;

    .impact-notification-list-item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 8px;
      padding: 16px 12px;
      // height: 100%;
      background-color: #f8f9fb;
      border-radius: 12px;

      .impact-notification-list-item-checkbox {
        padding-top: 5px;
      }

      .impact-notification-list-item-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;

        .impact-notification-list-item-icon-line {
          width: 2px;
          height: 15px;
        }
      }

      .status-success {
        border: 1px solid $greenBadge;
        background-color: $successBackground;

        .impact-notification-list-item-icon-line {
          background-color: $greenBadge;
        }
      }

      .status-fail {
        border: 1px solid $redBadge;
        background-color: $redBadgeStrokeBg;

        .impact-notification-list-item-icon-line {
          background-color: $redBadge;
        }
      }

      .status-pending {
        border: 1px solid $yellowBadge;
        background-color: $yellowBadgeStrokeBg;

        .impact-notification-list-item-icon-line {
          background-color: $yellowBadge;
        }
      }

      .impact-notification-list-item-container {
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: flex-start;
        align-items: flex-start;
        width: 100%;
        min-width: 0;

        .impact-notification-list-item-header {
          display: flex;
          flex-direction: row;
          gap: 8px;
          justify-content: space-between;
          align-items: center;
          width: 100%;

          &:focus,
          &:hover {
            cursor: pointer;
            .impact-notification-list-item-header-right {
              width: 24%;
            }
          }

          .impact-notification-list-item-header-left,
          .impact-notification-list-item-header-right {
            display: flex;
            flex-direction: row;
            gap: 8px;
            align-items: center;
          }
          .impact-notification-list-item-title {
            font-family: $fontFamily;
            font-size: $normalFontSize;
            line-height: 21px;
            font-weight: $ExtraFontWeight;
            color: $darkColor;
          }

          .impact-notification-list-item-header-right {
            // display: none;
            width: 0;
            overflow: hidden;
            transition: width 0.4s ease-in-out;

            // Always show delete button when it exists - keep it in normal flow
            .impact-notification-list-item-delete-btn {
              display: inline-flex !important;
              opacity: 1 !important;
              visibility: visible !important;
            }

            // Hide other buttons (bookmark, download) when delete button is always visible
            .impact-notification-list-item-delete-btn ~ * {
              display: none !important;
            }
          }

          // When delete button exists, give header-right proper width
          &:has(.impact-notification-list-item-delete-btn) {
            .impact-notification-list-item-header-right {
              width: 24% !important;
            }
          }

          // Show other buttons on hover even when delete button is always visible
          &:hover {
            .impact-notification-list-item-header-right {
              .impact-notification-list-item-delete-btn ~ * {
                display: inline-flex !important;
                opacity: 1 !important;
                visibility: visible !important;
              }
            }
          }
        }

        .impact-notification-list-item-schedule {
          display: flex;
          flex-direction: row;
          gap: 8px;
          justify-content: flex-start;
          align-items: center;
          font-family: $fontFamily;
          font-size: $smallFontSize;
          line-height: 15px;
          font-weight: $normalFontWeight;
          color: $grayBadge;
        }

        .impact-notification-list-item-description {
          font-family: $fontFamily;
          font-size: $normalFontSize;
          line-height: 20px;
          font-weight: $normalFontWeight;
          color: #394960;
          min-width: 0;
          max-width: 100%;
          overflow-wrap: anywhere;
          word-break: break-word;

          span {
            color: $primaryColor;
            cursor: pointer;
          }
        }

        .impact-notification-list-item-action-btns {
          display: flex;
          flex-direction: row;
          gap: 8px;
          align-items: center;
        }
      }

      // Enable hover-on-card mode - show buttons when hovering entire card
      &.impact-notification-list-item-hover-on-card {
        // Disable the default header hover behavior
        .impact-notification-list-item-container {
          .impact-notification-list-item-header {
            &:focus,
            &:hover {
              .impact-notification-list-item-header-right {
                width: 0 !important;
              }
            }
          }
        }

        // Show buttons when entire card is hovered
        &:hover {
          .impact-notification-list-item-container {
            .impact-notification-list-item-header {
              .impact-notification-list-item-header-right {
                width: 24% !important;
              }
            }
          }
        }
      }
    }

    .list-item-selected {
      background-color: #eceefd;
    }

    .list-item-read {
      border-left: 3px solid #4259ee;
    }
  }
}

.impact-notification-list-empty-state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: calc(100% - 48px);
  .impact-notification-list-empty-state-icon {
    width: 72px;
    height: 72px;
  }
  .impact-notification-list-empty-state-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    .impact-notification-list-empty-state-title {
      font-size: 20px;
      line-height: 28px;
      font-weight: $ExtraFontWeight;
      color: $darkColor;
    }
    .impact-notification-list-empty-state-description {
      font-size: 14px;
      line-height: 21px;
      font-weight: $normalFontWeight;
      color: $inputInfoColor;
    }
  }
}

.impact-notification-container-expand {
  width: 800px;
}

.impact-notification-list-item-bookmark-btn.ia-styles.ia-btn.ia-btn-text {
  svg {
    path {
      fill: #4258ed !important;
    }
  }
}

.impact-notification-list-header .impact-notification-list-title-loader {
  .css-tqb5fd-MuiSkeleton-root {
    display: none;
  }
  .css-58ftfq-MuiSkeleton-root {
    width: 40px !important;
  }
}

.impact-notification-list-loader-container {
  .css-70qvj9 {
    position: absolute;
    top: calc(50% - 15px);
    left: calc(50% - 157px);
  }
}

.impact-notification-list-action-btns-loader {
  .css-tqb5fd-MuiSkeleton-root {
    display: none;
  }
  .css-1366qbr {
    position: absolute;
    right: calc(50% - 150px);
  }
}
