@keyframes ph-search-modal__fade-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes ph-search-modal__fade-out {

	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.wp-block-ph-search-modal {
	display: flex;

	&__button {
		background: none;
		border: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		color: inherit;

		svg {
			fill: currentcolor;
		}

		&:focus {
			outline: 2px solid inherit;
			outline-offset: 2px;
		}

		&:focus:not(:focus-visible) {
			outline: none;
		}
	}

	&__overlay {
		z-index: 9999;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		animation: ph-search-modal__fade-in 0.3s ease-in-out;
	}

	&__container {
		background-color: #fff;
		padding: 20px;
		width: 100%;
		max-width: 600px;
		max-height: 100%;
		margin-inline: 1rem;
		border-radius: 4px;
		overflow-y: auto;
		box-sizing: border-box;
		animation: ph-search-modal__fade-in 0.3s ease-in-out;
	}

	&__header {
		display: flex;
		justify-content: end;
		align-items: center;
	}

	&__close-button {
		background: transparent;
		border: 0;
		font-size: 1.5rem;
		cursor: pointer;
	}

	&__close-button::before {
		content: "\2715";
	}

	&__content {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
		line-height: 1.5;
		color: rgba(0, 0, 0, 0.8);
	}

	&__form {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;

		label {
			font-size: 1rem;
			font-weight: 500;
		}
	}

	&__form-controls {
		display: flex;
		gap: 0.5rem;
	}

	&__form-input {
		display: flex;
		box-sizing: border-box;
		font-size: 1rem;
		width: 100%;
		flex: 1;
		text-indent: 0.5rem;
	}

	&__fade {
		display: none;

		&.is-open {
			display: block;
		}

		&[aria-hidden="false"] .wp-block-ph-search-modal__overlay,
		&[aria-hidden="false"] .wp-block-ph-search-modal__container {
			animation: ph-search-modal__fade-in 0.3s ease-in-out;
		}

		&[aria-hidden="true"] .wp-block-ph-search-modal__overlay,
		&[aria-hidden="true"] .wp-block-ph-search-modal__container {
			animation: ph-search-modal__fade-out 0.3s ease-in-out;
		}
	}
}