&.mobile {
	.music-explore {
		padding: 0 10px;

		.recently_played-content {
			padding: 0;
		}

		.music-explore-content {
			display: flex;
			flex-direction: column;
		}
	}
}

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

	width: 100%;

	background-color: var(--background-color-accent);

	border-radius: 12px;
}

.music-explore {
	display: flex;
	flex-direction: column;

	width: 100%;
	height: 100%;

	gap: 30px;

	&.search-focused {
		.feed_main {
			height: 0px;
			opacity: 0;
		}
	}

	.music-explore-content {
		display: grid;
		grid-template-columns: repeat(2, auto);
		grid-template-rows: auto;

		width: 100%;
		height: 100%;

		gap: 30px;

		@media screen and (max-width: 1200px) {
			grid-template-columns: 1fr;
		}
	}
}

.music-explorer_search_results {
	display: grid;

	width: 100%;

	// if only need 1 column, it will be 1fr
	// if need 2 colums, first column will be 1fr, and the second one will be 2fr
	grid-template-columns: 1fr 2fr;

	// auto generate rows
	grid-template-rows: auto;

	grid-column-gap: 20px;
	grid-row-gap: 20px;

	@media screen and (max-width: 1750px) {
		display: flex;
		flex-direction: column;
		align-items: center;

		.music-explorer_search_results_group_list {
			.playlistItem {
				width: 100% !important;
				max-width: 100% !important;

				.playlistItem_info_subtitle {
					max-width: 300px;
				}

				.playlistItem_bottom {
					display: flex !important;
					position: absolute;

					top: 0;
					right: 0;

					padding: 10px;

					//-webkit-backdrop-filter: blur(5px);
					//backdrop-filter: blur(5px);

					background-color: var(--background-color-primary);

					display: flex;
					flex-direction: column;

					p {
						display: flex;
						flex-direction: row-reverse;

						gap: 7px;
					}
				}
			}
		}
	}

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

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

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

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

		padding: 20px;

		border-radius: 8px;

		height: fit-content;
		width: 100%;

		gap: 20px;

		.explorer_search_results_group_header {
			h1 {
				margin: 0;
			}
		}

		.music-explorer_search_results_group_list {
			display: flex;
			flex-direction: column;

			gap: 10px;

			@playlistItem_height: 80px;
			@playlistItem_padding: 10px;

			@playlistItem_cover_size: calc(
				@playlistItem_height - @playlistItem_padding * 2
			);

			.playlistItem {
				flex-direction: row;
				background-color: var(--background-color-primary);

				max-width: 300px;
				width: 100%;

				height: @playlistItem_height;

				padding: @playlistItem_padding;

				.playlistItem_cover {
					width: @playlistItem_cover_size;
					height: @playlistItem_cover_size;

					min-height: @playlistItem_cover_size;
					min-width: @playlistItem_cover_size;
				}

				.playlistItem_bottom {
					display: none;
				}

				&:hover {
					.playlistItem_info {
						transform: none;
					}
				}
			}

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