@use "../mixins" as *;

.expander {
	@include flex($direction: column);
	color: var(--text-primary);
	border-radius: var(--control-corner-radius);
	inline-size: 100%;
	user-select: none;
	.expander-header {
		transition: var(--fds-control-faster-duration) ease background;
	}

	&.expandable .expander-header {
		&:hover {
			background-color: var(--control-fill-secondary);
			border: 1px solid var(--fds-control-stroke-default);
		}
		&:active {
			background-color: var(--control-fill-tertiary);
			border: 1px solid var(--fds-control-stroke-default);
		}
	}

	&.direction- {
		&down {
			.expander-content {
				border-block-start: none;
				border-radius: var(--control-corner-radius);
				border-start-start-radius: 0 !important;
				border-start-end-radius: 0 !important;
			}
			&.expanded .expander-header {
				border-radius: var(--control-corner-radius);
				border-end-start-radius: 0 !important;
				border-end-end-radius: 0 !important;
			}
		}
		&up {
			.expander-content {
				border-bottom: none;
				border-radius: var(--control-corner-radius);
				border-end-start-radius: 0 !important;
				border-end-end-radius: 0 !important;
				&-anchor {
					order: -1;
				}
			}
			&.expanded .expander-header {
				border-radius: var(--control-corner-radius);
				border-start-start-radius: 0 !important;
				border-start-end-radius: 0 !important;
			}
		}
	}
	&.expanded {
		.expander {
			&-content {
				transform: none;
			}
			&-chevron svg {
				transform: rotate(180deg);
			}
		}
	}
	> h3 {
		display: contents;
	}
	&-icon {
		flex: 0 0 auto;
		color: var(--text-primary);
		inline-size: 16px;
		block-size: 16px;
		margin-inline-end: 16px;
		> :global(svg) {
			@include icon($size: 16px);
		}
	}
	&-header {
		@include flex($align: center);
		@include typography-body;
		text-align: start;
		outline: none;
		box-sizing: border-box;
		min-height: 50px;
		padding-inline-start: 16px;
		padding: 8px;
		background-clip: padding-box;
		background-color: var(--card-background-default);
		border: 1px solid var(--card-stroke-default);
		border-radius: var(--control-corner-radius);
		&-title {
			flex: 1 1 auto;
		}
		&:focus-visible {
			box-shadow: var(--focus-stroke);
		}
		&:active .expander-chevron {
			color: var(--text-secondary);
		}
	}
	&-chevron {
		@include flex($align: center, $justify: center);
		flex: 0 0 auto;
		inline-size: 32px;
		block-size: 32px;
		margin-inline-start: 20px;
		border: none;
		outline: none;
		appearance: none;
		color: var(--text-primary);
		border-radius: var(--control-corner-radius);
		background-color: var(--subtle-fill-transparent);
		&:focus-visible {
			box-shadow: var(--focus-stroke);
		}
		svg {
			inline-size: 12px;
			block-size: 12px;
			fill: currentColor;
			transition: calc(var(--control-fast-duration)) var(--control-fast-out-slow-in-easing)
				transform var(--control-fast-duration);
		}
	}
	&-content {
		@include typography-body;
		background-clip: padding-box;
		background-color: var(--card-background-secondary);
		border: 1px solid var(--card-stroke-default);
		padding: 16px;
		transition: var(--control-fast-duration) cubic-bezier(1, 1, 0, 1) transform;
		&-anchor {
			position: relative;
			max-block-size: 6.02e23vmax;
		}
	}
}