// stylelint-disable number-max-precision, selector-max-specificity, declaration-no-important, max-nesting-depth

:root {
	// Colors
	--es-admin-accent-color-default: #3858E9;
	--es-admin-pure-white: #FFFFFF;
	--es-admin-pure-black: #000000;
	--es-admin-gray-50: #FAFAFA;
	--es-admin-gray-100: #F7F7F7;
	--es-admin-gray-200: #F0F0F0;
	--es-admin-gray-250: #EBEBEB;
	--es-admin-gray-300: #E6E6E6;
	--es-admin-gray-400: #CCCCCC;
	--es-admin-gray-500: #AAAAAA;
	--es-admin-gray-600: #A0A0A0;
	--es-admin-gray-700: #888888;
	--es-admin-gray-750: #757575;
	--es-admin-gray-800: #777777;
	--es-admin-gray-850: #333333;
	--es-admin-gray-900: #1E1E1E;
	--es-admin-gray-950: #111111;
	--es-admin-red-500: #CF2E2E;
	--es-admin-on-red-500: #FFFFFF;
	--es-admin-yellow-500: #FF6900;
	--es-admin-on-yellow-500: #FFFFFF;
	--es-admin-green-500: #4CAF50;
	--es-admin-on-green-500: #FFFFFF;
	--es-admin-blue-500: #0693E3;
	--es-admin-on-blue-500: #FFFFFF;
	--es-admin-blue-gray-50: #ECEFF1;
	--es-admin-on-blue-gray-50: #263238;
	--es-admin-cool-gray-50: #F8F8F9;
	--es-admin-cool-gray-100: #E9EBEC;
	--es-admin-cool-gray-200: #DFE1E3;
	--es-admin-cool-gray-300: #D7DADE;
	--es-admin-cool-gray-400: #B6BBC0;
	--es-admin-cool-gray-450: #89929A;
	--es-admin-cool-gray-500: #6C7781;
	--es-admin-cool-gray-600: #515961;
	--es-admin-cool-gray-650: #444B51;
	--es-admin-cool-gray-700: #3B4147;
	--es-admin-cool-gray-800: #262A2D;
	--es-admin-cool-gray-900: #202427;
	--es-admin-eightshift-50: #F8FFFF;
	--es-admin-eightshift-500: #0D3636;

	// Border radii.
	--es-component-border-radius-sm: 3px;
	--es-component-border-radius-md: 4px;
	--es-component-border-radius-lg: 6px;
	--es-component-border-radius-xl: 9px;
	--es-component-border-radius-full: 100rem;

	// Eases
	// Source: https://easings.net/
	--es-ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	--es-ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
	--es-ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
	--es-ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
	--es-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
	--es-ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
	--es-ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
	--es-ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
	--es-ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
	--es-ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
	--es-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
	--es-ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
	--es-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
	--es-ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
	--es-ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
	--es-ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--es-ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
	--es-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
	--es-ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
	--es-ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
	--es-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
	--es-ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
	--es-ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
	--es-ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
	--es-admin-ease-out-cubic: var(--es-ease-out-cubic);
}

