$main-bg: #F4F4F4;
$secondary-text: #848484;
$main-color: #151414;
$border-color: #E5E5E5;
$primary: #0366D5;

@mixin primary-button-styles {
	padding: 16px 32px;
	justify-content: center;
	align-items: center;
	gap: 32px;
	border-radius: 5px;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	height: auto;
}

div.error, div.notice {
	display: none;
}

#otter-onboarding {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	background: $main-bg;
	overflow: auto;
	--wp-components-color-accent: #0366D5;
}

.o-onboarding {
	display: grid;
	grid-template-columns: 1fr 3fr;
	width: 100vw;
	height: 100vh;
	font-family: Arial,sans-serif;

	@media ( max-width: 600px ) {
		display: block;
	}

	@media ( min-width: 600px ) and ( max-width: 1023px ) {
		grid-template-columns: 2fr 3fr;
	}

	@media ( min-width: 1920px ) {
		grid-template-columns: 1fr 4fr;
	}
}

.o-start,
.o-finish {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;

	&__container {
		padding: 5rem;
		max-width: 726px;

		h1 {
			font-size: 40px;
			font-style: normal;
			font-weight: 700;
			line-height: 1.35;
		}

		p {
			font-size: 18px;
			font-style: normal;
			font-weight: 400;
			line-height: 1.75;
		}

		.components-checkbox-control__label {
			color: $main-color;
			font-size: 12px;
			font-style: normal;
			font-weight: 700;
			line-height: 140%;
			text-transform: uppercase; 
		}

		.components-text-control__input {
			border-radius: 6px;
			border: 1px solid $border-color;
			background: #FFF;
			padding: 0.8rem 1.2rem;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 170%;
			max-width: 360px;

			&::placeholder {
				color: $secondary-text;
			}
		}

		.components-button.is-primary {
			@include primary-button-styles;
			margin-top: 1rem;
		}

		.components-button.is-tertiary {
			color: $secondary-text;
			padding: 16px 32px;
			margin-top: 1rem;
			font-size: 18px;
			font-style: normal;
			font-weight: 700;
			height: auto;
		}

		.components-external-link__icon {
			display: inline;
		}
	}

	&__logo {
		width: 80px;
		height: 80px;
		margin-bottom: 1rem;
	}

	&__actions {
		display: flex;
		align-items: center;
		gap: 16px;
	}
}

.o-start {
	background: #fff;
}

.o-finish {
	&__container {
		background: #fff;
		border-radius: 32px;
	}
}

.o-sidebar {
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,.1);
	display: flex;
	flex-direction: column;
	overflow: scroll;

	@media ( max-width: 600px ) {
		height: 100vh;
	}

	&__loader {
		height: 100vh;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25vw;
		background: rgba(255, 255, 255, 0.5);
		z-index: 9;

		@media ( max-width: 600px ) {
			width: 100vw;
		}

		@media ( min-width: 600px ) and ( max-width: 1023px ) {
			width: 40vw;
		}
	
		@media ( min-width: 1920px ) {
			width: 20vw;
		}
	}

	&__header {
		padding: 2rem 2rem 0 2rem;
		display: flex;
		justify-content: space-between;
		align-items: center;	  
	}

	&__logo {
		width: 64px;
		height: 64px;
	}

	&__content {
		flex: 1;
		padding: 0 2rem 2rem 2rem;
	}

	&__info {
		padding: 2rem 0 4rem 0;

		h2 {
			color: $main-color;
			margin: 0 0 1rem 0;
			font-size: 24px;
			font-style: normal;
			font-weight: 700;
			line-height: 150%;
		}

		p {
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 170%;
		}
	}

	&__controls {
		display: flex;
		flex-direction: column;
		gap: 20px;

		.components-base-control__label {
			color: $main-color;
			font-size: 20px;
			font-style: normal;
			font-weight: 700;
			line-height: 150%;
			text-transform: none;
		}

		.components-text-control__input {
			border-radius: 6px;
			border: 1px solid $border-color;
			background: #FFF;
			padding: 0.8rem 1.2rem;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 170%;

			&::placeholder {
				color: $secondary-text;
			}
		}
	}

	&__actions {
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		position: sticky;
		bottom: 0;
		padding: 2rem;

		.components-button.is-primary {
			@include primary-button-styles;
			width: 100%;
		}

		.components-button.is-tertiary {
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			--wp-components-color-accent: $secondary-text;
		}
	}

	.o-logo {
		&__placeholder {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 32px;
			border-radius: 8px;
			border: 1px dashed $secondary-text;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 170%;
			height: 150px;
			cursor: pointer;
		}

		&__image {
			max-height: 150px;
			cursor: pointer;
			display: flex;
			flex-direction: column;
			align-items: center;

			img {
				width: 100%;
				max-height: 150px;
				object-fit: contain;
			}

			&__controls {
				display: flex;
				gap: 8px;
				margin-top: 16px;
			}
		}
	}

	.o-palettes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16px;

		.o-palette {
			border-radius: 2px;
			box-shadow: 0 0 0 1px #e0e0e0;
			outline: 1px solid #f000;
			padding: 2px;
			position: relative;
			aspect-ratio: 7 / 4;
			cursor: pointer;

			&:hover {
				outline: 2px solid var( --wp-components-color-accent );
			}

			&.is-selected {
				outline: 2px solid var( --wp-components-color-accent );
			}

			&__area {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			&__preview {
				display: flex;
				gap: 20px;
				align-items: center;
				position: absolute;
			}

			&__label {
				font-size: 1.2vw;
				font-weight: 600;
				line-height: 1em;
				text-align: center;
			}

			&__typography {
				font-size: clamp( 2.5rem, 2.6vw, 3rem );
				font-style: normal;
				font-weight: 700;
				line-height: 150%;
			}

			&__colors {
				display: flex;
				flex-direction: column;
				gap: 8px;
			}

			&__color {
				height: 20px;
				width: 20px;
				border-radius: 16px;
				opacity: 1;
				transform: none;
			}
		}
	}

	.o-main {
		background: transparent;
		height: auto;
		margin-top: -2rem;
		margin-bottom: 2rem;
	}
}

.o-main {
	height: 100vh;
	background: $main-bg;
	overflow: scroll;

	.block-editor-block-preview__container {
		.block-editor-block-preview__content,
		iframe {
			max-height: none !important;
		}
	}
}

.o-preview {
	&__loader {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}
}

.o-templates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 4rem 6rem;
	gap: 2rem;

	@media ( max-width: 600px ) {
		grid-template-columns: 1fr;
	}

	@media ( min-width: 1920px ) {
		grid-template-columns: 1fr 1fr 1fr;
	}

	&__item {
		cursor: pointer;
		position: relative;
		overflow: hidden;

		&__container {
			border: 2px solid #E5E5E5;
			border-radius: 12px;
			overflow: hidden;

			&.is-selected {
				border: 3px solid var( --primary, #0366D5 );
				height: auto;
			}

			.block-editor-block-preview__container {
				aspect-ratio: 5/6;
			}
		}

		&__title {
			margin-top: 1rem;
			text-align: center;
		}

		&__overlay {
			position: absolute;
			top: 0;
			right: 0;
			border-radius: 0 8px 0 12px;
			padding: 0 2px;
			background: var(--primary, #0366D5);

			svg {
				fill: #FFFFFF;
			}
		}
	}
}
