.wpseo-tab-video-container {
	margin-bottom: 20px;
	border-bottom: 1px solid #a4286a;

	// Reset the bottom border when it's open.
	.yoast-help-center-open & {
		border-bottom: none;
	}

	// When the Help Center is inside the metabox (posts, terms, media)
	// it must compensate the metabox padding.
	.postbox & {
		margin-left: -12px;
		margin-right: -12px;
	}

	&__handle {
		width: 100%;
		margin: 0;
		padding: 10px 12px;
		border: none;
		outline: none;
		color: #a4286a;
		background: none;
		text-align: left;
		cursor: pointer;
		line-height: 19px;

		&:hover,
		&:focus {
			text-decoration: underline;
		}

		.dashicons-before:before {
			margin-right: 5px;
		}

		.toggle__arrow {
			text-decoration: none;
		}
	}

	.wpseo-premium-popup {
		// Content 600px + Yoast_SEO_Icon.svg 170px.
		max-width: 770px;
	}
}

.wpseo-tab-video-slideout {
	// Use flexbox but we don't want children to wrap.
	display: flex;
	padding: 2em 0;
	background-color: #a4286a;
	box-shadow: inset 0 10px 10px -5px rgba(123, 30, 80, 0.5), inset 0 -10px 10px -5px rgba(123, 30, 80, 0.5);

	// In the settings pages, mimic the WordPress meta box border.
	.wpseo-admin-page & {
		border: 1px solid #e5e5e5;
		border-top: 0;
	}

	// CSS class to toggle visibility.
	&.hidden {
		display: none;
	}

	// The max-width of the Help Center content is 164 + 916 = 1080 pixels.
	// Worth noting it's an arbitrary number, based on the content width.
	.yoast-help-center-tabs {
		// 164 pixels fixed width.
		flex: 0 0 164px;
		padding: 0 0 1em 0;
		color: #fff;
		background-color: #a4286a;

		ul {
			margin: 0;
		}
	}

	.yoast-help-center-tabs-wrap {
		// Max width 916px - video 560px - 12px video right margin - tab content padding 24px
		// ends up in a 320 pixels available and fluid width for the text boxes.
		flex: 0 1 916px;
		max-width: 916px;
		padding: 0;
	}

	.yoast-help-tab-content {
		display: none;
		padding: 0 12px;
		color: #fff;
		font-weight: 300;

		// The visibility of the normal tab content gets toggled using display block.
		&.active {
			display: block;
		}

		// Only the video tab content needs to use flexbox.
		&.active.yoast-help-tab-content-video {
			display: flex;
			flex-wrap: wrap;
		}

		li {
			list-style: disc inside;
			margin: 2px 10px;
		}
	}

	.wpseo-tab-video__panel {

		&--video {
			// The initial video width is set to 560px. We could also use 100%
			// but then Safari 10 doesn't understand how many items should be on
			// the flexbox line and drops the text boxes area below the video.
			// We change the flex-basis value later for IE11 and Edge.
			flex: 0 1 560px;
			max-width: 560px;
			margin-right: 12px;
			padding-bottom: 12px;

			iframe {
				// Remove iframe descender space.
				vertical-align: middle;
			}
		}

		&--text {
			// https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
			// Allow to have fluid width but not less then 220 pixels.
			// This value can be tweaked as needed.
			flex: 1 1 220px;
			min-width: 220px;
			// Same max width as the video.
			max-width: 560px;
		}

		// The text boxes are just fluid-width block elements.
		&__textarea {
			margin: 0 0 12px 0;
			padding: 15px 15px 5px;
			border: 1px solid #fff;
			border-radius: 30px;
			border-bottom-right-radius: 0;
			background-color: #a4286a;
			color: #fff;

			a,
			a:hover,
			a:focus {
				color: #fff;
				font-weight: 500;
			}

			h3 {
				margin: 0;
			}
		}
	}

	a {
		color: #fff;

		&.button,
		&.button-primary {
			text-decoration: none;
		}
	}

	// Needs to override some WP rules.
	#wpseo_meta & h2,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin-top: 0.5em;
		margin-bottom: 1em;
		padding: 0;
		color: #fff;
		font-size: 1.3em;
		line-height: 1.4;
		font-weight: 400;
	}
}

