html {
	&.mobile {
		.searcher {
			display: flex;
			width: 100%;
			height: 100%;

			overflow-y: scroll;

			.searcher_results {
				display: flex;

				width: 100%;
				height: 100%;

				overflow-y: scroll;

				.searcher_results_category {
					display: flex;
					flex-direction: column;

					padding: 0;

					gap: 5px;

					.searcher_results_category_header {
						font-size: 0.6rem;
					}

					.searcher_results_category_suggestions {
						padding: 0 15px;

						&#playlists {
							display: flex;
							flex-direction: column;

							padding: 0;

							.playlistItem {
								width: 100%;
								max-width: none;
							}
						}
					}
				}
			}
		}
	}
}

.searcher {
	position: relative;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	transition: all 0.3s ease-in-out;

	gap: 10px;

	width: 100%;

	&.small {
		.ant-input-affix-wrapper {
			padding: 7px;

			height: fit-content;

			.ant-input-prefix {
				font-size: 1rem;
			}

			.ant-input {
				font-size: 0.8rem;
			}
		}
	}

	.ant-input-affix-wrapper {
		position: sticky;

		top: 0;
		left: 0;

		display: inline-flex;
		flex-direction: row;

		align-items: center;

		padding: 0;
		margin: 0;

		min-height: 60px;
		height: 60px;
		border-radius: 10px;

		padding: 0 10px;

		background-color: var(--background-color-primary);
		border: 3px solid var(--border-color) !important;

		.ant-input-prefix {
			font-size: 2rem;

			svg {
				color: var(--text-color);
			}
		}

		.ant-input {
			height: 100%;
			color: var(--text-color);

			font-size: 1rem;

			margin: 0;
		}
	}
}

.searcher_results {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	width: 100%;
	height: fit-content;
	max-height: 70vh;

	gap: 10px;
	padding: 20px;

	border-radius: 12px;

	overflow-x: hidden;
	overflow-y: overlay;

	color: var(--text-color);
	background-color: var(--background-color-primary);
	border: 3px solid var(--border-color);

	.ant-result,
	.ant-result-title,
	.ant-result-subtitle {
		color: var(--text-color);
	}

	&.one_column {
		grid-template-columns: 1fr;
	}

	&.no_results {
		display: flex;
		flex-direction: column;

		align-items: center;
		justify-content: center;
	}

	.searcher_results_category {
		border-radius: 8px;

		height: fit-content;
		width: 100%;

		gap: 20px;

		.searcher_results_category_header {
			background-color: var(--background-color-accent);
			border-radius: 8px;
			padding: 5px 10px;

			width: fit-content;

			h1 {
				margin: 0;
			}
		}

		.searcher_results_category_suggestions {
			display: flex;
			flex-direction: column;

			gap: 10px;

			padding: 10px;

			.playlistItem {
				background-color: var(--background-color-accent);

				max-width: 300px;
				height: 80px;

				.playlistItem_cover {
					width: 80px;
					height: 80px;

					img {
						height: 80px;
						width: 80px;
					}
				}

				.playlistItem_info {
					max-width: unset;

					h1 {
						font-size: 1rem;
						white-space: break-spaces;
					}
				}
			}

			.music-track {
				background-color: var(--background-color-accent);
			}
		}

		#playlists {
			display: grid;

			grid-template-columns: 1fr 1fr 1fr;
		}
	}
}
