@use '../tokens/index.scss' as tokens;
@use '../mixins/index.scss' as mixins;

$accordion-font-size-sm: tokens.$font-size-9 !default;
$accordion-font-size-md: tokens.$font-size-8 !default;
$accordion-font-size-lg: tokens.$font-size-7 !default;
$accordion-font-size-xl: tokens.$font-size-6 !default;
$accordion-font-size-xxl: tokens.$font-size-5 !default;

$accordion-gap: tokens.$layout-2 !default;
$accordion-spacing: tokens.$spacer-4 !default;
$accordion-transition: transform 0.15s !default;

// Spacing and font-size

@mixin accordion-summary-sizes($font-size) {
	$icon-before-offset-size: calc($font-size - 0.375rem);
	$icon-after-offset-size: calc($font-size - 0.5rem);

	summary {
		font-size: $font-size;
	}

	&:not(.accordion-icon-end) summary {
		&::before {
			margin-block-start: $icon-before-offset-size;
		}
	}

	&.accordion-icon-end summary {
		&::after {
			margin-block-start: $icon-after-offset-size;
		}
	}
}

.accordion {
	@include accordion-summary-sizes($accordion-font-size-md);

	summary {
		display: flex;
		line-height: 1.5;
		list-style: none;
		cursor: pointer;
		padding-block: $accordion-spacing;
		gap: $accordion-gap;

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

		&::before,
		&::after {
			// Prevents chevron from being clipped when accordion title is long
			flex-shrink: 0;
		}

		.accordion-header {
			flex-grow: 1;
		}
	}

	&:not(.accordion-icon-end) {
		summary::before {
			@include mixins.chevron-right;

			transition: $accordion-transition;
		}

		&:dir(rtl) summary::before {
			@include mixins.chevron-right-rtl;
		}
	}

	&.accordion-icon-end {
		summary::after {
			@include mixins.chevron-down;

			transition: $accordion-transition;
		}

		&:dir(rtl) summary::after {
			@include mixins.chevron-down-rtl;
		}
	}

	&[open] {
		&:not(.accordion-icon-end) {
			summary::before {
				transform: mixins.$chevron-down-rotate translate(calc(mixins.$chevron-arrow-size / 2), 0);
			}

			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
			&:dir(rtl) summary::before {
				transform: mixins.$chevron-down-rotate-rtl
					translate(calc(mixins.$chevron-arrow-size / 2 * -1), 0);
			}
		}

		&.accordion-icon-end {
			summary::after {
				transform: mixins.$chevron-up-rotate-scale-xy;
			}

			/* stylelint-disable-next-line selector-max-specificity, rule-empty-line-before */
			&:dir(rtl) summary::after {
				transform: mixins.$chevron-up-rotate-scale-xy-rtl;
			}
		}
	}

	.accordion-content {
		font-size: $accordion-font-size-md;
	}

	// Sizes

	&.accordion-sm {
		@include accordion-summary-sizes($accordion-font-size-sm);
	}

	&.accordion-lg {
		@include accordion-summary-sizes($accordion-font-size-lg);
	}

	&.accordion-xl {
		@include accordion-summary-sizes($accordion-font-size-xl);
	}

	&.accordion-xxl {
		@include accordion-summary-sizes($accordion-font-size-xxl);
	}
}