@import "../../variables";

.ghostkit-component-modal {
	// Disable animation for now, because it conflicts with the React Select menu position.
	position: relative;
	animation: none;

	@media (min-width: 600px) {
		min-width: 600px;
		max-width: 600px;

		// fix for Ace editor tooltips
		margin-left: -300px;
		transform: none;

		// position
		&.ghostkit-component-modal-position-top {
			top: 112px;
		}
	}

	// size
	@media (min-width: 840px) {
		&.ghostkit-component-modal-size-lg {
			min-width: 800px;
			max-width: 800px;

			// fix for Ace editor tooltips
			margin-left: -400px;
			transform: none;
		}
	}

	// Fix for new WP 5.9 styles
	body > .components-modal__screen-overlay & {
		@media (min-width: 600px) {
			margin-left: auto;

			// position
			&.ghostkit-component-modal-position-top {
				top: 0;
				margin-top: 112px;
			}
		}

		// size
		@media (min-width: 840px) {
			&.ghostkit-component-modal-size-lg {
				margin-left: auto;
			}
		}
	}

	// header
	.components-modal__header {
		.components-modal__icon-container svg {
			display: block;
			margin-right: 10px;
		}

		.components-modal__header-heading {
			font-weight: 600;
		}
	}

	// tab panel
	.ghostkit-component-modal-tab-panel {
		.components-tab-panel__tabs {
			margin-top: -16px;
			margin-right: -16px;
			margin-left: -16px;

			.ghostkit-control-tabs-tab {
				padding: 12px 16px;
				color: inherit;

				&:focus {
					outline: none;
				}
			}
		}
	}
}