@use "../../../styles/variables" as *;

.wcgs-settings-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	width: 360px;
	max-width: 100%;
	min-height: 0;
	border-left: 1px solid $wcgs-divider;
	background: #fff;
	will-change: transform;
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
	transition:
		transform 560ms $wcgs-ease-out,
		visibility 0s;

	// Slides out to the right, then leaves the tab order.
	&.is-collapsed {
		visibility: hidden;
		pointer-events: none;
		transform: translate3d(calc(100% + 2px), 0, 0);
		transition:
			transform 420ms $wcgs-ease-out,
			visibility 0s linear 420ms;
	}

	&__body {
		position: relative;
		min-height: 0;
		overflow-y: auto;
		overflow-x: hidden;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

// Panel header.
.wcgs-panel-header {
	position: relative;
	z-index: 6;
	padding: 14px 16px;
	border-bottom: 1px solid $wcgs-line;
	background: #fff;
	box-shadow: 0 6px 16px -6px rgba(16, 17, 20, 0);
	transition:
		box-shadow 240ms $wcgs-ease,
		border-color 240ms $wcgs-ease;

	&.is-scrolled {
		border-bottom-color: transparent;
		box-shadow: 0 6px 16px -6px rgba(16, 17, 20, 0.16);
	}

	&__title {
		flex: 1 1 auto;

		// Beats the wp-admin `.wrap h1` / `h1` rules.
		h1 {
			margin: 0;
			padding: 0;
			min-width: 0;
			// Up to 2 lines, hyphenated in the admin language, so a longer
			// translated title ("Configurações globais") stays readable next
			// to the Save button.
			display: -webkit-box;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow-wrap: anywhere;
			hyphens: auto;
			font-size: 14px;
			font-weight: 600;
			line-height: 1.3;
			letter-spacing: -0.01em;
			color: $wcgs-text;
		}
	}

	&__icon {
		width: 32px;
		height: 32px;
		flex: 0 0 32px;
		border-radius: 7px;
		background: $wcgs-accent-soft;
		color: $wcgs-accent;
	}

	&__actions {
		margin-left: auto;

		// The layout editor keeps Save and Reset in the page header.
		&.is-hidden {
			display: none;
		}
	}

	// Shown only while there are unsaved changes; grows in next to Save.
	&__reset-wrap {

		@include wcgs-reveal($ease: $wcgs-ease);
	}

	&__reset {

		@include wcgs-reset-button;
		width: 30px;
		height: 30px;
		border-radius: 4px;
		color: $wcgs-faint;
		transition: color 160ms $wcgs-ease;

		&:hover {
			color: $wcgs-text;
		}
	}

	&__tip {

		@include wcgs-tip;
		top: calc(100% + 6px);
		padding: 6px 10px;
		line-height: 18px;
		white-space: nowrap;
	}

	&__reset-wrap:hover &__tip {

		@include wcgs-tip-visible;
	}

	&__save {

		@include wcgs-reset-button;
		height: 38px;
		padding: 0 14px;
		box-sizing: border-box;
		border: 1px solid $wcgs-border-light;
		border-radius: 4px;
		background: $wcgs-bg-subtle;
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
		color: $wcgs-faint;
		cursor: default;
		transition:
			background-color 160ms $wcgs-ease,
			color 160ms $wcgs-ease,
			border-color 160ms $wcgs-ease;

		&.is-dirty {
			border-color: $wcgs-accent;
			background: $wcgs-accent;
			color: #fff;
			cursor: pointer;
		}
	}
}

// Section tabs accordion.
.wcgs-accordion {

	&__header {

		@include wcgs-reset-button;
		padding: 18px 16px;
		border-bottom: 1px solid $wcgs-line;
		border-radius: 0;
		background: #fff;
		text-align: left;
		transition: background-color 160ms $wcgs-ease;

		&.is-child {
			padding: 16px 20px 16px 32px;
			background: #fcfcfd;
		}

		&:hover,
		&.is-open {
			background-color: #efeff2;
		}

		&:focus-visible {
			box-shadow: inset $wcgs-focus-ring;
		}
	}

	&__label {
		font-size: 16px;
		font-weight: 500;
		color: $wcgs-text;
	}

	&__header.is-child &__label {
		font-size: 15px;
	}

	&__chevron {
		flex: 0 0 16px;
		color: $wcgs-muted;
		transition: transform 220ms $wcgs-ease;
	}

	&__header.is-open &__chevron {
		transform: rotate(180deg);
	}

	&__body {
		padding: 16px 16px 20px;
		border-bottom: 1px solid $wcgs-line;
		background: #fff;
	}
}

// Height animation for accordion regions.
.wcgs-collapse {
	grid-template-rows: 0fr;
	opacity: 0;
	transition:
		grid-template-rows 300ms $wcgs-ease,
		opacity 220ms $wcgs-ease;

	&.is-open {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	&__inner {
		min-height: 0;
		overflow: hidden;
	}

	&.is-settled > &__inner {
		overflow: visible;
	}
}