/*
  Accordion component
  
  Structure:
  .a-accordion                    - Base accordion container
  .a-accordion-summary          - Clickable summary/header (button)
  .a-accordion-expand-icon    - Expand/collapse icon (rotates on expand)
  .a-accordion-header         - Content area for title and optional subtitle
  .a-accordion-title        - Main title text
  .a-accordion-subtitle     - Optional subtitle text
  .a-accordion-trailing       - Optional trailing content (icons, avatars, etc.)
  .a-accordion-details          - Collapsible details/content area
  
  Alignment modifiers:
  .a-accordion--align-end         - Icon on right (start default)
  
  States:
  .a-accordion--expanded          - Accordion is expanded
*/

.a-accordion {
  --color: var(--lens-semantic-color-type-default);
  --border-bottom-color: var(--lens-semantic-color-ui-divider-default);
  --border-bottom-width: var(--lens-semantic-border-width-thin);
  --border-bottom-style: var(--lens-core-border-style-solid);
  color: var(--a-accordion-color, var(--color));
  border-bottom: var(--a-accordion-border-bottom-width, var(--border-bottom-width))
    var(--a-accordion-border-bottom-style, var(--border-bottom-style))
    var(--a-accordion-border-bottom-color, var(--border-bottom-color));
  &:last-of-type {
    border-bottom: none;
  }
}

.a-accordion-summary {
  --min-height: var(--a-accordion-summary-min-height, var(--lens-core-spacing-5));
  --padding: var(--a-accordion-summary-padding, var(--lens-semantic-spacing-desktop-padding-1));
  --gap: var(--a-accordion-summary-gap, var(--lens-semantic-spacing-desktop-gap-2));
  --hover-color: var(--a-accordion-summary-hover-color, var(--lens-semantic-color-type-default));
  --hover-background-color: var(
    --a-accordion-summary-hover-background-color,
    var(--lens-semantic-color-action-secondary-hover-fill)
  );
  --active-color: var(--a-accordion-summary-active-color, var(--lens-semantic-color-type-default));
  --active-background-color: var(
    --a-accordion-summary-active-background-color,
    var(--lens-semantic-color-action-secondary-active-fill)
  );
  display: flex;
  align-items: center;
  min-height: var(--min-height);
  padding: var(--padding);
  gap: var(--gap);
  width: 100%;
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-align: start;
  &:hover {
    color: var(--hover-color);
    background-color: var(--hover-background-color);
  }
  &:active {
    color: var(--active-color);
    background-color: var(--active-background-color);
  }
  &:focus-visible {
    outline: var(--lens-semantic-border-width-focus-width) solid
      var(--lens-semantic-color-ui-focus-ring);
    outline-offset: var(--lens-semantic-border-width-focus-offset);
  }
}

.a-accordion--align-end .a-accordion-summary .a-accordion-expand-icon {
  order: 1;
}

.a-accordion-expand-icon {
  --color: var(--a-accordion-expand-icon-color, var(--lens-semantic-color-type-default));
  --width: var(--a-accordion-expand-icon-width, var(--lens-core-spacing-3));
  --height: var(--a-accordion-expand-icon-height, var(--lens-core-spacing-3));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color);
  width: var(--width);
  height: var(--height);
  transform: rotate(-90deg);
  transition: transform var(--a-transition-duration) var(--a-transition-easing);
  & svg {
    width: 100%;
    height: 100%;
  }
}

.a-accordion--expanded .a-accordion-expand-icon {
  transform: rotate(0deg);
}

.a-accordion-header {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex: 1;
  min-width: 0;
}

.a-accordion-summary .a-accordion-title {
  margin: 0;
  font-weight: var(--lens-semantic-font-weight-emphasis);
}

p.a-accordion-subtitle {
  --font-size: var(--a-accordion-subtitle-font-size, var(--lens-semantic-font-text-md-font-size));
  --font-weight: var(--a-accordion-subtitle-font-weight, var(--lens-semantic-font-weight-regular));
  --line-height: var(
    --a-accordion-subtitle-line-height,
    var(--lens-semantic-font-text-md-line-height)
  );
  --letter-spacing: var(
    --a-accordion-subtitle-letter-spacing,
    var(--lens-semantic-font-text-md-letter-spacing)
  );
  --color: var(--a-accordion-subtitle-color, var(--lens-semantic-color-type-muted));
  margin: 0;
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  color: var(--color);
}

.a-accordion-trailing {
  display: flex;
  align-items: center;
  gap: var(--gap);
  margin-inline-start: auto;
}

.a-accordion-details {
  --padding-block: var(
    --a-accordion-details-padding-block,
    var(--lens-semantic-spacing-desktop-padding-1)
  );
  --padding-inline: var(
    --a-accordion-details-padding-inline,
    var(--lens-semantic-spacing-desktop-padding-2)
  );
  display: none;
  padding-block: var(--padding-block);
  padding-inline: var(--padding-inline);
  font-size: var(--lens-semantic-font-text-body-font-size);
  line-height: var(--lens-semantic-font-text-body-line-height);
  letter-spacing: var(--lens-semantic-font-text-body-letter-spacing);
}

.a-accordion--expanded .a-accordion-details {
  display: block;
}