comty/packages/app/src/components/Music/Track/index.less

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;

	border-radius: 8px;

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

	overflow: hidden;

	isolation: isolate;

	transition: all 150ms ease-in-out;

	&:hover {
		.music-track_actions {
			&.withOrder {
				.music-track_action {
					.ant-btn {
						opacity: 1;
					}

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

	&.current {
		.music-track_actions {
			.music-track_action {
				.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;

		padding: 6px;
	}

	.music-track_actions {
		display: flex;

		align-items: center;

		margin-right: 10px;

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

		.music-track_action {
			position: relative;

			transition: all 150ms ease-in-out;

			cursor: pointer;

			.music-track_orderIndex {
				position: absolute;

				top: 0;
				left: 0;

				height: 100%;

				width: 100%;

				padding: 5px 13px;

				line-height: 22px;

				opacity: 1;

				transition: all 150ms ease-in-out;

				text-align: center;

				font-family: "DM Mono", monospace;

				svg {
					margin: 0;
				}
			}

			.ant-btn {
				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;

		margin-left: 10px;

		color: var(--text-color);

		.music-track_title {
			font-size: 1rem;
			font-family: "Space Grotesk", sans-serif;
		}

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

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

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

		gap: 10px;

		margin-left: auto;

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

	.music-track_info {
		display: inline-flex;
		flex-direction: row;

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