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

/*
Adding these here for now until common-styles are live
@TODO: remove when that happens.
*/
@svg-load close-secondary url('utilities/icons/close.svg') {

	path {
		stroke: var(--color-icon-secondary);
	}
}

@svg-load close url('utilities/icons/close.svg') {

	path {
		stroke: var(--color-icon-primary);
	}
}
.tribe-common {
	/* vars */
	.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 */
	div.tribe-dialog {
		align-items: center;
		display: flex;
		height: 100vh;
		justify-content: center;
		left: 0;
		position: fixed;
		top: 0;
		width: 100vw;
		z-index: 1;

		&[aria-hidden='true'] {
			display: none;
		}
	}

	/* The trigger button" */
	.tribe-dialog__trigger {}

	/* The overlay */
	.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-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;

		div[role="document"] {
			align-items: flex-end;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			position: relative;
		}

		@media screen and (min-width:768px) {
			max-height: calc(100vh - 160px);
			padding: var(--tribe-dialog-padding-top) var(--tribe-dialog-padding-side);
		}
	}

	/* The "close" button */
	.tribe-dialog__close-button {
		background: var(--tribe-dialog-close-background);
		background-image: svg-inline( 'close-secondary' );
		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;

		@media screen and (min-width:768px) {
			height: var(--tribe-dialog-close-height-desktop);
			line-height: var(--tribe-dialog-close-height-desktop);
			width: var(--tribe-dialog-close-height-desktop);
		}

		&:focus,
		&:hover {
			background: var(--tribe-dialog-close-background);
			background-image: svg-inline( 'close' );
			background-size: contain;
			outline: none;
		}
	}

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

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

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

	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-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-dialog__title + .tribe-dialog__content {
		padding: 0;
	}

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

	/* Modal Styles */

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

	/* Confirmation Styles */

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

	.tribe-dialog__button_wrap {
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-end;
	}

}