// =================================================================
// WordPress WYSIWYG Settings
// =================================================================

// Visual Editor Floated Content Margin
//
// The margin to use around anything floated in the content area.
//
// Styleguide WordPress.Visual Editor.Floated Content Margin
//
// Access: Public
//
// Since: 1.0.0

$margin-floated-content: 						 $margin-small !default;

// Visual Editor Caption Font Family
//
// The font to use for captions.
//
// Styleguide WordPress.Visual Editor.Caption Font
//
// Access: Public
//
// Since: 1.0.0

$font-family-caption:                       $font-family-sans-serif !default;

// Visual Editor Caption Color
//
// The color to use for captions.
//
// Styleguide WordPress.Visual Editor.Caption Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-caption:                            $color-grayscale-6 !default;

// Visual Editor Table Shadow
//
// The shadow to use in tables.
//
// Styleguide Content.Tables.Table Shadow
//
// Access: Public
//
// Since: 1.0.0

$box-shadow-table:                          inset -20px 0 20px -10px $color-grayscale-f0 !default;


// =================================================================
// WordPress WYSIWYG Styles
// =================================================================

// Provides a link for admins to edit the page within the page content.
// Formerly `.edit-link`, this has been updated to better match WordPress
// standards from both a class naming perspective and a user interface
// perspective.
//
// Access: Public
//
// Since: 3.2.0

