@import "~@wordpress/base-styles/variables";
@import "~@wordpress/base-styles/mixins";
@import "~@wordpress/base-styles/breakpoints";
@import "../common/variables.scss";

#gdl-publish-guide .gdl-launch-site-success-modal__site-description-container__site-name {
	margin-bottom: inherit !important;
}

#gdl-publish-guide {
	bottom: 20px;
	color: #1e1e1e;
	font-size: 16px;
	position: fixed;
	right: 20px;
	z-index: 99999;

	* {
		box-sizing: border-box;
		letter-spacing: inherit;
		line-height: 1.2;
		text-transform: inherit;
	}

	p {
		margin: 0.5em 0;
	}

	.publish-guide-trigger {
		height: 4.5em;
		width: 4.5em;
	}

	.publish-guide-trigger__button {
		border-radius: 110px;
		box-shadow: 0 0 18px rgba(17, 17, 17, 0.07), 0 16px 12px rgba(17, 17, 17, 0.1), 0 9px 12px rgba(17, 17, 17, 0.07);
		height: auto;
		margin: 0.5rem;
		padding: 1em;
		position: absolute;
		right: 0;
		transition: 1s;

		svg {
			display: block;
			margin-left: 0;
			right: -1px;
			top: 0;
			transform: scale(1);
		}

		&__launch {
			font-size: $grid-unit-20;
			line-height: $icon-size; // Line height should be the same height as an icon.
			padding: 0 12px;
		}
	}

	.publish-guide-popover {
		&.components-popover {
			z-index: 2;

			.components-popover__content {
				border-radius: 8px;
				box-shadow: 0 0 36px rgba(17, 17, 17, 0.07), 0 32px 24px rgba(17, 17, 17, 0.1), 0 18px 24px rgba(17, 17, 17, 0.07);

				& > div {
					overflow: hidden;
					padding: 0;
				}
			}
		}

		&__display-none {
			display: none !important;
		}

		&__header {
			background-color: #fff;
			border: 0;
			display: block;
			height: auto;
			margin: 0;
			padding: 0;
			position: static;

			&__progress {
				width: 100%;
			}

			&__content {
				padding: 1.25em 1.5em 0.9375em;
			}

			&__title {
				color: #111;
				font-size: 1.125em;
				line-height: 1.5;
			}

			p {
				color: #757575;
				font-size: 0.875em;
				line-height: 1.5;
				margin: 0;
			}
		}

		&__items {
			list-style-type: none;
			margin: 0;
			overflow: hidden;
			padding: 0.75em 0;
		}

		&__item {
			background-color: #fff;
			display: flex;
			float: none;
			margin: 0;
			transition: background-color 0.2s;

			&:last-of-type {
				border-bottom: 0;
			}

			&.is-completed {
				.publish-guide-popover__item__title {
					color: #767676;
					text-decoration: line-through;
				}
			}

			&.is-selected {
				.publish-guide-popover__item__content {
					padding-bottom: 1em;
				}

				.publish-guide-popover__item__title > svg {
					top: 0;
					transform: scaleY(-1);
				}
			}

			&__checkmark-icon:hover {
				cursor: pointer;
			}

			&__content {
				padding: 0.5em 1.5em;
				width: 100%;

				& > .item {
					align-items: center;
					display: flex;

					& > svg {
						flex: 0 0 19.5px;
						margin-right: 1.03125em;
					}
				}

				& > .info {
					padding: 0 2.25em;

					& > p {
						color: #767676;
						font-size: 0.875em;
						line-height: 1.5;
						margin: 0;
						padding: 0.25em 0 0.75em;
					}

					& > p,
					& > a.is-link,
					& > button:not(.publish-guide-popover__item__title) {
						font-weight: 300;
					}

					& > a.is-link,
					& > button:not(.publish-guide-popover__item__title) {
						font-size: 0.875em;
						font-weight: 850;
						line-height: 1.5;
						text-decoration: underline;
					}
				}

				button.is-link > svg {
					position: relative;
					top: 1px;
				}

				button.is-skip {
					color: #767676;
					font-weight: 300 !important;
					margin-left: 1em;
				}
			}

			&__title {
				background: transparent;
				border: 0;
				color: #111;
				display: block;
				font-size: 1em;
				font-weight: 300;
				line-height: 1.5;
				margin: 0;
				padding: 0;
				text-align: left;
				width: 100%;

				&:hover {
					cursor: pointer;
				}

				& > svg {
					float: right;
					position: relative;
					top: 1px;
				}
			}

			&__text {
				color: $gray-700;
				font-size: 1em;
				margin-bottom: 0;
				margin-top: 0.7em;
			}

			&__cta.components-button {
				color: var(--wp-admin-theme-color);
				display: block;
				font-size: 1em;
				text-decoration: none;
			}

			.components-base-control__label {
				margin-bottom: 5px;
			}

			.components-base-control {
				margin-bottom: 15px;
			}
		}

		&__success {
			background-color: #fff;
			padding: 2em 1.75em 3.5em;
			text-align: center;

			> div {
				font-size: 14.22px;
				line-height: 21.33px;
			}

			> h3 {
				font-size: 18px;
				font-weight: 850;
				line-height: 27px;
			}
		}

		&__opt-out-link {
			background-color: transparent;
			border: none;
			color: inherit;
			cursor: pointer;
			font-size: 14px;
			margin-bottom: 1.2em;
			margin-top: 0.4rem;
			padding: inherit;
			text-align: center;
			text-decoration: underline;
			width: 100%;

			&:hover {
				background-color: inherit;
			}
		}

		&__more-dropdown .components-button:focus:not(:disabled) {
			box-shadow: none !important;
		}

		&.components-animate__appear {
			animation-duration: 250ms;
			animation-iteration-count: 1;
			animation-name: PublishGuidePopover;
		}

		.components-popover__content {
			border: 0;
			border-radius: 0;
			box-shadow: none;
			max-height: calc(100vh - 200px) !important;
			min-width: 337px;

			@include break-medium() {
				max-height: 80vh !important;
			}
		}

		.components-checkbox-control__input-container,
		.components-checkbox-control__input[type="checkbox"] {
			height: 20px;
			width: 20px;
		}
	}

	.publish-guide-progress {
		height: 5px;
		position: relative;

		&-bar-background {
			background: $godaddy-color-progress-bar-background;
			height: 100%;
			width: 100%;
		}

		&-bar-foreground {
			background: $godaddy-color-progress-bar-foreground;
			height: 100%;
		}

		&__label {
			color: #129d9e;
			display: inline-block;
			font-weight: 500;
			left: calc(50% - 4px);
			position: absolute;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
}

.publish-guide-tooltip {
	display: none;
	transition: opacity 0.25s;

	// Style handles 6.0 compatibility.
	&.components-popover:not(.is-without-arrow)[data-y-axis="top"] {
		margin-top: 0;
	}

	@include break-medium() {
		display: block;
	}

	&--next {
		top: 100px;
		transition: top 1s;
	}

	&:not(.is-without-arrow)::before {
		border-color: $godaddy-everyday-blue-500;
	}

	.components-popover__content {
		border-color: $godaddy-everyday-blue-500;
		border-radius: 8px;
		box-shadow: 0 0 18px rgba(17, 17, 17, 0.07), 0 16px 12px rgba(17, 17, 17, 0.1), 0 9px 12px rgba(17, 17, 17, 0.07);
		cursor: pointer;
		padding: 1rem 1.25rem;
		width: 280px;

		.publish-guide-tooltip__label {
			align-items: center;
			display: inline-flex;
			font-size: 0.8125rem;
			font-weight: 850;
			line-height: 1;
			margin: 0 0 1rem;
			text-transform: uppercase;

			& > svg {
				display: inline-block;
				margin-right: 0.375rem;
			}
		}

		.publish-guide-tooltip__title {
			font-size: 1.125rem;
			line-height: 1.33;
			margin: 0 0 0.5rem;
		}

		.publish-guide-tooltip__description {
			font-size: 0.875rem;
			line-height: 1.43 !important;
		}

		.publish-guide-tooltip__close {
			background: none;
			border: 0;
			position: absolute;
			right: 0.2em;
			top: 0.2em;
			width: 1.25em;

			&:hover {
				cursor: pointer;
			}
		}
	}
}

.publish-guide-menu-item {
	&__header {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
	}

	&__confirm {
		background-color: transparent;
		border: 1px solid #737373;
		border-radius: 5px;
		cursor: pointer;
		font-size: 14px;
		padding: 6px 12px;
	}
}

.publish-guide-menu-item-tooltip {
	.components-popover__content {
		cursor: auto;
		width: 360px;
	}
}

.publish-guide-popover__modal {
	max-width: 700px !important;

	.publish-guide-site-info__content {
		display: flex;
		margin: 1.25em 0;

		@media (max-width: 600px) {
			flex-direction: column;

			.publish-guide-site-info__section.form-section {
				padding: 1.75em 0;
				width: 100%;
			}

			.publish-guide-site-info__section.preview-section {
				padding: 1.75em;
				width: 100%;
			}
		}

		.publish-guide-site-info__section {
			padding: 1.75em;
			width: 50%;

			&.form-section {
				padding-left: 0;
			}

			&.preview-section {
				background-color: #d8efef33;
				font-size: 12px;

				.preview-info {
					background: #f5f5f5;
					padding: 1em;

					&__site-url {
						color: $godaddy-everyday-blue-500;
					}

					p {
						margin: 0;
					}
				}

				.preview-subtext {
					font-size: 11px;
				}

				h4 {
					margin: 0;
				}
			}
		}
	}

	.publish-guide-site-info__action {
		text-align: right;
	}
}

// specifically make theme overlay higher zindex than the publish guide button
.theme-wrap {
	z-index: 100000 !important;
}

#gdl-publish-guide .publish-guide-migrate {

	.publish-guide-popover__link {
		color: inherit;
	}

	.gdl-live-site-button__container {
		padding: 0.5em 1.5em 1.5em;
	}
}

// RTL support
body.rtl {
	.publish-guide-trigger.is-shifted {
		left: $sidebar-width + $grid-unit-40;
		right: unset;
	}
}

// Animations

@keyframes PublishGuidePopover {
	0% {
		opacity: 0;
		transform: translateY(20px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}