.jet-audio {
	> audio {
		display: none; // prevent blinking on load
	}

	.mejs-container,
	.mejs-container .mejs-controls {
		background: none;
	}

	.mejs-container {
		max-width: 100%;
		height: auto !important;
		font-family: inherit;
	}

	.mejs-controls {
		position: relative;
		height: auto;
		padding: 0;
		align-items: center;

		.mejs-button,
		.mejs-time,
		.mejs-time-rail {
			width: auto;
			height: auto;
		}

		.mejs-button > button {
			position: relative;
			width: auto;
			height: auto;
			margin: 0;
			letter-spacing: normal;
			border: 1px none;
			border-radius: 0;
			background: none;

			font: normal normal normal 12px/1 FontAwesome;
			text-rendering: auto;
			text-align: center;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			&:before {
				display: inline-block;
				width: 1em;
			}
		}

		.mejs-playpause-button > button {
			padding: 14px;
			color: #303865;
			background-color: #fff;
		}

		.mejs-volume-button {
			@include margin-start(10px);

			> button {
				padding: 3px;
				color: #fff;
			}
		}

		// Play-pause button icons
		.mejs-playpause-button.mejs-play > button:before {
			content: "\f04b";
		}
		.mejs-playpause-button.mejs-pause > button:before {
			content: "\f04c";
		}
		.mejs-playpause-button.mejs-replay > button:before {
			content: "\f0e2";
		}

		// Volume button icons
		.mejs-volume-button.mejs-mute > button:before {
			content: "\f028";
		}
		.mejs-volume-button.mejs-unmute > button:before {
			content: "\f026";
		}

		.mejs-time {
			padding: 0;
			font-size: 14px;
			line-height: 1.5;
			font-weight: normal;
			color: #fff;
		}

		.mejs-currenttime,
		.mejs-duration {
			@include margin-start(10px);
		}

		.mejs-currenttime ~ .mejs-duration {
			@include margin-start(0);
		}

		.mejs-time-rail {
			padding: 0;
			@include margin(0,0,0,10px);

			.mejs-time-total {
				position: relative;
				margin: 0;
				overflow: hidden;
				background: #303865;
				border-radius: 5px;
			}

			.mejs-time-current {
				width: 0;
				transform: scaleX(1) !important;

				background: #fff;
				border-radius: 0 5px 5px 0;
			}

			.mejs-time-buffering,
			.mejs-time-loaded,
			.mejs-time-current,
			.mejs-time-hovered {
				height: 100%;
			}

			.mejs-time-buffering,
			.mejs-time-loaded {
				border-radius: 0;
			}

			.mejs-time-handle,
			.mejs-time-loaded,
			.mejs-time-hovered {
				display: none;
			}
		}

		.mejs-horizontal-volume-slider {
			width: auto;
			height: auto;
			@include margin-start(7px);

			.mejs-horizontal-volume-total {
				position: relative;
				top: auto;
				width: 60px;
				height: 10px;
				border-radius: 5px;
				background: #303865;
				overflow: hidden;
			}

			.mejs-horizontal-volume-current {
				border-radius: 0 5px 5px 0;
				background: #fff;
			}
		}

		.mejs-volume-slider {
			.mejs-volume-total {
				width: 4px;
			}
		}

		.mejs-speed-button {
			@include margin-start(7px);

			.mejs-speed-selector {
				text-align: center;
				height: auto;

				&-list {
					&-item {
						padding: 0;
						margin: 0;

						& + * {
							margin-top: 5px;
						}

						.mejs-speed-selector-label {
							margin: 0;
							padding: 0;
							line-height: 1;
							width: 100%;
						}
					}
				}
			}
		}
	}

	&--fa5-compat {
		.mejs-controls {
			.mejs-button > button {
				font: normal normal 900 12px/1 "Font Awesome 5 Free";
			}
		}
	}
}

.elementor-widget-jet-audio {
	display: flex;

	.elementor-widget-container {
		width: 100%;
		padding: 10px;
		background: #00b4ff;
	}
}