.post-edit-link {
	@include border-radius( 2px );
	background: $color-grayscale-f;
	border: 1px solid var(--bu-link-color, #{$color-link});
	color: var(--bu-link-color, #{$color-link});
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 15px;
	line-height: 1;
	margin: 0.5em;
	max-width: 32px;
	overflow: hidden;
	padding: 0.25em 0.5em 0.4em;
	position: absolute;
	right: 0;
	text-decoration: none;
	top: 0;
	transition: max-width 0.3s ease-in;
	white-space: nowrap;
	z-index: 100;

	&:visited,
	&:active,
	&:hover {
		color: var(--bu-link-color, #{$color-link});
	}

	&:hover {
		max-width: 150px;
		transition: max-width 0.3s ease-in;
	}

	&::before {
		content: "\f464";
		font-family: "dashicons";
		font-size: 17px;
		margin-right: 0.25em;
		vertical-align: text-bottom;
	}
}

// Hints at the area affected by editing for admins within the page content.
//
// Access: Public
//
// Since: 3.2.0

.post-edit-hint {
	border: 1px dashed var(--bu-link-color, #{$color-link});
	box-sizing: content-box;
	height: 0;
	left: -10px;
	opacity: 0;
	padding: 0;
	position: absolute;
	top: -10px;
	width: 100%;

	@include transition(
		height 0s step-end 0.5s,
		opacity 0.2s ease-in,
		padding 0s step-end 0.5s,
	);

	.edit-link:hover + & {
		height: 100%;
		opacity: 1;
		padding: 10px;

		@include transition(
			height 0s step-start 0s,
			opacity 0.2s ease-in,
			padding 0s step-start 0s,
		);
	}
}

// Responsive Video Placeholder
//
// A placeholder for responsive video styles.
// Use this placeholder if you need something to support responsive video,
// but you need a separate, unique class from responsive-video.
//
// You may also use this to enable responsive behavior on other types of
// embedded media that don't have a video aspect ratio by extending this
// to a unique class, and adjusting the padding-bottom value on that class
// to match the aspect ratio you're looking for.
//
// Styleguide Content.Video.Responsive Video Placeholder
//
// Access: Public
//
// Since: 1.0.0

%responsive-video-styles {
	margin-bottom: 14px;
	padding-bottom: 56.25%;
	padding-top: 45px;
	position: relative;

	div,
	embed,
	object,
	iframe {
		height: 100% !important; // Required to override inline styles on embeds
		left: 0;
		position: absolute;
		top: 0;
		width: 100% !important; // Required to override inline styles on embeds
	}
}

// Responsive Video Class
//
// The default class which enables responsive video.
// Wrap this around any video or iframe which is not supported by oEmbed,
// or if you are manually putting in HTML for a video for some reason.
//
// Styleguide Content.Video.Responsive Video Class
//
// Access: Public
//
// Since: 1.0.0

.responsive-video {
	// @extend %responsive-video-styles;
}

// WordPress accessibility classes for screen readers.
// Not really something you should be overriding.
//
// Access: Private
//
// Since: 1.0.0

.screen-reader-text,
.screen-reader-text span,
.ui-helper-hidden-accessible {
	@extend %visually-hidden;
}

// A placeholder just for align. Not meant to be extended elsewhere.
//
// Access: Private
//
// Since: 1.2.0

%_align-styles {
	margin-bottom: $margin-floated-content;
	max-width: 100%;

	@include breakpoint( $xs ) {
		max-width: 50%;
	}
}

// Visual Editor Align Right Class
//
// The class WordPress generates when you align something right in the
// visual editor.
//
// Styleguide WordPress.Visual Editor.Align Right Class
//
// Access: Public
//
// Since: 1.0.0

.alignright {
	@extend %_align-styles;

	@include breakpoint( $xs ) {
		float: right;
		margin: 0 0 $margin-floated-content $margin-floated-content;
	}
}

// Visual Editor Align Left Class
//
// The class WordPress generates when you align something left in the
// visual editor.
//
// Styleguide WordPress.Visual Editor.Align Left Class
//
// Access: Public
//
// Since: 1.0.0

.alignleft {
	@extend %_align-styles;

	@include breakpoint( $xs ) {
		float: left;
		margin: 0 $margin-floated-content $margin-floated-content 0;
	}
}

// Visual Editor Align Center Class
//
// The class WordPress generates when you center something in the
// visual editor.
//
// Styleguide WordPress.Visual Editor.Align Center Class
//
// Access: Public
//
// Since: 1.0.0

.aligncenter {
	display: block;
	margin: 0 auto $margin-floated-content;
}

// The class WordPress generates for caption text on images in the visual editor.
//
// Access: Public
//
// Since: 1.0.0

.wp-caption-text {
	@extend %font-size-minimum;
	clear: both;
	color: var(--caption-text-color, #{$color-caption});
	font-family: var(--caption-text-font, #{$font-family-caption});
	line-height: 1.4;
}

// Responsive Table Placeholder
//
// A placeholder which controls responsive styling for tables.
// You may want to extend this if you can't use the responsive-table class
// for some reason, or if you need to make significant overrides and want to
// leave the base styles intact.
// You must wrap the class this uses around a table for it to work. It will
// not work if you just put it on the table.
//
// Styleguide Content.Tables.Responsive Table Placeholder
//
// Access: Public
//
// Since: 1.0.0

%resposive-table-styles {
	position: relative;

	@media screen and ( max-width: #{$container-md} ) {
		margin: 35px 0;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		overflow-x: auto;
		overflow-y: hidden;
		width: 100%;

		// Tighten up spacing
		table {
			margin: 0;
			table-layout: auto;

			td {
				white-space: nowrap; // Ensure the content doesn't wrap
			}
		}
	}
}

// Responsive Table Class
//
// A class for responsive styling on tables.
// This class will make the table scrollable below the medium breakpoint.
// You must wrap the table in a div with this class. It will not work if you
// put it directly on the table.
//
// Styleguide Content.Tables.Responsive Table Class
//
// Access: Public
//
// Since: 1.0.0

.responsive-table {
	@extend %resposive-table-styles;
}

// For code within the WordPress content area.
//
// Access: Public
//
// Since: 1.0.0

.content {
	p {
		code {
			font-size: 90%;
		}
	}
}

.syntaxhighlighter {
	.container {
		display: block;
	}
}