@import "~@wordpress/base-styles/variables";

.interface-interface-skeleton__content {
	transition: opacity 150ms cubic-bezier(0.77, 0, 0.175, 1);

	&.site-design-updating {
		opacity: 0.33;
		pointer-events: none;
		transition: opacity 300ms cubic-bezier(0.77, 0, 0.175, 1);
	}
}

// Following styles are core coblocks styling that are duplicated here for when this is run as a separate module.
// Hides the "Star" icon from the PanelBody header.
.interface-complementary-area__pin-unpin-item {
	display: none !important;
}

// Moves the PanelBody header close icon to its proper spot.
.interface-complementary-area-header .components-button.has-icon {
	padding: 6px 13px;
}

// Following styles specific to the Site Design sidebar:
.components-site-design-styles {
	padding: 16px;

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

	.components-radio-control__option:not(:last-child) {
		margin-bottom: 7px;
	}

	label span {
		display: inline-flex;
	}

	.components-spinner {
		margin: 0 0 0 10px;
	}
}

.site-design {
	&--designs__panel {
		.components-panel__body-toggle:focus {
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $godaddy-everyday-blue-500;
		}
	}

	&--colors__panel {
		.components-panel__body-toggle:focus {
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $godaddy-everyday-blue-500;
		}
	}

	&--fonts__panel {
		.components-panel__body-toggle:focus {
			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $godaddy-everyday-blue-500;
		}
	}
}

.components-site-design {
	&__custom {
		background-color: $gray-100;
		border: 1px solid $godaddy-everyday-blue-500;
		border-radius: 4px;
		color: $gray-900;
		margin-bottom: 2em;
		padding: 1em 16px 4px;
		position: relative;

		&__dismiss {
			background: none;
			border: 0;
			display: block;
			height: 20px;
			padding: 0;
			position: absolute;
			right: 1em;
			top: calc(1em - 1px);
			width: 16px;

			&:hover {
				cursor: pointer;
			}

			&::after,
			&::before {
				background-color: $gray-900;
				content: "";
				display: block;
				height: 2px;
				position: relative;
				width: 16px;
			}

			&::before {
				top: 2px;
				transform: rotate(-45deg);
			}

			&::after {
				transform: rotate(45deg);
			}

			> span {
				clip: rect(0 0 0 0);
				clip-path: inset(50%);
				height: 1px;
				overflow: hidden;
				position: absolute;
				white-space: nowrap;
				width: 1px;
			}
		}

		.components-button:focus {
			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) $godaddy-everyday-blue-500;
		}
	}

	.components-font-size-picker__number:focus {
		border-color: $godaddy-everyday-blue-500;
		box-shadow: 0 0 0 1px $godaddy-everyday-blue-500;
	}

	.components-custom-select-control__button {
		&[aria-expanded="true"] {
			color: $godaddy-everyday-blue-500;
		}

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

		&:focus {
			border-color: $godaddy-everyday-blue-500;
			box-shadow: 0 0 0 1px $godaddy-everyday-blue-500;
		}
	}

	.components-range-control__wrapper {
		& > span {
			color: $godaddy-everyday-blue-500;

			& > span {
				background-color: $godaddy-everyday-blue-500;
			}
		}
	}
}

.components-site-design-designs {
	&__design {
		background-color: transparent;
		border: 1px solid $gray-100;
		border-radius: 4px;
		display: block;
		margin-bottom: 0.5em;
		padding: 1.25em;
		width: 100%;

		&:hover {
			cursor: pointer;
		}

		&:focus {
			outline-color: var(--wp-admin-theme-color);
		}

		&--current {
			border-color: $gray-900;
			margin-bottom: 0;
		}

		&--selected {
			border-color: $gray-900;
		}

		&--updating {
			opacity: 0.5;
			pointer-events: none;

			&:hover {
				cursor: default;
			}
		}

		&__content {
			align-items: center;
			display: flex;
			justify-content: space-between;
		}

		&__label {
			font-size: 1.2rem;
		}

		&__colors {
			display: flex;
			flex-direction: row-reverse;
			margin: 0;
			padding: 0;
		}

		&__color {
			border: 2px solid #fff;
			border-radius: 24px;
			display: inline-block;
			height: 24px;
			margin: 0 0 0 -11px;
			width: 24px;
		}
	}
}

.color-palettes__custom-button {
	color: $godaddy-everyday-blue-500 !important;
}

