//
// Dialog for templates, icons, kits, etc.
//

.elementor-templates-modal {

	.dialog-widget-content {
		font-family: $admin-font-family;
		background-color: var(--e-a-bg-default);
		width: 100%;

		@media (max-width: $library_screen_breakpoint) {
			max-width: 990px;
		}

		@media (min-width: $library_screen_breakpoint + 1) {
			max-width: 1200px;
		}
	}

	.dialog {

		&-header {
			border-block-end: var(--e-a-border);
			padding: 0;
			z-index: 1;
		}

		&-buttons-wrapper {
			border-block-start: var(--e-a-border);
			padding: 10px;
			display: flex;
			justify-content: flex-end;
			gap: 15px;
		}

		&-message {
			height: 750px;
			max-height: 85vh;
			overflow-y: auto;
			padding: 20px;
		}

		&-content {
			height: 100%;
			text-align: center;
		}

		&-loading {
			display: none;
		}
	}

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50px;

		&__logo {
			line-height: 1;
			text-transform: uppercase;
			font-weight: bold;
			cursor: pointer;

			&-area {
				text-align: start;
				padding-inline-start: 15px;

				> * {
					display: flex;
					align-items: center;
				}
			}

			&__icon-wrapper {
				margin-inline-end: 10px;
				font-size: 12px;
			}

			&__title {
				color: var(--e-a-color-txt-active);
				padding-block-start: 2px;
			}
		}

		&__items-area {
			display: flex;
			flex-direction: row-reverse;
		}

		&__item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: content-box;

			> i {
				font-size: 20px;
				transition: var(--e-a-transition-hover);
				cursor: pointer;

				&:hover {
					color: var(--e-a-color-txt-hover);
				}
			}
		}

		&__close {

			&--normal {
				width: 47px;
				border-inline-start: var(--e-a-border);

				i {
					font-size: 18px;
				}
			}

			&--skip {
				padding: 10px;
				padding-inline-start: 20px;
				margin-inline-end: 10px;
				font-size: 11px;
				font-weight: normal;
				line-height: 1;
				border-radius: var(--e-a-border-radius);
				cursor: pointer;

				> i {
					font-size: inherit;
					padding-inline-start: 10px;
					margin-inline-start: 15px;
					border-inline-start: 1px solid;

					&:not(:hover) { // Overwrite the default
						color: var(--e-a-color-white);
					}
				}
			}
		}
	}

	&__sidebar {
		flex-shrink: 0;
		width: 25%;
		border-inline-end: var(--e-a-border);
	}

	&__content {
		flex-grow: 1;
	}
}
