/*
 * WpStream integrations stylesheet.
 *
 * Styles the BuddyPress/BuddyBoss "Live Video" profile tab and the video.js
 * player as it appears inside BuddyPress contexts (the profile tab and the
 * activity timeline). Two areas: the profile tab layout, and player control-bar
 * / big-play-button overrides so the player matches the theme.
 */

/* Profile "Live Video" tab: card wrapper and section headings. */
.wpstream-menu .item-body {
	border: 1px solid #d6d9dd;
	border-radius: 4px;
	padding: 20px !important;
	margin-bottom: 20px;
	margin: 0px 10px 20px 10px;
}

body.wpstream-menu.buddypress .buddypress-wrap h4 {
	margin-bottom: 10px;
	margin-top: 25px;
}

/* Player: hide the default big "play" button in started/error/native-control states. */
.wpstream_live_player_wrapper .vjs-controls-disabled .vjs-big-play-button, .wpstream_live_player_wrapper .vjs-error .vjs-big-play-button, .wpstream_live_player_wrapper .vjs-has-started .vjs-big-play-button, .wpstream_live_player_wrapper .vjs-using-native-controls .vjs-big-play-button {
	display: none;
}

/* Player: reset the big-play-button transform/padding across wrappers. */
.wpstream_live_player_wrapper .video-js .vjs-big-play-button, .wpstream_player_container .video-js .vjs-big-play-button {
	transform: none;
	padding: 0px;
}

/* Player: suppress the built-in error dialog text. */
.wpstream_live_player_wrapper .vjs-error .vjs-error-display .vjs-modal-dialog-content {
	display: none;
}

/* Player: size the big-play-button icon glyph. */
.wpstream_live_player_wrapper .video-js .vjs-big-play-button:before, .wpstream_player_container .video-js .vjs-big-play-button:before {
	font-size: 57px;
}

/* Player: fixed 40x40 borderless control buttons. */
.wpstream_player_container button.vjs-control, .wpstream_player_container button.vjs-control {
	border: none !important;
	width: 40px;
	height: 40px;
}

/* Timeline: cap the player width inside an activity entry. */
.activity-inner .wpstream_live_player_wrapper {
	max-width: 715px;
}

/* Profile tab: button and live-control typography/spacing. */
body.wpstream-menu .buddypress-wrap button, body.wpstream-menu .vjs-wpstream .vjs-live-control {
	font-size: 12px;
	transition: .3s ease-out;
	border: 0px;
	padding: 0px 20px;
	line-height: 23px;
}

body.wpstream-menu .vjs-wpstream .vjs-live-control {
	padding-left: 20px;
}

/* Profile tab: hide the picture-in-picture control glyph. */
body.wpstream-menu div.video-js .vjs-control-bar button.vjs-picture-in-picture-control .vjs-icon-placeholder:before {
	display: none;
}

/* Player: vertical volume panel layout/sizing. */
.video-js .vjs-volume-panel {
	display: flex;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: space-around;
	height: 44px;
	width: 34px;
}

/* Player: vertically center control-bar icon glyphs and the live control. */
div.video-js .vjs-control-bar button .vjs-icon-placeholder:before, .vjs-wpstream .vjs-live-control {
	line-height: 40px;
}

/* Player: blank out the picture-in-picture control glyph content. */
div.video-js .vjs-control-bar button.vjs-picture-in-picture-control .vjs-icon-placeholder:before {
	content: "";
}