.components-site-design-color-palettes {
	.color-palettes {
		padding-bottom: 1em;

		&__title {
			display: flex;
			justify-content: space-between;
			padding-bottom: 0.5em;

			> button {
				background: none;
				border: 0;
				color: var(--wp-admin-theme-color);
				margin: 0;
				padding: 0;

				&:hover {
					cursor: pointer;
				}
			}
		}

		&__palettes {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}

	.color-palette {
		border: 1px solid $gray-100;
		border-radius: 4px;
		display: flex;
		flex-direction: row-reverse;
		justify-content: center;
		margin: 0.5em 0;
		padding: 2em;
		width: calc(50% - 0.5em);

		&.is-selected {
			border-color: $gray-900;
		}

		.component-color-indicator {
			border: 2px solid #fff;
			border-radius: 24px;
			display: inline-block;
			height: 24px;
			margin: 0 0 0 -11px;
			width: 24px;

			&:last-child {
				margin-left: 0;
			}
		}

		&__preview {
			&-button.components-button {
				display: block;
				height: 38px;
				padding: 0;
				position: relative;
				width: 100%;

				&::before {
					border: 1px solid rgba(0, 0, 0, 0.2);
					border-radius: 2px;
					bottom: 0;
					content: "";
					left: 0;
					position: absolute;
					right: 0;
					top: 0;
				}
			}
		}
	}

	.color-palette-custom {
		&__title {
			margin-bottom: 1em;
		}

		.components-dropdown {
			margin: 10px 0 2px;
			width: 100%;

			&:last-child {
				margin-bottom: 12px;
			}
		}

		.components-button {
			color: $gray-900 !important;
			font-size: 13px;
			font-weight: 400;
			text-decoration: none;
		}

		.component-color-indicator {
			border: none;
			border-radius: 100%;
			height: 22px;
			margin: 3px 14px 3px 3px;
			position: relative;
			width: 22px;

			&::before {
				border: 2px solid $gray-900;
				border-radius: 100%;
				bottom: -3px;
				content: "";
				left: -3px;
				position: absolute;
				right: -3px;
				top: -3px;
			}
		}
	}
}

.components-coblocks-site-design.save-changes {
	padding: 0;
	position: absolute;
	right: 19px;
	top: -42px;

	.components-button.is-primary {
		border-radius: 2px;

		&:disabled {
			background: var(--wp-admin-theme-color);
			border-color: var(--wp-admin-theme-color);
			color: hsla(0, 0%, 100%, 0.4);
		}
	}

	.components-base-control__field {
		margin-bottom: 0;
	}
}

.components-site-design-fonts {
	$border-radius: 5px;

	button {
		outline: none;

		&:hover {
			cursor: pointer;
		}
	}

	&__heading {
		margin-bottom: 10px;

		> p {
			color: $gray-700;
		}

		> p,
		> button {
			display: inline-block;
			margin: 0;
		}

		&__custom {
			background: none;
			border: none;
			color: $godaddy-everyday-blue-500 !important;
			float: right;
			padding: 0;
		}
	}

	.components-site-design__custom {
		hr {
			border-bottom-color: $gray-700;
		}

		padding-bottom: 16px;

		&__body {
			margin-top: 20px;
		}

		.components-custom-select-control,
		.components-range-control .components-base-control__field {
			align-items: center;
			display: flex;
			justify-content: space-between;
			margin: 10px 0;

			&:last-child {
				margin-bottom: 0;
			}

			&__label,
			.components-base-control__label {
				display: inline-block;
				margin-bottom: 0;
			}

			&__button {
				background-color: $white;
				float: right;
			}

			&__item {
				color: $gray-900;
			}

			.components-range-control__root {
				padding-right: 10px;
				width: 60%;
			}
		}
	}

	&__options {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	&__option {
		border: 1px solid $gray-100;
		border-radius: $border-radius;
		margin-bottom: 1em;

		&__section {
			background: none;
			border: none;
			padding: 1em 1.5em 1.5em;
			text-align: left;
		}

		&__primary {
			font-size: 1.5rem;
			margin-bottom: 0.15em;
		}

		&__secondary {
			font-size: 0.8rem;
			margin-bottom: 0;
			max-width: 88%;
		}

		&__edit {
			background-color: #fff;
			border: none;
			color: $godaddy-everyday-blue-500 !important;
			display: inline-block;
			font-size: 0.9rem;
			margin-bottom: 0;
			margin-left: -10px;
			padding: 10px 10px 0;

			> .icon {
				position: relative;
				top: 6px;
			}
		}

		&__settings {
			border-top: 1px solid $gray-900;
			margin-top: -30px;
			padding-top: 30px;

			.components-font-size-picker__number-container input {
				min-height: auto;
				padding: 5px;
				width: 68px;
			}
		}

		&:hover {
			border-color: var(--wp-admin-theme-color);
		}

		&.is-selected {
			border-color: $gray-900;
		}

		.components-font-size-picker .components-font-size-picker__controls {
			align-items: flex-end;
			flex-wrap: nowrap;
		}

		// Tweaks for specific fonts.
		.is-heebo &__primary {
			font-weight: 600;
		}

		.is-heebo &__secondary {
			font-size: 0.75rem;
		}

		.is-work &__primary,
		.is-trocchi &__primary {
			font-size: 1.4rem;
		}
	}
}

.components-site-design-fonts__option:hover:not(.is-selected) {
	border-color: $godaddy-everyday-blue-500 !important;
}

.content-management__add-new-button svg {
	fill: $godaddy-everyday-blue-500 !important;
}

body.rtl {
	.components-site-design-fonts__heading__custom {
		float: left;
	}
}
