/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

.contentoracle-ai_search_root {
	padding: 0.75rem;

	.contentoracle-ai_search_notice {
		padding: 1rem;
		width: max-content;
		position: absolute;
		top: 0;
		left: 0;

		&.contentoracle-ai_search_notice_hidden {
			display: none;
		}

		.contentoracle-ai_search_arrow {
			position: absolute;
			width: 16px;
			height: 16px;
			transform: rotate(45deg);
		}

		.contentoracle-ai_search_notice_close {
			margin-left: 0.5rem;
			float: right;

			&:hover {
				cursor: pointer;
				scale: 1.1;
			}

			&:active {
				scale: 0.9;
			}
		}
	}


	.contentoracle-ai_search_label {
		display: block;
	}

	.contentoracle-ai_search_container {
		display: flex;
		align-items: center;
		padding: 2px;
	}

	.contentoracle-ai_search_input {
		flex: 1 1 auto;
		max-width: 100%;
		padding: 1rem 0.4rem;
		font-size: var(--wp--preset--font-size--medium);
		border-width: 0;
		box-sizing: border-box;
		/* Include padding and border in the element's total width and height */

	}

	.contentoracle-ai_search_button {
		flex: 0 0 auto;
		padding: 1rem;
		font-size: var(--wp--preset--font-size--medium);
		margin-left: 0.25rem;
		border: none;
		box-sizing: border-box;
		/* Include padding and border in the element's total width and height */

		&:hover {
			cursor: pointer;
			transform: scale(1.05);
		}

		&:active {
			transform: scale(0.95);
		}
	}

	@media screen and (max-width: 782px) {

		.contentoracle-ai_search_input {
			padding: 0.5rem;
			font-size: var(--wp--preset--font-size--small);
		}

		.contentoracle-ai_search_button {
			padding: 0.5rem;
			font-size: var(--wp--preset--font-size--small);
		}
	}


}