@import (reference) '../../../styles/variables';

:root {
	--height-search: 30px;
	--width-search: 320px;
	--width-search-input-box: 60%;
	--width-search-count-box: 15%;
	--transform-button-active: 0.95;
	--timeout-button-active: 0.1s;
}

.jodit-ui-search {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;

	&_sticky_true {
		position: fixed;
	}

	&__box {
		position: absolute;
		right: 0;

		display: flex;

		width: var(--width-search);
		max-width: 100vw;
		padding: calc(var(--padding-default) / 2);

		border: solid var(--color-border);
		border-width: 0 0 1px 1px;
		background-color: var(--color-panel);

		input {
			width: 100%;
			height: 100%;
			padding: 0 var(--padding-default);
			border: 0;
			margin: 0;
			background-color: transparent;
			outline: none;

			&[data-ref='replace'] {
				display: none;
			}
		}

		input:not(:focus) + input:not(:focus) {
			border-top: 1px solid var(--color-border);
		}
	}

	&__buttons,
	&__counts,
	&__inputs {
		height: var(--height-search);
	}

	&__inputs {
		width: var(--width-search-input-box);
		padding-right: calc(var(--padding-default) / 2);
	}

	&__counts {
		display: flex;
		width: var(--width-search-count-box);
		align-items: center;
		justify-content: center;
		border-left: 1px solid var(--color-border);
		color: var(--color-border);
	}

	&__buttons {
		display: flex;
		flex: 1;
		align-items: center;
		justify-content: center;
		padding-left: 0;

		button {
			width: 32%;
			height: 100%;
			border: 1px solid transparent;
			margin-right: 1%;
			background-color: transparent;

			&[data-ref='replace-btn'] {
				display: none;
				width: 100%;
				border: 1px solid var(--color-border);
				margin-top: 2px;
			}

			&:hover {
				background-color: var(--color-background-button-hover);
			}

			&:focus {
				border: 1px solid var(--color-background-selection_opacity50);
			}

			&:active {
				border: 1px solid var(--color-background-selection);
				transform: scale(
					var(--transform-button-active),
					var(--transform-button-active)
				);
			}
		}
	}

	&_empty-query_true {
		[data-ref='next'],
		[data-ref='prev'] {
			opacity: 0.5;
		}
	}

	&_replace_true {
		.jodit-ui-search__counts,
		.jodit-ui-search__inputs {
			height: calc(var(--height-search) * 2);

			input {
				height: 50%;
				transition: background-color var(--timeout-button-active) linear;

				&:focus {
					box-shadow: inset 0 0 3px 0 var(--color-border);
				}

				&[data-ref='replace'] {
					display: block;
				}
			}
		}

		.jodit-ui-search__buttons {
			flex-wrap: wrap;

			button[data-ref='replace-btn'] {
				display: block;
			}
		}
	}
}

[jd-tmp-selection] {
	background-color: aquamarine;
}