body {
	// Panel body title with icon in front.
	// Must have the title wrapped in a <span>!
	.es-panel-title {
		> .components-panel__body-title {
			> .components-panel__body-toggle {
				display: flex;
				align-items: center;
				flex-direction: row-reverse !important;
				gap: 0.5rem;

				span {
					margin-right: auto !important;
				}

				svg:not(span svg) {
					margin: 0 !important;
					color: var(--es-admin-panel-title, var(--es-admin-gray-750));
					height: 1.25rem !important;
					width: 1.25rem !important;
				}
			}
		}

		i {
			line-height: 0;
		}
	}

	// Panel body without title.
	.es-panel-standalone {
		.components-base-control.components-toggle-control {
			margin-bottom: 0;

			.components-base-control__field {
				margin-bottom: 0;
			}
		}
	}

	// Input error text style.
	.es-input-error {
		color: var(--es-admin-input-error, var(--es-admin-red-500));
		font-size: 0.85rem;
		font-weight: 500;
	}

	// Simple button row/toolbar.
	.es-simple-editor-button-row {
		display: flex;
		gap: 0.5rem;
		margin-bottom: 0.5rem;
	}

	// Match WP button size or border to WP input field height/border-color.
	.es-input-matched-button-size {
		min-height: 1.875rem !important;
		min-width: 1.875rem !important;
		height: 1.875rem !important;
		width: 1.875rem !important;
	}

	.es-input-matched-slight-button-border {
		border-radius: var(--es-component-border-radius-md);

		&:not(.is-pressed) {
			box-shadow: inset 0 0 0 1px var(--es-admin-gray-400);

			&:hover {
				box-shadow: inset 0 0 0 1px var(--es-admin-cool-gray-500);
			}
		}
	}

	// Remove outline on WP buttons (e.g. when using 'isDestructive' when you want no border).
	.es-button-no-outline {
		box-shadow: inset 0 0 0 1px transparent !important;
	}

	// Decorative/unselectable text.
	.es-decorative-text {
		opacity: 0.6;
		user-select: none;
	}

	// Fix fancy use toggle spacing.
	.es-panel-text-divider.es-icon-toggle.es-icon-toggle--reverse {
		& > .components-base-control__field {
			margin-bottom: 0.2rem;
		}
	}

	// Style for labels which are not contained inside BaseControl.
	.es-label-flex {
		display: flex;
		align-items: center;
		gap: 0.5rem;

		svg {
			height: 1.5rem;
			width: 1.5rem;
			margin: 0 !important;
			flex-shrink: 0;

			&:not(button svg) {
				color: var(--es-admin-label-flex-svg, var(--es-admin-cool-gray-500));
			}
		}

		&.has-monochrome-icon,
		&.has-muted-icon {
			svg:not(button svg) {
				color: var(--es-admin-cool-gray-450);
			}
		}
	}

	// Add this class to any custom Responsive sub-element that should be inset when not expanded.
	.es-responsive-inset {} // stylelint-disable-line

	// PanelBody title muted text.
	.es-panel-body-muted {
		font-weight: normal;
		opacity: 0.6;
	}

	// Custom popover content.
	.es-popover-content {
		padding: 1rem;
		min-width: 16rem;
	}

	// Slight border for default buttons if needed.
	.es-slight-button-border:not(.is-pressed) {
		box-shadow: inset 0 0 0 1px  var(--es-admin-slight-button-border, var(--es-admin-gray-200));
	}

	// Ability to make BaseControl inline.
	.es-inline-base-control {
		> .components-base-control__field {
			display: flex;
			justify-content: space-between;
			align-items: center;
			column-gap: 1rem;

			> .components-base-control__label {
				width: var(--es-inline-base-control-label-width, max-content) !important;
				max-width: 45%;
				margin: 0 !important;
			}

			> *:not(:first-child) {
				flex-shrink: 0;
				flex-grow: 1;
				max-width: var(--es-inline-base-control-content-width, auto);
			}
		}

		&--no-bottom-space {
			margin-bottom: 0 !important;
		}
	}

	// Supporting class for animated toggle icon.
	.es-animated-toggle-icon {
		.es-toggle-icon-thumb,
		.es-toggle-icon-container {
			--transition-duration: 0.25s;
			--transition-timing-function-basic: ease-out;
			--transition-timing-function-transform: var(--es-ease-out-back);

			// stylelint-disable declaration-colon-newline-after
			transition: fill var(--transition-duration) var(--transition-timing-function-basic),
				fill-opacity var(--transition-duration) var(--transition-timing-function-basic),
				stroke var(--transition-duration) var(--transition-timing-function-basic),
				stroke-opacity var(--transition-duration) var(--transition-timing-function-basic),
				transform var(--transition-duration) var(--transition-timing-function-transform);
			// stylelint-enable declaration-colon-newline-after

			@media (prefers-reduced-motion) {
				--transition-duration: 0.01s;
				--transition-timing-function-basic: linear;
				--transition-timing-function-transform: linear;
			}
		}

		&.is-checked {
			.es-toggle-icon-thumb {
				// This should always be white.
				--es-toggle-icon-thumb-stroke: var(--es-admin-pure-white);
				--es-toggle-icon-thumb-fill: var(--es-admin-pure-white);
				--es-toggle-icon-thumb-fill-opacity: 1;

				transform: translateX(0.5rem);
			}

			.es-toggle-icon-container {
				--es-toggle-icon-container-stroke: var(--wp-admin-theme-color, var(--es-admin-accent-color-default));
				--es-toggle-icon-container-fill: var(--wp-admin-theme-color, var(--es-admin-accent-color-default));
				--es-toggle-icon-container-fill-opacity: 1;
			}
		}
	}

	// Fancy image preview for the Options panel.
	.es-image-preview {
		img {
			width: 100%;
			height: auto;
			border-radius: var(--es-component-border-radius-lg);

			margin-bottom: 0.25rem;
			border: 1px solid var(--es-admin-cool-gray-400);

			aspect-ratio: 3 / 2.25;

			object-fit: cover;
		}
	}

	// Animated y-flip arrow.
	.es-has-animated-y-flip-icon {
		svg {
			transition: {
				property: transform;
				timing-function: var(--es-ease-out-back);
				duration: 0.5s;
			}
		}

		&.is-active {
			svg {
				transform: scaleY(-1);
			}
		}
	}

	.es-animated-y-flip-icon {
		transition: {
			property: transform;
			timing-function: var(--es-ease-out-back);
			duration: 0.5s;
		}

		&.is-active {
			transform: scaleY(-1);
		}
	}

	// Animated inherit icon.
	.es-animated-inherit-icon {
		.arrow-top,
		.arrow-mid,
		.arrow-btm {
			transform-origin: center;

			transition: {
				property: transform, fill-opacity, opacity;
				timing-function: var(--es-ease-out-back), ease-out, ease-out;
				duration: 0.5s, 0.3s, 0.3s;
			}
		}

		.arrow-btm {
			fill: currentColor;
			fill-opacity: 0;
		}

		&:not(.is-inherited) {
			&:hover {
				.arrow-top {
					transform: translateY(5%);
				}

				.arrow-btm {
					transform: translateY(-5%);
				}
			}
		}

		&.is-inherited {
			.arrow-top {
				transform: translateY(32.5%);

				opacity: 0;
			}

			.arrow-mid {
				opacity: 0;
			}

			.arrow-btm {
				fill-opacity: 1;
				transform: translateY(-37.5%) scale(1.15);
			}
		}
	}

	// A11y improvements.
	@media (prefers-reduced-motion) {
		.es-animated-inherit-icon .arrow-top,
		.es-animated-inherit-icon .arrow-mid,
		.es-animated-inherit-icon .arrow-btm {
			transition-duration: 25ms !important;
		}
	}

	// Slightly thicken ES UI icon border.
	.es-has-enhanced-contrast-icon :is(circle, rect, ellipse, line, path, polygon, polyline, text, text, textPath, tref, tspan):not([stroke-width]) {
		stroke-width: 1.25;
	}

	// Options for remove top/bottom margins from InnerBlocks.
	.es-no-v-inner-blocks-gutenberg-margin {
		.block-editor-block-list__layout > .wp-block {
			&:first-child {
				margin-top: 0 !important;
			}

			&:last-child {
				margin-bottom: 0 !important;
			}
		}
	}

	.es-no-h-inner-blocks-gutenberg-margin {
		.block-editor-block-list__layout > .wp-block {
			margin-top: 0 !important;
			margin-bottom: 0 !important;
		}
	}
}

// Animated icons

// Use the icon with the name written here and on a parent element add a class of 'es-has-animated-icon'.
// The animation will happen on hover, focus (focus-visible),
// or when an 'is-es-icon-animated' class is applied on the parent with the 'es-has-animated-icon' class.

// icons.trashAlt
.es-has-animated-icon {
	.es-animated-trash-alt-lid,
	.es-animated-trash-alt-base {
		transition: {
			property: transform;
			timing-function: var(--es-ease-out-cubic);
			duration: 0.3s;
		}
	}

	&.is-es-icon-animated .es-animated-trash-alt-lid,
	&:focus-visible .es-animated-trash-alt-lid,
	&:hover .es-animated-trash-alt-lid {
		transform: rotate(15deg) translate(1.125px, -1.75px);
	}

	&.is-es-icon-animated .es-animated-trash-alt-base,
	&:focus-visible .es-animated-trash-alt-base,
	&:hover .es-animated-trash-alt-base {
		transform: translate(0, -2.25px);
	}
}


// stylelint-enable number-max-precision, selector-max-specificity, declaration-no-important, max-nesting-depth