// =================================================================
// Drawer Styles - Configurable
// =================================================================
//
//
// Styles in this file should mainly be for layout, width, etc that are
// not able to be overwritten by the variables in the global sass array
//
//

.wp-block-editorial-drawer {

	&.is-style-round .wp-block-editorial-drawer-teaser {
		figure {
			@include border-radius( 50% );
			height: 150px;
			margin: 0 auto 0.7em auto;
			overflow: hidden;
			width: 150px;

			img {
				@include object-fit( cover );
				height: 100%;
			}
		}
	}

	&.is-size-narrow .wp-block-editorial-drawer-teaser {
		@extend %col-sm-quarter;
	}

	&.is-size-small .wp-block-editorial-drawer-teaser {
		@extend %col-sm-third;
	}

	&.is-size-medium .wp-block-editorial-drawer-teaser {
		@extend %col-sm-5;
	}

	&.is-size-wide .wp-block-editorial-drawer-teaser {
		@extend %col-sm-half;
	}

	&.is-size-narrow,
	&.is-size-small,
	&.is-size-medium,
	&.is-size-wide {
		.wp-block-editorial-drawer-teaser {
			float: none;
			margin: 0 auto;
			//padding: 10px;
		}
	}

	// Alignment options

	&.alignleft,
	&.alignright {
		// reset defaults so align left and
		// right are not applying to the <aside> parent
		// this causes theh parent div to still be full width,
		// but have height of basically zero
		float: none;
		display: inline;
		max-width: none;
	}

	&.alignleft .wp-block-editorial-drawer-teaser,
	&.alignright .wp-block-editorial-drawer-teaser {

		// make the teaser narrower size when
		// align left and right is set

		@extend %col-sm-quarter;

		&::before,
		&::after {
			display: none;
		}
	}

	&.alignleft .wp-block-editorial-drawer-wrapper,
	&.alignright .wp-block-editorial-drawer-wrapper {
		&::before,
		&::after {
			display: none;
		}
	}


	&.alignfull {
		&::before,
		&::after {
			width: 100%;
		}
	}

	&.alignleft .wp-block-editorial-drawer-teaser {
		// float the teaser left, but not the <aside>
		float: left;
		margin: 0 0 45px;

		@include breakpoint( $sm ) {
			margin: 0 30px 20px;
		}
	}

	&.alignright .wp-block-editorial-drawer-teaser {
		// float the teaser right, but not the <aside>
		float: right;
		margin: 0 0 45px;

		@include breakpoint( $sm ) {
			margin: 0 30px 20px;
		}
	}

	// theme options

	&.has-dark-background .wp-block-editorial-drawer-content {
		background: $color-grayscale-4;

		h2 {
			color: $color-grayscale-f;
		}

		p,
		ul,
		ol {
			color: $color-grayscale-f0;
		}

		&::before,
		&::after {
			display: none;
		}
	}

	&.has-light-background .wp-block-editorial-drawer-content {
		background: $color-grayscale-e;

		&::before,
		&::after {
			border-color: $color-grayscale-f;
		}
	}
}

.wp-block-editorial-drawer-teaser {
	@extend %col-full;
	clear: both;
	margin: 15px 0 0;
	text-align: center;

	&::before,
	&::after {
		border-bottom: 4px solid $color-grayscale-e;
		content: '';
		display: block;
		margin: 0 auto;
		padding: 20px 0;
		width: 20%;
	}

	&::before {
		border-bottom: 0;
		border-top: 4px solid $color-grayscale-e;
	}

	p {
		color: $color-grayscale-6;
		line-height: 1.5;
		margin: 0 0 1em 0;
		font-size: 17px;
	}

	h2 {
		font-size: 1.4em;
	}

	.js-bu-block-drawer-open {
		margin-right: 0;
	}
}

.wp-block-editorial-drawer-content {
	@include transition( all 0.5s ease-in-out );
	@extend %clearfix;
	@extend %col-full;
	clear: both;
	display: none;
	margin: 10px 0;
	opacity: 0;
	position: relative;

	.wp-block-editorial-drawer-wrapper {
		@extend %clearfix;
		margin: 0;
		padding: 30px 30px 0;

		&::before,
		&::after {
			border-bottom: 4px solid $color-grayscale-e;
			content: '';
			display: block;
			margin: 0 auto;
			padding: 20px 0;
			width: 100%;
		}

		&::before {
			border-bottom: 0;
			border-top: 4px solid $color-grayscale-e;
		}
	}

	&.alignleft,
	&.alignright {
		max-width: 100%;
	}
}

.wp-block-editorial-drawer-close {
	width: 100%;
	text-align: center;
}


.wp-block-editorial-drawer {
	&.show-drawer {
		.wp-block-editorial-drawer-content {
			display: block;
			opacity: 1;
		}

		&.alignleft .wp-block-editorial-drawer-teaser,
		&.alignright .wp-block-editorial-drawer-teaser {
			margin-bottom: 0;
		}

		&.alignleft .wp-block-editorial-drawer-content,
		&.alignright .wp-block-editorial-drawer-content {
			margin-bottom: 45px;
		}
	}

	&.show-drawer.has-hide-teaser {
		.wp-block-editorial-drawer-teaser {
			display: none;
			opacity: 0;
		}
	}

	&.alignfull {
		.wp-block-editorial-drawer-wrapper {
			@include breakpoint($md ) {
				padding: 74px 60px;
			}
		}
	}
}