/**
 * The equipment card in the single-car page's right-hand column.
 *
 * A native <details>, so the open and closed states cost no JavaScript. The
 * marker is removed in favour of the theme's own chevron.
 */

@layer components {
	.hauto-car-equipment {
		padding: var(--wp--preset--spacing--50);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--hauto-radius-md);
		background-color: var(--wp--preset--color--base);
	}

	.hauto-car-equipment__summary {
		display: flex;
		gap: var(--wp--preset--spacing--30);
		align-items: center;
		cursor: pointer;
		list-style: none;

		&::-webkit-details-marker {
			display: none;
		}
	}

	.hauto-car-equipment__title {
		margin-inline-end: auto;
		font-size: var(--wp--preset--font-size--large);
		font-weight: 650;
	}

	.hauto-car-equipment__count {
		padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
		border-radius: var(--hauto-radius-pill);
		background-color: var(--wp--preset--color--surface-light);
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--small);
	}

	.hauto-car-equipment__summary .hauto-icon {
		transition: rotate 180ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.hauto-car-equipment[open] .hauto-car-equipment__summary .hauto-icon {
		rotate: 180deg;
	}

	.hauto-car-equipment__list {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
		gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
		margin: var(--wp--preset--spacing--40) 0 0;
		padding: 0;
		font-size: var(--wp--preset--font-size--small);
		list-style: none;
	}

	.hauto-car-equipment__item {
		display: flex;
		gap: var(--wp--preset--spacing--20);
		align-items: baseline;

		& .hauto-icon {
			align-self: flex-start;
			margin-block-start: 0.15em;
			color: var(--wp--preset--color--secondary);
			stroke-width: 2;
		}
	}
}