/*!
 * @be-partner-labs/ds v1.8.0 — components/accordion
 * © 2026 Be Partner Labs. MIT License.
 *
 * CDN:  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@be-partner-labs/ds@1.8.0/dist/components/accordion.min.css">
 * npm:  @import "@be-partner-labs/ds/components/accordion";
 * Docs: https://ds.bepartnerlabs.com/components/accordion/
 */
@layer bp-tokens, bp-reset, bp-grid, bp-components, bp-utilities;

@layer bp-components {
	/**
	 * .bp-accordion
	 * Native <details>/<summary> accordion — zero JS required.
	 * Subtle style: transparent bg, bottom divider, brand left border when open.
	 * Public API:
	 *   --accordion-background           Background color
	 *   --accordion-radius       Border radius
	 *   --accordion-border       Item border
	 *   --accordion-accent       Left border color when open
	 */
	.bp-accordion {
		--_background: var(--accordion-background, transparent);
		--_radius: var(--accordion-radius, 0px);
		--_border: var(--accordion-border, 1px solid var(--bp-color-border));
		--_accent: var(--accordion-accent, var(--bp-primary));

		display: flex;
		flex-direction: column;
	}

	.bp-accordion__item {
		background-color: var(--_background);
		border-bottom: var(--_border);
		border-inline-start: 3px solid transparent;
		transition: border-inline-start-color var(--bp-duration-normal) var(--bp-ease);
	}

	.bp-accordion__item:first-child {
		border-top: var(--_border);
	}

	.bp-accordion__item[open] {
		border-inline-start-color: var(--_accent);
	}

	/* Hide native marker */
	.bp-accordion__summary {
		list-style: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: var(--bp-space-4) var(--bp-space-5);
		background-color: transparent;
		cursor: pointer;
		font-size: var(--bp-text-base);
		font-weight: var(--bp-font-weight-medium);
		color: var(--bp-color-text);
		gap: var(--bp-space-4);
		user-select: none;
		transition:
			color var(--bp-duration-fast) var(--bp-ease),
			background-color var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-accordion__summary::-webkit-details-marker {
		display: none;
	}

	.bp-accordion__summary::marker {
		content: none;
		display: none;
	}

	.bp-accordion__item[open] .bp-accordion__summary {
		color: var(--_accent);
		font-weight: var(--bp-font-weight-semibold);
	}

	.bp-accordion__summary:hover {
		background-color: var(--bp-color-bg-subtle);
	}

	.bp-accordion__summary:focus-visible {
		outline: none;
		box-shadow: var(--bp-focus-ring);
	}

	/* Chevron arrow — matches text color */
	.bp-accordion__summary::after {
		content: '';
		flex-shrink: 0;
		width: 1em;
		height: 1em;
		opacity: 0.5;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
		background-size: contain;
		background-repeat: no-repeat;
		transition:
			transform var(--bp-duration-normal) var(--bp-ease),
			opacity var(--bp-duration-fast) var(--bp-ease);
	}

	.bp-accordion__item[open] .bp-accordion__summary::after {
		transform: rotate(-180deg);
		opacity: 1;
	}

	/* Body panel */
	.bp-accordion__body {
		padding: var(--bp-space-2) var(--bp-space-5) var(--bp-space-5);
		color: var(--bp-color-text-muted);
		font-size: var(--bp-text-base);
		line-height: var(--bp-leading-loose);
		transition:
			opacity var(--bp-duration-normal) var(--bp-ease),
			transform var(--bp-duration-normal) var(--bp-ease);
	}

	@starting-style {
		.bp-accordion__item[open] > .bp-accordion__body {
			opacity: 0;
			transform: translateY(-0.4rem);
		}
	}

	/* cqi fluid type */
	@container (inline-size > 0) {
		.bp-accordion__summary {
			font-size: clamp(var(--bp-text-sm), 3cqi, var(--bp-text-base));
		}
		.bp-accordion__body {
			font-size: clamp(var(--bp-text-sm), 2.5cqi, var(--bp-text-base));
		}
	}
}