.jodit {
	.jodit-search-wrapper {
		padding: 0 8px;

		&.search-giphy::after {
			content: '';
			display: flex;
			width: 100%;
			height: 16px;
			margin-bottom: 20px;
			background: data-uri('./assets/poweredby-giphy.png') no-repeat right;
			background-size: contain;
		}
	}

	.jodit-search-image,
	.jodit-search-gif {
		position: relative;
		width: auto;
		height: auto;

		&__search {
			position: relative;
			margin: 12px;

			input {
				padding-left: 16px;
				padding-right: 44px;
				background: #f8f8f8;
				border-radius: 8px;

				font-weight: 400;
				font-size: 14px;
				line-height: 20px;
				letter-spacing: -0.28px;
				color: #121212;

				&:focus {
					border: 1px solid #9013fe;
				}

				&::placeholder {
					color: #a7a8ab;
				}
			}

			input:focus + svg {
				path {
					fill: #121212;
				}
			}

			svg {
				position: absolute;
				top: 10px;
				right: 10px;
				width: 24px;
				height: 24px;
			}
		}

		&__search-result {
			height: 238px;
			padding-bottom: 24px;

			img {
				width: 100%;
				height: 100%;
			}

			.jodit-media {
				height: 100%;
				&-list {
					padding: 0 16px;
					height: 100%;
					overflow-y: auto;
				}

				&-empty {
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 0 10px;

					font-family: 'Poppins';
					font-style: normal;
					font-weight: 700;
					font-size: 18px;
					line-height: 22px;
					color: #242a3c;
					text-align: center;

					&::before {
						content: '';
						display: flex;
						width: 180px;
						height: 108px;
						margin-bottom: 20px;
						// background: url('assets/no-result.svg') no-repeat center;
						background: data-uri('./assets/no-result.svg') no-repeat
							center;
					}
				}
			}
		}
		&__license {
			position: fixed;
			z-index: 1;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 20px 20px;
			background-color: white;

			font-weight: 400;
			font-size: 13px;
			line-height: 18px;
			color: #a7a8ab;
			text-align: center;

			a {
				text-decoration: none;
				color: #a7a8ab;
			}
			a:visited {
				text-decoration: none;
				color: #a7a8ab;
			}
			a:hover {
				text-decoration: none;
				color: #a7a8ab;
			}
			a:focus {
				text-decoration: none;
				color: #a7a8ab;
			}
			a:hover,
			a:active {
				text-decoration: none;
				color: #a7a8ab;
			}
		}

		.search-unsplash {
			display: flex;
			justify-content: flex-end;
			font-size: 14px;
			padding-right: 24px;
			margin-bottom: 20px;

			a {
				color: inherit;
			}
		}
	}
}