/**
  @prop --fw-accordion-title-font-size: Accordion title font size
  @prop --fw-accordion-title-font-weight: Accordion title font weight
  @prop --fw-accordion-title-line-height: Accordion title line height
  @prop --fw-accordion-title-background-color: Accordion title background color
  @prop --fw-accordion-title-border: Accordion title border
  @prop --fw-accordion-title-expanded-icon-color: Accordion title expanded icon color
  @prop --fw-accordion-title-collapsed-icon-color: Accordion title collapsed icon color
*/

$accordion-border-radius: var(--fw-accordion-border-radius, 8px);
$accordion-title-icon-color: #475867;

.accordion-header {
  display: flex;
  align-items: center;
  background: var(--fw-accordion-title-background-color, #ffffff);
  border: var(--fw-accordion-title-border, none);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
  border-start-end-radius: $accordion-border-radius;
  border-start-start-radius: $accordion-border-radius;
  padding-inline: 20px;
  padding-block: 10px;
  cursor: pointer;

  &.collapsed {
    border-radius: $accordion-border-radius;

    .accordion-icon {
      --fw-icon-color: var(
        --fw-accordion-title-collapsed-icon-color,
        $accordion-title-icon-color
      );
    }
  }

  &.no-bounding-box {
    border-radius: 0;
  }

  .accordion-title {
    flex-grow: 1;
    line-height: var(--fw-accordion-title-line-height, 19px);
    font-size: var(--fw-accordion-title-font-size, 16px);
    font-weight: var(--fw-accordion-title-font-weight, bold);

    &.truncate {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }

  .accordion-icon {
    flex-grow: 0;
    --fw-icon-color: var(
      --fw-accordion-title-expanded-icon-color,
      $accordion-title-icon-color
    );
  }
}
