/* stylelint-disable selector-class-pattern, no-descending-specificity */

@use "../common/mixins" as *;
@use "../common/variables" as *;

.urlslab-panel {
	background-color: $white;
	border-radius: $br-10;
	color: $black;
	padding: 1.5em;
	filter: $box-shadow-small;

	ul {
		font-size: 0.75rem;
	}

	&.Details,
	&.customPadding {

		.urlslab-panel-content {
			display: block;
			padding-bottom: 0;
		}

		.table-container {

			@include scrollbar;
			display: flex;
			flex-direction: column;
			overflow: hidden auto;
			background-color: $grey-lighter;
			max-height: 44vh;

			.urlslab-progressBar-wrapper {
				margin-top: auto;
			}
		}

		.urlslab-table-container {
			width: 100% !important;
		}

	}

	&-modal[class] {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		position: fixed;
		top: 0;
		left: calc(50% + 80px); //WP Admin menu half width of 160px
		transform: translateX(-50%);
		overflow-x: hidden;
		height: 100vh;
		z-index: 9999;

		.urlslab-panel {
			padding: 1.5em;


			&.Details,
			&.customPadding {
				padding: 1.5em 0;

				.urlslab-panel-close {
					margin-right: 0;
				}

				.urlslab-panel-header:not(.urslab-TableFilter-panel-header) {
					padding: 0 1.5em;
					margin: 0;

					h3 {
						font-size: 1.125rem;
						width: calc(100% - 3em);

						a {
							display: flex;
							align-items: center;
						}

						svg {
							position: relative;
							top: -0.075em;
							flex: 0 0 1.5em;
							margin-left: 0.5em;
							fill: currentcolor;
							height: 1.25rem;
							width: 1.25rem;
						}
					}
				}

				.padded {
					padding: 0 1.5rem;
				}

				.table-container {

					.urlslab-table-container {
						height: auto !important;
					}

				}

				.urslab-floating-panel {
					z-index: 2;
				}

				.urslab-TableFilter-panel {
					// reproduce styling correction from ModuleViewHeader
					.urlslab-SortMenu {
						min-width: 13em;
						max-width: none;
					}
				}
			}
		}

		@media (min-width: $breakpoint-tablet-landscape) {
			margin: 0;

			.urlslab-panel {
				padding: 1.375em 1.875em;

				&.Details,
				&.customPadding {
					padding: 1.375em 0;

					.urlslab-panel-header:not(.urslab-TableFilter-panel-header) {
						padding: 0 1.875em;
					}


					.padded {
						padding: 0 1.875rem;
					}

					.table-wrapper {
						background-color: $grey-lighter;
						padding: 1.5em;
					}
				}
			}
		}
	}

	&-close {

		@include square(2.25em);
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: $grey-light !important;
		margin-left: auto;
		margin-bottom: 1.5em;

		svg {

			@include square(0.75em);
			flex: 0 0 auto;
			fill: $grey-darker;
		}

		@media (min-width: $breakpoint-tablet) {
			margin-right: 1em;
		}
	}

	.removeFile {

		svg {

			@include square(1em);
			margin-left: 0.5em;
		}
	}

	&-header {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding: 0 1.5em 0;
		margin-left: -1.5em;
		border-bottom: 1px solid $grey-light;

		h3 {
			margin-bottom: 0.75em;
		}

		@media (min-width: $breakpoint-tablet) {
			padding: 0 1em 0 2.25em;
			margin-left: -2.25em;
			margin-right: -2em;
		}
	}

	&-wrap {
		margin: 1.5em;

		@media (min-width: $breakpoint-tablet-landscape) {
			width: 35.625em;
			margin: 6.25em auto auto;

			&.wide {
				width: 48em;
			}

			&.ultrawide {
				width: 57.5em;
			}
		}
	}

	&-content {

		@include scrollbar;
		max-height: 30vh;
		padding-bottom: 3em;
		margin-right: -1.5em;
		padding-right: 1.5em;
		overflow-y: scroll;

		@media (min-height: 31.25em) {
			max-height: 60vh;
		}

		@media (min-height: 56.25em) {
			max-height: 70vh;

			&.no-scrollbar {
				overflow-y: visible;
			}
		}

		h4 {
			width: 100%;
			margin: 1em 0 2em;
			padding-bottom: 0.5em;
			border-bottom: 1px solid $grey-light;
		}
	}

	&-section {
		padding: 1.5em;
		margin: 1.375em -1.5em;
		background-color: $grey-lightest;
		border-bottom: 1px solid $grey-light;

		p {
			font-size: 0.75rem;
		}

		ul {

			li {
				font-style: italic;
				margin-bottom: 0.25em;
			}
		}

		@media (min-width: $breakpoint-tablet) {
			padding: 1.375em 2.25em;
			margin: 1.375em -2.25em;
		}
	}

	.react-datepicker {

		&-wrapper {
			display: block;
		}

		&__input-container {
			display: flex;
		}

		&-popper {
			z-index: 3; // cover custom selects z-index
		}
	}

	@media (min-width: $breakpoint-tablet) {
		padding: 1.875em 4em;

		&-content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background-color: $white;

			&__item {

				&.fullWidth {
					width: 100%;

					.button,
					button {
						width: auto !important;
					}
				}

				&:not(.fullWidth) {
					width: 48.25%;
				}

				.urlslab-MultiSelectMenu {
					max-width: none;
				}
			}
		}
	}


	// Corrections for AI Content -> Results edit row modal
	&-wrap[data-table="generator/result"] {

		.urlslab-panel {
			height: 90vh;
			display: flex;
			flex-direction: column;

			&-content {
				height: 100%;
				display: flex;
				flex-wrap: nowrap;
				flex-direction: column;
				justify-content: flex-start;
				padding: 0;
				padding-right: 0.5rem;

				.fullHeight {

					textarea {
						min-height: 150px;
					}
				}
			}
		}
	}
}