.audio-preview {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 127px;
	min-width: 100%;
	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: var(--tblr-primary);
		transition: all 0.3s;

		svg {

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

			svg {

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

.theme-dark {

	.audio-preview {
		background-color: rgb(255 255 255 / 4%);
	}
}