@use "sass:color";
@use "colors";
@use "breakpoints";
@use "variables";

@mixin editor-left($selector) {
	#{$selector} {

		/* Set left position when auto-fold is not on the body element. */
		left: 0;

		@include breakpoints.break-medium {
			left: variables.$admin-sidebar-width;
		}
	}

	.auto-fold #{$selector} {

		/* Auto fold is when on smaller breakpoints, nav menu auto collapses. */

		@include breakpoints.break-medium {
			left: variables.$admin-sidebar-width-collapsed;
		}

		@include breakpoints.break-large {
			left: variables.$admin-sidebar-width;
		}
	}

	/* Sidebar manually collapsed. */
	.folded #{$selector} {
		left: 0;

		@include breakpoints.break-medium {
			left: variables.$admin-sidebar-width-collapsed;
		}
	}

	/* Mobile menu opened. */
	@media (max-width: #{ (breakpoints.$break-medium) }) {
		.auto-fold .wp-responsive-open #{$selector} {
			left: variables.$admin-sidebar-width-big;
		}
	}

	/* In small screens (responsive menu expanded), there is small white space. */
	@media (max-width: #{ (breakpoints.$break-small) }) {
		.auto-fold .wp-responsive-open #{$selector} {
			margin-left: -18px;
		}
	}

	body.is-fullscreen-mode #{$selector} {
		left: 0 !important;
	}
}

@mixin select2($selector) {
	#{$selector} {
		margin: 1px;

		input[type="text"],
		input[type="text"]:focus {
			box-shadow: none;
		}

		> div[class*="control"] {
			border-radius: variables.$border-radius__input;
			border: 1px solid colors.$nab-border;
			box-shadow: inset 0 1px 2px transparent;
			min-height: 0;
			padding: 0;

			> div:first-child {
				padding-bottom: 0;
				padding-top: 0;
			}
		}

		> div[class*="control"]:nth-child(2) {
			border-color: colors.$wp-components-color-accent;
			box-shadow: 0 0 0 1px colors.$wp-components-color-accent;
		}

		[class*="control"]
			> div
			> div:last-child:not([class*="indicatorContainer"]) {
			margin: 0;
			height: 2em;
			padding: 0;

			input {
				height: 2em;
				line-height: 2;
				margin-top: -0.15em;
				margin-left: 0.15em;
			}
		}

		[class*="indicatorContainer"] {
			padding: 0 4px;
		}

		[class*="indicatorSeparator"] {
			display: none;
		}

		[class*="menu"] {
			border-radius: 0;
		}
	}
}

@mixin super-delete {
	$red: colors.$nab-text-red;
	$dark-red: color.adjust($red, $lightness: -20%);
	$darker-red: color.adjust($red, $lightness: -40%);

	background: $red;
	border-color: $dark-red;
	box-shadow: inset 0 -1px 0 $dark-red;
	color: colors.$nab-text-inverted;
	text-shadow:
		0 -1px 1px $dark-red,
		1px 0 1px $dark-red,
		0 1px 1px $dark-red,
		-1px 0 1px $dark-red;

	&:hover,
	&:active:enabled,
	&:focus:enabled {
		background: color.adjust($red, $lightness: -2%);
		border-color: $darker-red;
		box-shadow: inset 0 -1px 0 $darker-red;
		color: colors.$nab-text-inverted;
		text-shadow:
			0 -1px 1px $dark-red,
			1px 0 1px $dark-red,
			0 1px 1px $dark-red,
			-1px 0 1px $dark-red;
	}

	&:focus:enabled {
		box-shadow:
			inset 0 -1px 0 $darker-red,
			0 0 0 2px color.adjust($red, $lightness: 40%);
	}

	&:active:enabled {
		box-shadow: inset 0 1px 0 $darker-red;
	}
}