@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;

.edit-site-custom-template-modal {
	&__contents-wrapper {
		height: 100%;
		justify-content: flex-start !important; // Required as topLeft alignment isn't working on VStack

		> * {
			width: 100%;
		}
	}

	&__contents {
		> .components-button {
			height: auto;
			justify-content: center;
		}
	}

	@include break-medium() {
		width: 456px;
	}

	.edit-site-custom-template-modal__suggestions_list {
		@include break-small() {
			overflow-y: auto;
			// Height of four buttons
			max-height: calc(#{$grid-unit-70 * 4} + 4 * var(--wpds-border-width-focus));
			// Room for the focus ring, and keep it in view while arrowing.
			padding: calc(2 * var(--wpds-border-width-focus));
			margin-inline: calc(-2 * var(--wpds-border-width-focus));
			width: calc(100% + 4 * var(--wpds-border-width-focus));
			scroll-padding-block: calc(2 * var(--wpds-border-width-focus));
		}

		&__list-item {
			display: block;
			width: 100%;
			text-align: left;
			white-space: pre-wrap;
			overflow-wrap: break-word;
			height: auto;
			padding: $grid-unit-10 $grid-unit-15;

			mark {
				font-weight: 700;
				background: none;
			}

			&:hover {
				background: rgba(var(--wp-admin-theme-color--rgb), 0.04);

				* {
					color: var(--wp-admin-theme-color);
				}

				mark {
					color: var(--wp-admin-theme-color);
				}
			}

			&:focus {
				background-color: $gray-100;
			}

			&__title,
			&__info {
				overflow: hidden;
				text-overflow: ellipsis;
				display: block;
			}

			&__info {
				word-break: break-all;
				color: $gray-700;
			}
		}
	}
}

.edit-site-custom-template-modal__no-results {
	border: $border-width solid $gray-400;
	border-radius: $radius-small;
	padding: $grid-unit-20;
}

.edit-site-custom-generic-template__modal {
	.components-modal__header {
		border-bottom: none;
	}

	.components-modal__content::before {
		margin-bottom: $grid-unit-05;
	}
}

.edit-site-add-new-template__modal {

	@include break-large() {
		max-width: $grid-unit-80 * 13;
		margin-top: $grid-unit-80;
		width: calc(100% - #{$grid-unit-80 * 2});
		max-height: calc(100% - #{$grid-unit-80 * 2});
	}

	.edit-site-add-new-template__template-button,
	.edit-site-add-new-template__custom-template-button {
		svg {
			color: var(--wp-admin-theme-color);
		}
	}

	.edit-site-add-new-template__custom-template-button {
		.edit-site-add-new-template__template-name {
			flex-grow: 1;
			align-items: flex-start;
		}
	}

	.edit-site-add-new-template__template-icon {
		padding: $grid-unit-10;
		background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
		border-radius: 100%;
		max-height: $grid-unit-50;
		max-width: $grid-unit-50;
	}
}

.edit-site-custom-template-modal__contents,
.edit-site-add-new-template__template-list__contents {
	> .components-button {
		padding: $grid-unit-40;
		display: flex;
		flex-direction: column;
		border: $border-width solid $gray-300;
		justify-content: center;

		span:first-child {
			color: $gray-900;
		}

		span {
			color: $gray-700;
		}

		&:hover {
			color: var(--wp-admin-theme-color-darker-10);
			background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
			border-color: transparent;

			span {
				color: var(--wp-admin-theme-color);
			}
		}

		&:focus {
			span:first-child {
				color: var(--wp-admin-theme-color);
			}
		}
	}

	.edit-site-add-new-template__custom-template-button,
	.edit-site-add-new-template__template-list__prompt {
		grid-column: 1 / -1;
	}
}

.edit-site-add-new-template__template-list__contents {
	> .components-button {
		height: 100%;
		text-align: start;
		align-items: flex-start;
	}
}