@use "sass:map";
@use "colors";
@use "variables";

@mixin background-letters($selector) {

	@at-root #{$selector} {
		background-image: variables.$letters-map;
		background-size: variables.$letters-map-size;
		background-position: variables.$letters-map__no-letter;
	}

	@each $letter, $position in variables.$letters {

		@at-root #{$selector}--is-letter-#{$letter} {
			background-position: #{$position};
		}
	}
}

@mixin social-networks($selector) {

	@at-root #{$selector} {
		background-image: variables.$network-map;
		background-size: variables.$network-map-size;
	}

	@each $icon, $position in variables.$network-icons {

		@at-root #{$selector}--is-#{$icon} {
			background-position: #{$position} #{map.get(
					variables.$network-icon-colors,
					"colored"
				)};
		}

		@at-root #{$selector}--is-#{$icon}-disabled {
			background-position: #{$position} #{map.get(
					variables.$network-icon-colors,
					"white-on-grey"
				)};
		}

		@at-root #{$selector}--is-mini-#{$icon} {
			background-position: #{$position} #{map.get(
					variables.$network-icon-colors,
					"mini-active"
				)};
		}

		@at-root #{$selector}--is-mini-#{$icon}-disabled {
			background-position: #{$position} #{map.get(
					variables.$network-icon-colors,
					"mini-disabled"
				)};
		}
	}
}

@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.$wordpress-colors__input-border;
			box-shadow: inset 0 1px 2px colors.$color__input-box-shadow;
			min-height: 0;
			padding: 0;

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

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

		[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;
		}
	}
}