@import '~@capillarytech/cap-ui-library/styles/_variables.scss';

.channel-selection-step {
  .content-template-container {
    border-radius: 0.25rem; // 4px
    border: 1px solid $CAP_G07; // #DFE2E7
    background: $CAP_WHITE; // #FFF
    display: flex;
    width: 17.0625rem; // 273px
    height: 20rem; // 320px
    padding-top: 1rem; // 16px
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    // Configured state: remove container border (CapCustomCard has its own), grow to fit
    &--has-content {
      border: none;
      background: transparent;
      max-width: 100%;
      min-width: 0;
      height: auto;
      min-height: 0;
    }
  }

  // Configured state only - these elements exist ONLY when content is configured
  .content-items-list {
    width: 100%;
    flex: 1;

    .cap-custom-card-list-row {
      display: flex;
      flex-direction: column;
      gap: $CAP_SPACE_12;
    }

    .cap-custom-card-list-col {
      width: 100%;
    }

    .ant-card .ant-card-actions {
      & > li {
        text-align: unset;
        color: unset;
      }
      .add-incentives-button {
        margin-left: -0.5rem;
      }
    }
  }

  .cap-card-action-container {
    display: flex;
    align-items: center;
    padding: 0.625rem 0;

    &.add-incentive-action-row {
      justify-content: flex-start;
      gap: $CAP_SPACE_04;

      .optional-incentive-label {
        padding-left: 0;
        color: $CAP_G05;
      }
    }

    .add-incentive-link {
      color: $CAP_BLUE01; // Blue link per Figma (#2466eb)
      padding: 0;
      margin-left: -0.5rem;
    }
  }

  .content-card-body {
    flex-direction: column;
    gap: $CAP_SPACE_12;
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;

    .content-preview-text {
      width: 100%;
      min-width: 0;
      overflow: hidden;
      // display: -webkit-box;
      // -webkit-line-clamp: 3;
      // -webkit-box-orient: vertical;
      word-break: break-word;
      overflow-wrap: break-word;
      word-wrap: break-word;
    }

    .sender-details-row {
      width: 100%;
      margin-top: $CAP_SPACE_08;
      padding-top: $CAP_SPACE_08;
      border-top: 1px solid $CAP_G07;

      .sender-details-arrow {
        margin-left: $CAP_SPACE_08;
      }
    }
  }

  .card-title-row {
    gap: $CAP_SPACE_08;

    .channel-icon {
      color: $CAP_G04;
    }
  }

  // Empty state styles - unchanged from original
  .content-template-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 15.75rem;
    width: 100%;
    padding: 0 1rem;
    border-bottom: 1px solid $CAP_G07;
  }

  .add-content-template-button {
    margin-top: $CAP_SPACE_16;
    padding: $CAP_SPACE_12;
    padding-right: $CAP_SPACE_16;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .incentive-section {
    width: 100%;
    padding: $CAP_SPACE_08 0;
  }

  .add-incentive-button {
    /* Styles handled by CapButton with isAddBtn prop */
    display: inline-flex;
  }

  .incentive-dropdown-content {
    min-width: 12rem; // 192px
  }
}

.channel-dropdown-content {
  .ant-dropdown-menu-item {
    .channel-row {
      gap: $CAP_SPACE_08;
      .cap-icon-v2.channel-icon {
        color: $CAP_G04;
      }
      .cap-icon-v2-zalo {
        /* Override ALL hardcoded fills inside CapIcon SVGs */
        color: $CAP_G04;
        svg path,
        svg use,
        svg rect,
        svg circle,
        svg g {
          fill: currentColor !important;
        }
      }
    }
  }
}