.wpseo-help-center-item {
	// Left sidebar menu items.
	display: inline;

	a {
		display: block;
		padding: 10px 12px;
		color: #fff;
		text-decoration: none;
		// Same value as the dashicons.
		line-height: 20px;

		&:hover,
		&:focus {
			text-decoration: underline;
		}

		&.dashicons-before:before {
			text-decoration: none;
			margin-right:3px;
		}
	}

	&.active a {
		color: #a4286a;
		background-color: #fff;
	}
}

@media screen and ( max-width: 1280px ) {
	// On the post edit screen when the layout is in two columns this needs
	// to happen earlier.
	.columns-2 .wpseo-tab-video-slideout .wpseo-tab-video__panel {

		&--video {
			margin-right: 0;
		}
	}
}

@media screen and ( max-width: 1024px ) {
	// At a 1024px viewport width we're sure the text boxes are below the video.
	// Actually, it happens even before depending on the admin menu state, number
	// of columns in the page, etc. At this point we could even switch the video
	// and text boxes area to display block. Keeping it simple, we just switch
	// the flex-basis because of IE11 and Edge.
	.wpseo-tab-video-slideout .wpseo-tab-video__panel {

		&--video {
			// IE11 and Edge need to switch flex-basis from the initial value
			// of 560px to 100% to make the video responsive.
			flex-basis: 100%;
			margin-right: 0;
		}
	}

	// The switch from flexbox to a block layout normally happens at 782px but
	// on the post edit screen, when the layout is in 2 columns, it needs to
	// happen earlier. Thus, this block of rules is basically the same as the
	// one in the 782px media query. It's just prepended with `.columns-2`.
	.columns-2 .wpseo-tab-video-slideout {
		// Switch from flexbox to a block layout.
		display: block;

		// Need to re-set this for the higher specificity of the columns-2 slideout.
		&.hidden {
			display: none;
		}

		.yoast-help-center-tabs {
			width: auto;
			padding-left: 12px;
			padding-right: 12px;
		}

		.yoast-help-tab-content {

			&.active.yoast-help-tab-content-video {
				// Stop the video tab content from using flexbox.
				display: block;
				// Video full width.
				padding: 0;
			}
		}

		.wpseo-tab-video__panel {

			&--video {
				max-width: none;
			}

			&--text {
				max-width: none;
				padding: 0 12px;
			}
		}
	}

	.columns-2 .wpseo-help-center-item {

		a {
			display: inline-block;
			margin: 0 4px 8px 0;
			border: 1px solid rgba( #fff, 0.5 );
		}
	}
}

@media screen and ( max-width: 782px ) {
	.wpseo-tab-video-slideout {
		// Switch from flexbox to a block layout.
		display: block;

		.yoast-help-center-tabs {
			width: auto;
			padding-left: 12px;
			padding-right: 12px;
		}

		.yoast-help-tab-content {

			&.active.yoast-help-tab-content-video {
				// Stop the video tab content from using flexbox.
				display: block;
				// Video full width.
				padding: 0;
			}
		}

		.wpseo-tab-video__panel {

			&--video {
				max-width: none;
			}

			&--text {
				max-width: none;
				padding: 0 12px;
			}
		}
	}

	.wpseo-help-center-item {

		a {
			display: inline-block;
			margin: 0 4px 8px 0;
			border: 1px solid rgba( #fff, 0.5 );
		}
	}

	// Hide the Yoast_SEO_Icon.svg on the Email support tab.
	.wpseo-premium-popup-icon {
		display: none;
	}
}