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

.impact-accordion-modern-main-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.impact-modern-accordion-item {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background-color: $whiteColor;
  border: 1px solid $accrodionBorderColor;
  transition: border 0.2s ease;
  @include focus-visible-ring;
  @include focus-visible-disabled;

  .impact-modern-accordion-header {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    height: 48px;
    padding: 8px 16px;
    width: 100%;
    cursor: pointer;

    .impact-modern-accordion-drag-icon {
      border-radius: 8px;

      & svg {
        width: 20px;
        height: 20px;
        color: #60697d;
        margin-top: 2px;
      }
    }

    .impact-modern-accordion-expand-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 32px;
      width: 32px;
      padding: 8px;
      border-radius: 8px;
      background-color: $textButtonPrimaryBg;
      transition: transform 0.2s ease-in-out;
      @include focus-visible-ring;

      &:hover {
        cursor: pointer;
      }

      & svg {
        width: 20px;
        height: 20px;
        fill: $textButtonFontColor;
        transition: transform 0.2s ease-in-out;
      }
    }

    .impact-modern-accordion-title {
      font-family: $fontFamily;
      font-size: $normalFontSize;
      font-weight: $semiBoldFontWeight;
      line-height: 21px;
      color: $offDarkColor;
      width: 100%;
    }
    .impact-modern-accordion-title.child-count {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .impact-modern-accordion-title.disabled {
      color: $lightGrayColor;
    }
  }

  .impact-modern-accordion-content {
    font-family: $fontFamily !important;
    font-size: $normalFontSize;
    font-weight: $normalFontWeight;
    line-height: 21px;
    color: $offDarkColor;
    padding: 0 16px; /* Initially no vertical padding */
    visibility: hidden;
    opacity: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.2s ease, padding 0.2s ease, opacity 0.2s ease;
    box-sizing: border-box; /* Ensures padding is included in height calculation */
  }

  .expand-content {
    padding: 16px; /* Add vertical padding on expansion */
    height: auto; /* Allows natural height */
    visibility: visible;
    opacity: 1;
  }
}

.impact-modern-accordion-container.disabled {
  cursor: not-allowed;

  .impact-modern-accordion-item {
    .impact-modern-accordion-header {
      pointer-events: none;
    }
    .impact-modern-accordion-expand-icon,
    .impact-modern-accordion-drag-icon {
      background-color: $disabledSecondaryBg;
    }
  }
}

.expand-content-icon {
  transform: rotate(-90deg);
}
.expand-content-icon + .impact-modern-accordion-title {
  font-weight: 800 !important;
  fill: $textButtonFontColor;
  h3 {
    font-weight: 800;
  }
}
