/**
 * This WAS the original styles only module for inline playback
 * But is now used for all player styling
 * FIXME
 */
.client-js {
	.video-js {
		// We want a larger fontsize (than the default of 10px) to have bigger controls..
		// Except when we are an audioplayer being loaded inline,
		// where we need the height to be exactly 30px (3em 10px)
		// (first is media dialog and embedplayer)
		&.vjs-fill,
		&:not( .vjs-audio ) {
			/* stylelint-disable-next-line declaration-property-unit-disallowed-list */
			font-size: 13px;
		}

		&.thumbimage {
			border: 0;
		}
	}
	/* We force the size of player to avoid reflows after loading the JS */
	audio.video-js {
		height: 3em;
		/* stylelint-disable-next-line declaration-property-unit-disallowed-list */
		font-size: 10px;
	}

	/* We hide the native controls, before we load the custom controls  */
	audio.video-js::-webkit-media-controls-panel,
	video.video-js::-webkit-media-controls-panel {
		display: none;
	}
}

div.thumbinner.mw-overflow {
	/* We want to overflow, but we need to make sure we still
	 * create a new block formatting context */
	overflow: visible;
	display: table-cell;
}

/*
 * Make video-js behave like standard <video><audio> elements
 * The thumbinner check works around a width interaction for
 * thumbnail style adjustments in Minerva mobile skin.
 */
*:not( .thumbinner ) > .video-js.video-js:not( .vjs-fullscreen ) {
	display: inline-block;
	vertical-align: initial;
}

.video-js.vjs-high-controls:not( .vjs-audio ) {
	/* Position the progress control above the other controls */
	.vjs-control-bar {
		flex-wrap: wrap;
		height: 5em;
	}

	.vjs-control {
		height: 3em;
	}

	.vjs-progress-control {
		flex: 1 0 100%;
		height: 2em;
		order: -1;
		padding-top: 0.5em;
	}
	/* push other controls to be right aligned */
	.vjs-custom-control-spacer {
		display: block;
		flex: 1 1 auto;
	}
	/* Show time position and duration */
	.vjs-time-control {
		display: block;
		min-width: unset;
		padding-left: 0.3em;
		padding-right: 0.3em;
	}

	&.vjs-user-active.vjs-playing .vjs-text-track-display {
		bottom: 5em;
	}
}

/* TODO this button needs to be reworked */
.video-js:not( .vjs-fullscreen ).vjs-layout-small,
.video-js:not( .vjs-fullscreen ).vjs-layout-x-small,
.video-js:not( .vjs-fullscreen ).vjs-layout-tiny {
	div[ aria-label='Quality' ] {
		display: none;
	}
}

/* stylelint-disable no-descending-specificity */
.video-js:not( .vjs-fullscreen ):not( .vjs-audio ).vjs-layout-large .vjs-subs-caps-button,
.video-js:not( .vjs-fullscreen ):not( .vjs-audio ).vjs-layout-medium .vjs-subs-caps-button,
.video-js:not( .vjs-fullscreen ).vjs-layout-medium .vjs-remaining-time,
.video-js:not( .vjs-fullscreen ).vjs-audio.vjs-layout-small .vjs-progress-control,
.video-js:not( .vjs-fullscreen ).vjs-layout-small .vjs-subs-caps-button,
.video-js:not( .vjs-fullscreen ).vjs-layout-x-small .vjs-progress-control,
.video-js:not( .vjs-fullscreen ).vjs-layout-x-small.vjs-audio .mw-info-button,
.video-js:not( .vjs-fullscreen ).vjs-layout-tiny .vjs-volume-panel,
.video-js:not( .vjs-fullscreen ).vjs-layout-tiny .mw-info-button {
	display: none;
}
/* stylelint-enable */

.video-js:not( .vjs-fullscreen ).vjs-layout-small .vjs-custom-control-spacer,
.video-js:not( .vjs-fullscreen ).vjs-layout-x-small .vjs-custom-control-spacer {
	flex: auto;
	display: block;
}

/* Audio player skin */
.video-js.vjs-audio {
	&:not( .vjs-fill ) {
		height: 3em;
	}

	/* stylelint-disable-next-line no-descending-specificity */
	.vjs-control-bar {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.vjs-loading-spinner {
		display: none;
	}

	&.vjs-waiting .vjs-progress-holder:not( .vjs-seeking ) {
		height: 0.5em;
		background-image: repeating-linear-gradient( -45deg, #73859f, #73859f 11px, #eee 10px, #eee 20px );
		border-radius: 3px;
		background-size: 28px 28px;
		transition: height 0.5s;
		animation: vjs-slider-indeterminate 0.5s linear infinite;

		.vjs-play-progress {
			display: none;
		}
	}

	/* stylelint-disable-next-line no-descending-specificity */
	&.vjs-user-inactive.vjs-playing .vjs-text-track-display { //.vjs-text-track-cue {
		// Compensate for the fact that cue offset calculation is off,
		// because it doesn't account for us force displaying the controlbar when user is inactive
		bottom: 3em;
	}
}

.vjs-menu-button-popup .vjs-menu {
	// Fit menu to its contents
	width: initial;
	min-width: 10em;
	max-width: 20em;
	left: -0.5em;

	.vjs-menu-content {
		overflow-x: hidden;
		width: initial;
	}

	li {
		padding: 0.2em 0.5em;
		text-align: left;
		white-space: nowrap;
	}
}

.vjs-user-inactive {
	cursor: none;
}

html[ dir='rtl' ] {
	.vjs-menu,
	.vjs-menu-item-text,
	.vjs-control-text,
	.vjs-modal-dialog {
		/* @noflip */
		direction: rtl;
	}

	// align popup menus to flow to the left
	.vjs-menu-button-popup .vjs-menu {
		// noflip because the player UI layout is ltr even in rtl layouts
		/* @noflip */
		left: initial;
		/* @noflip */
		right: -0.5em;

		.vjs-menu-content {
			/* @noflip */
			right: 0;
		}
	}

	// T307363
	// https://github.com/videojs/video.js/issues/7743
	.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
		/* @noflip */
		left: -3.5em;
	}
}

@keyframes vjs-slider-indeterminate {
	0% {
		background-position: 0 0;
	}

	100% {
		background-position: 28px 0;
	}
}

// Support the Score extension which has no need for subs and no corresponding File page
.mw-ext-score.mw-ext-score {
	.vjs-subs-caps-button,
	.mw-info-button {
		display: none;
	}
}