/* Layout and skin for the existing WordPress MediaElement controls. */
.korepanov-audio-player {
	--audio-accent: #e8ad63;
	--audio-muted: #a8afbc;
	color: #f6f7f9;
	background: #20242c;
	background: color-mix(in srgb, #20242c 96%, transparent);
	border: 1px solid #414650;
	border-radius: 20px;
	padding: 14px 22px 12px;
	box-shadow: 0 16px 56px #0006, 0 1px 0 #ffffff0a inset;
	color-scheme: dark;
}

.korepanov-audio-player__main {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px minmax(0, 1fr);
	grid-template-rows: 64px 36px;
	gap: 0 20px;
}

.korepanov-audio-player__identity {
	grid-column: 1;
	grid-row: 1;
	align-self: center;
	z-index: 1;
	padding-left: 58px;
	position: relative;
}

.korepanov-audio-player__identity::before {
	position: absolute;
	left: 0;
	top: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	transform: translateY(-50%);
	content: "\f127";
	font: 24px/1 dashicons;
	color: var(--audio-accent);
	background: #e8ad6317;
	border: 1px solid #e8ad6329;
	border-radius: 12px;
}

.korepanov-audio-player__identity strong {
	font-size: 14px;
	line-height: 1.45;
	font-weight: 650;
}

.korepanov-audio-player__identity span {
	color: var(--audio-muted);
	font-size: 12px;
	line-height: 1.5;
}

.korepanov-audio-player__identity .korepanov-audio-player__status {
	font-size: 10px;
	margin: 0;
}

.korepanov-audio-player__controls {
	grid-column: 2;
	grid-row: 1;
	z-index: 2;
	align-self: center;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
}

.korepanov-audio-player__controls > button,
.korepanov-audio-player__tools > button {
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	color: #e1e4eb;
	background: transparent;
	border: 0;
	box-shadow: none;
	pointer-events: auto;
}

.korepanov-audio-player__controls > button .dashicons {
	width: 26px;
	height: 26px;
	font-size: 26px;
}

.korepanov-audio-player__controls > button:hover:not(:disabled),
.korepanov-audio-player__tools > button:hover:not(:disabled) {
	color: #fff;
	background: #ffffff12;
	transform: none;
}

.korepanov-audio-player__tools {
	grid-column: 3;
	grid-row: 1;
	z-index: 2;
	align-self: center;
}

.korepanov-audio-player [data-audio-action="transcript"] {
	width: auto;
	min-width: 88px;
	padding-inline: 12px;
	gap: 8px;
	color: #c7cdd7;
	font-size: 12px;
	border: 1px solid #ffffff1a;
	border-radius: 10px;
}

.korepanov-audio-player [data-audio-action="transcript"][aria-expanded="true"] {
	color: var(--audio-accent);
	background: #e8ad6317;
	border-color: #e8ad6344;
}

.korepanov-audio-player .korepanov-audio-player__transport {
	z-index: 0;
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	min-width: 0;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-container,
.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls {
	width: 100% !important;
	min-width: 0 !important;
	height: 100px !important;
	background: transparent;
	overflow: visible;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls {
	display: grid;
	grid-template-columns: 48px minmax(40px, 1fr) 48px repeat(4, 36px) 40px 76px;
	grid-template-rows: 64px 36px;
	column-gap: 8px;
	align-items: center;
	box-sizing: border-box;
	padding: 0;
	background: transparent;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > * {
	box-sizing: border-box;
	float: none;
	min-width: 0;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-playpause-button {
	position: absolute;
	top: 6px;
	left: calc(50% - 26px);
	display: grid;
	place-items: center;
	width: 52px !important;
	height: 52px;
	background: var(--audio-accent);
	border-radius: 50%;
	box-shadow: 0 4px 18px #e8ad6326;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-button > button {
	box-sizing: border-box;
	position: static;
	width: 36px;
	height: 36px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	transform: none;
}

/* Clip Core's native 20px sprite to the content box of a 52px hit target. */
.korepanov-audio-player .korepanov-audio-player__transport .mejs-playpause-button > button {
	width: 52px;
	height: 52px;
	padding: 16px;
	background-origin: content-box;
	background-clip: content-box;
	background-repeat: no-repeat;
	border-radius: 0;
	filter: brightness(0);
	transform: none;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-time {
	grid-row: 2;
	width: auto !important;
	height: auto;
	margin: 0;
	padding: 0;
	color: var(--audio-muted);
	font-size: 11px;
	line-height: 36px;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-currenttime-container { grid-column: 1; }
.korepanov-audio-player .korepanov-audio-player__transport .mejs-duration-container { grid-column: 3; }

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-time-rail {
	grid-row: 2;
	grid-column: 2;
	width: 100% !important;
	height: 36px;
	margin: 0;
	padding: 0;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-total {
	position: absolute;
	top: 15px;
	left: 0;
	width: 100% !important;
	margin: 0;
	background: #ffffff24;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-total,
.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-loaded,
.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-current,
.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-hovered {
	height: 5px;
	border-radius: 8px;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-loaded { background: #ffffff24; }
.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-current { background: var(--audio-accent); }
.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-handle { top: -2px; }

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .blank-button {
	grid-row: 2;
	position: relative;
	display: grid;
	place-items: center;
	width: 36px !important;
	height: 36px;
}

.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(5) { grid-column: 4; }
.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(6) { grid-column: 5; }
.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(7) { grid-column: 6; }
.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(8) { grid-column: 7; }

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls .playback-rate-button {
	position: static;
	width: 36px;
	height: 32px;
	margin: 0;
	padding: 0;
	color: var(--audio-muted);
	background: transparent;
	font: 11px/32px sans-serif;
	border: 1px solid transparent;
	border-radius: 7px;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls .active-playback-rate {
	color: var(--audio-accent);
	background: #e8ad6317;
	border-color: #e8ad6333;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-volume-button {
	grid-column: 8;
	grid-row: 2;
	display: grid;
	place-items: center;
	width: 40px !important;
	height: 36px;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-volume-button > button {
	width: 20px;
	height: 20px;
	border-radius: 0;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-horizontal-volume-slider {
	grid-column: 9;
	grid-row: 2;
	position: relative;
	width: 76px !important;
	height: 36px;
	margin: 0;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-horizontal-volume-total {
	top: 15px;
	left: 4px;
	width: 64px;
	height: 5px;
	background: #ffffff24;
	border-radius: 8px;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-horizontal-volume-current {
	height: 5px;
	max-width: 64px;
	background: #c4cad4;
	border-radius: 8px;
}

.korepanov-audio-player .korepanov-audio-player__transport .mejs-button button:focus-visible,
.korepanov-audio-player .korepanov-audio-player__transport .mejs-horizontal-volume-slider:focus-visible {
	outline: 2px solid var(--audio-accent);
	outline-offset: 3px;
}

.korepanov-audio-player__transcript {
	color: #e1e4eb;
	border-color: #ffffff1a;
}

.korepanov-audio-player .korepanov-audio-transcript-segment { color: #e1e4eb; }
.korepanov-audio-player .korepanov-audio-transcript-segment:hover { background: #ffffff0b; }
.korepanov-audio-player .korepanov-audio-transcript-time { color: var(--audio-accent); }
.korepanov-audio-player .korepanov-audio-transcript-message { color: var(--audio-muted); }

.korepanov-audio-player button[aria-busy="true"] {
	opacity: 1;
	cursor: wait;
}

.korepanov-audio-player button[aria-busy="true"] .dashicons::before {
	content: "\f463";
	display: block;
	animation: korepanov-audio-loading 1s linear infinite;
}

@keyframes korepanov-audio-loading { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.korepanov-audio-player button[aria-busy="true"] .dashicons::before { animation: none; }
}

@media (max-width: 760px) {
	.korepanov-audio-player { padding: 10px 16px 12px; }
	.korepanov-audio-player__main {
		grid-template-columns: minmax(0, 1fr) 88px;
		grid-template-rows: 48px 60px 30px 36px;
		gap: 0 12px;
	}
	.korepanov-audio-player__identity { grid-column: 1; grid-row: 1; padding-left: 48px; }
	.korepanov-audio-player__identity::before { width: 36px; height: 36px; font-size: 22px; border-radius: 10px; }
	.korepanov-audio-player__identity strong { display: block; white-space: nowrap; font-size: 13px; }
	.korepanov-audio-player__identity span { font-size: 11px; }
	.korepanov-audio-player__tools { grid-column: 2; grid-row: 1; }
	.korepanov-audio-player__controls { grid-column: 1 / -1; grid-row: 2; width: 180px; justify-self: center; }
	.korepanov-audio-player .korepanov-audio-player__transport { grid-column: 1 / -1; grid-row: 1 / -1; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-container,
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls { height: 174px !important; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls {
		grid-template-columns: repeat(4, 36px) minmax(0, 1fr) 36px 64px;
		grid-template-rows: 48px 60px 30px 36px;
		column-gap: 4px;
	}
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-playpause-button { top: 52px; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-time { line-height: 30px; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-currenttime-container { grid-row: 3; grid-column: 1; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-duration-container { grid-row: 3; grid-column: 7; text-align: right; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-time-rail { grid-row: 3; grid-column: 2 / 7; height: 30px; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-time-total { top: 12px; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .blank-button { grid-row: 4; }
	.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(5) { grid-column: 1; }
	.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(6) { grid-column: 2; }
	.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(7) { grid-column: 3; }
	.korepanov-audio-player .korepanov-audio-player__transport .blank-button:nth-of-type(8) { grid-column: 4; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-volume-button { grid-row: 4; grid-column: 6; width: 36px !important; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-controls > .mejs-horizontal-volume-slider { grid-row: 4; grid-column: 7; width: 64px !important; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-horizontal-volume-total { width: 56px; }
	.korepanov-audio-player .korepanov-audio-player__transport .mejs-horizontal-volume-current { max-width: 56px; }
}

@media (max-width: 480px) {
	.korepanov-audio-player {
		padding: 8px max(14px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
		border-radius: 18px 18px 0 0;
	}
}