/**
 * This CSS file was auto-generated via PostCSS
 *
 * Contributors should avoid editing this file, but instead edit the associated
 * src/resources/postcss/ file. For more information, check out our engineering
 * docs on how we handle CSS in our engineering docs.
 *
 * @see: http://moderntribe.github.io/products-engineering/css/
 */

/* = Dialogs
This can include modals, toasters, confirms. alerts.
============================ */

/*
Adding these here for now until common-styles are live
@TODO: remove when that happens.
*/

/* vars */

.tribe-common .tribe-dialog {
		--tribe-dialog-background-color: #FFF;
		--tribe-dialog-close-background: #FFF;
		--tribe-dialog-close-border-color: #BABABA;
		--tribe-dialog-close-border-width: 1px;
		--tribe-dialog-close-color: #BABABA;
		--tribe-dialog-close-height: 12px;
		--tribe-dialog-close-height-desktop: 16px;
		--tribe-dialog-overlay-color: transparent;
		--tribe-modal-overlay-color: rgba(20,24,39,0.9);
		--tribe-dialog-border-radius: 4px;
		--tribe-dialog-padding: 16px;
		--tribe-dialog-padding-top: 24px;
		--tribe-dialog-padding-side: 28px;
	}

/* The dialog/popup/modal itself */

.tribe-common div.tribe-dialog {
		-webkit-box-align: center;
		        align-items: center;
		display: -webkit-box;
		display: flex;
		height: 100vh;
		-webkit-box-pack: center;
		        justify-content: center;
		left: 0;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 1;
	}

.tribe-common div.tribe-dialog[aria-hidden='true'] {
			display: none;
		}

/* The trigger button" */

.tribe-common .tribe-dialog__trigger {}

/* The overlay */

.tribe-common .tribe-dialog__overlay {
		background-color: var(--tribe-dialog-overlay-color);
		height: 100vh;
		left: 0;
		opacity: .9;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 1;
	}

/* Content wrapper - includes close button*/

.tribe-common .tribe-dialog__wrapper {
		background-color: var(--tribe-dialog-background-color);
		border-radius: var(--tribe-dialog-border-radius);
		box-shadow: 0 2px 54px 0 var(--tribe-modal-overlay-color);
		width: 800px;
		overflow-y: scroll;
		padding: var(--tribe-dialog-padding);
		max-height: 100vh;
		max-width: 100vw;
		z-index: 2;
	}

.tribe-common .tribe-dialog__wrapper div[role="document"] {
			-webkit-box-align: end;
			        align-items: flex-end;
			display: -webkit-box;
			display: flex;
			-webkit-box-orient: vertical;
			-webkit-box-direction: normal;
			        flex-flow: column;
			-webkit-box-pack: justify;
			        justify-content: space-between;
			position: relative;
		}

/* The "close" button */

.tribe-common .tribe-dialog__close-button {
		background-color: var(--tribe-dialog-close-background);
		background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd' stroke-linecap='square' stroke-width='2'%3E%3Cpath d='M16 2L2 16M16 16L2 2' stroke='var(--color-icon-secondary)'/%3E%3C/g%3E%3C/svg%3E" );
		background-repeat: no-repeat;
		background-size: contain;
		cursor: pointer;
		display: inline-block;
		font-size: 14px;
		height: var(--tribe-dialog-close-height);
		line-height: var(--tribe-dialog-close-height);
		padding: 0;
		position: absolute;
		width: var(--tribe-dialog-close-height);
		z-index: 1;
	}

.tribe-common .tribe-dialog__close-button:focus,
		.tribe-common .tribe-dialog__close-button:hover {
			background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd' stroke-linecap='square' stroke-width='2'%3E%3Cpath d='M16 2L2 16M16 16L2 2' stroke='var(--color-icon-primary)'/%3E%3C/g%3E%3C/svg%3E" );
			background-size: contain;
			outline: none;
		}

.tribe-common .tribe-dialog__close-button--hidden {
		display: none;
	}

.tribe-common .tribe-dialog__close-button--round {
		border-radius: 50%;
	}

.tribe-common .tribe-dialog__close-button--border {
		border: var(--tribe-dialog-close-border-width) solid var(--tribe-dialog-close-border-color);
	}

.tribe-common h2.tribe-dialog__title {
		align-self: flex-start;
		margin: 0 0 22px;
		padding-right: calc(var(--tribe-dialog-close-height) + 0.5em);
		padding-top: 0;

	}

/* The content container*/

.tribe-common .tribe-dialog__content {
		color: #141827;
		font-size: 14px;
		line-height: 1.64em;
		padding-right: calc(var(--tribe-dialog-close-height) + 0.5em);
		padding-top: calc(var(--tribe-dialog-close-height) + 0.5em);
		width: 100%;
	}

.tribe-common .tribe-dialog__title + .tribe-dialog__content {
		padding: 0;
	}

/* Modal Styles */

.tribe-common .tribe-modal__overlay {
		background-color: var(--tribe-modal-overlay-color);
	}

/* Confirmation Styles */

.tribe-common .tribe-confirm__content {
		padding-right: 0;
	}

.tribe-common .tribe-dialog__button_wrap {
		display: -webkit-box;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		        flex-flow: row wrap;
		-webkit-box-pack: end;
		        justify-content: flex-end;
	}

@media screen and (min-width:768px) {

.tribe-common .tribe-dialog__wrapper {
			max-height: calc(100vh - 160px);
			padding: var(--tribe-dialog-padding-top) var(--tribe-dialog-padding-side)
	}

.tribe-common .tribe-dialog__close-button {
			height: var(--tribe-dialog-close-height-desktop);
			line-height: var(--tribe-dialog-close-height-desktop);
			width: var(--tribe-dialog-close-height-desktop)
	}
		}

@media screen and (max-width:768px) {
		.tribe-common .tribe-dialog__content:last-of-type {
			padding-bottom: 36px;
		}
	}