/**
 * Frontend Styles
 */
@import "./variables";

.ghostkit-accordion-item {
	// Heading.
	.ghostkit-accordion-item-heading {
		margin: var(--gkt-accordion--heading__margin);
		font-size: var(--gkt-accordion--heading__font-size);
		font-weight: var(--gkt-accordion--heading__font-weight);
		line-height: var(--gkt-accordion--heading__line-height);
		border-bottom: none;
		box-shadow: none;
	}

	a.ghostkit-accordion-item-heading,
	.ghostkit-accordion-item-heading > a,
	.ghostkit-accordion-item-heading > button {
		position: relative;
		display: flex;
		cursor: pointer;
		width: 100%;
		gap: var(--gkt-accordion--heading__gap);
		font: inherit;
		line-height: inherit;
		align-items: center;
		text-align: left;
		padding: var(--gkt-accordion--heading__padding-v) var(--gkt-accordion--heading__padding-h);
		color: inherit;
		background-color: transparent;
		border: none;
		text-decoration: none;
	}

	// Collapse.
	&-collapse {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		font-size: var(--gkt-accordion--heading-collapse-icon__font-size);
		color: inherit;
		transition: var(--gkt-accordion__transition-duration) transform var(--gkt-accordion__transition-easing);
	}

	// Content.
	&-content {
		display: none;
		padding: var(--gkt-accordion--content__padding-v) var(--gkt-accordion--content__padding-h);
	}

	// Collapsed.
	&-active > .ghostkit-accordion-item-heading .ghostkit-accordion-item-collapse {
		transform: var(--gkt-accordion--heading-collapse-icon-active__transform);
	}

	&-active > .ghostkit-accordion-item-content {
		display: block;
	}
}