@import "../style/base";
@import "expansion-vars";

:host {
	background: $expansion-bg;
	color: $expansion-color;
	box-shadow: $expansion-elevation;
	transition: $expansion-transition;

	display: block;
	position: relative;
	text-align: left;
	outline: none;
}

:host(:not([disabled])) {
	#header {
		cursor: pointer;
	}
}

:host(:not([open]):not([disabled]):hover), :host(:not([open]):focus) {
	will-change: height, margin, box-shadow;
	transform: translateZ(0);

	#header {
		background: $expansion-header-bg-hover;
		will-change: background;
	}
}

:host([open]) {
	box-shadow: $expansion-elevation-open;
	margin: $expansion-margin-open;

	#header {
		height: $expansion-header-height-open;
	}

	#icon {
		transform: rotate(180deg);
	}
}

#header {
	padding: $expansion-header-padding;
	height: $expansion-header-height;
	transition: $expansion-header-transition;

	display: flex;
	align-items: center;
	justify-content: space-between;
	outline: none;
	user-select: none;
	position: relative;

	#title, #indicator {
		display: flex;
		align-items: center;
	}
}

#content-container {
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

#content {
	padding: $expansion-content-padding;
}

#icon {
	transition: $expansion-icon-transition;
	transform: rotate(0);
}

::slotted([slot="description"]), ::slotted([slot="title"]) {
	flex-basis: 0;
	white-space: nowrap;
}

::slotted([slot="title"]) {
	margin: $expansion-header-title-margin;
	flex-grow: 1;
}

::slotted([slot="description"]) {
	color: $expansion-header-description-color;
	flex-grow: 2;
}
