.data-audio {
	gap: 9px;
	width: 127px;
	height: 35px;
	padding: 0 10px;
	border-radius: 20px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
	font-size: 11px;
	background-color: #fff;

	> wave {
		width: 100% !important;
		// height: 22px !important;

		// wave,
		// canvas {
		// 	max-width: 100%;
		// }
	}
	button {
		display: inline-flex;
		width: 18px;
		height: 18px;
		padding: 0;
		border-radius: 10px;
		order: -1;
		flex-shrink: 0;
		align-items: center;
		justify-content: center;
		background: none;
		border: 1px solid;
		color: hsl(var(--primary));
		transition: all 0.3s;

		svg {

			&:nth-child(2) {
				display: none;
			}
		}
		&.is-playing {
			background-color: hsl(var(--primary));
			color: #fff;

			svg {

				&:first-child {
					display: none;
				}
				&:nth-child(2) {
					display: block;
				}
			}
		}
	}
}

.theme-dark {

	.data-audio {
		background-color: rgb(255 255 255 / 5%);
	}
}