html {
	&.mobile {
		.music-track {
			&:active {
				animation: press 150ms ease-in-out;
			}

			&.loading {
				// TODO: create a bottom line svg to animate stroke width
			}
		}
	}
}

@keyframes press {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0.95);
	}
}

.music-track {
	position: relative;

	display: flex;
	flex-direction: row;

	border-radius: 8px;

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

	overflow: hidden;

	isolation: isolate;

	transition: all 150ms ease-in-out;

	&:hover {
		.music-track_content {
			.music-track_play {
				&.withOrder {
					.ant-btn {
						opacity: 1;
					}

					.music-track_orderIndex {
						opacity: 0;
					}

					.music-track_play_duration {
						opacity: 1;
						width: fit-content;
					}
				}
			}
		}
	}

	&.current {
		.music-track_content {
			.music-track_play {
				.ant-btn {
					background-color: var(--colorPrimary) !important;
					border: unset;
					opacity: 1 !important;
				}

				.music-track_orderIndex {
					opacity: 0 !important;
				}
			}
		}

		.music-track_background {
			background:
				linear-gradient(
					to right,
					rgba(var(--cover_average-color)),
					transparent
				),
				url(https://grainy-gradients.vercel.app/noise.svg);
		}
	}

	.music-track_background {
		position: absolute;

		z-index: 50;

		top: 0;
		left: 0;

		width: 100%;
		height: 100%;

		transition: all 150ms ease-in-out;

		opacity: 0.2;
	}

	.music-track_content {
		position: relative;
		z-index: 55;

		display: flex;
		flex-direction: row;

		align-items: center;

		width: 100%;

		gap: 10px;
		padding: 6px;

		.music-track_play {
			position: relative;

			display: flex;
			flex-direction: row;

			align-items: center;

			gap: 10px;

			transition: all 150ms ease-in-out;
			cursor: pointer;

			&.withOrder {
				.ant-btn {
					opacity: 0;
				}
			}

			.music-track_orderIndex {
				position: absolute;

				z-index: 55;

				top: 0;
				left: 0;

				height: 32px;
				width: 32px;

				padding: 12px;

				//line-height: 22px;

				opacity: 1;

				transition: all 150ms ease-in-out;

				font-family: "DM Mono", monospace;

				svg {
					margin: 0;
				}
			}

			.ant-btn {
				position: relative;

				z-index: 60;

				svg {
					margin: 0 !important;

					background-color: transparent;

					fill: var(--text-color);
					stroke: var(--text-color);
				}

				color: var(--text-color);
				background-color: transparent !important;

				border: 1px solid var(--text-color);
			}
		}

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

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

			background-color: black;

			border-radius: 12px;

			overflow: hidden;

			width: 35px;
			height: 35px;

			min-width: 35px;
			min-height: 35px;

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

				object-fit: contain;
			}
		}

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

			width: 75%;

			color: var(--text-color);

			.music-track_titles {
				display: flex;
				flex-direction: row;

				align-items: center;

				gap: 5px;

				.music-track_title {
					display: flex;
					flex-direction: row;

					align-items: center;
					font-size: 1rem;
					gap: 5px;
				}

				.music-track_version {
					font-size: 0.8rem;
					opacity: 0.8;
				}
			}

			.music-track_artist {
				font-size: 0.8rem;
			}
		}
	}

	.music-track_actions {
		position: relative;
		z-index: 60;

		display: flex;
		flex-direction: row;

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

		gap: 5px;

		margin-left: auto;

		color: var(--text-color);

		.music-track_play_duration {
			display: flex;
			flex-direction: row;

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

			gap: 5px;

			font-size: 0.8rem;
		}

		.music-track_more-menu {
			padding: 10px;
			cursor: pointer;
		}
	}
}