/**
 * Facebook-style creation modal.
 */

.salakit-creation-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.5 );
	z-index: 100000;
	align-items: center;
	justify-content: center;
}

.salakit-creation-modal.is-open {
	display: flex;
}

.salakit-creation-modal .salakit-modal-box {
	background: var( --salakit-color-surface );
	border-radius: var( --salakit-radius );
	padding: var( --salakit-spacing-lg );
	width: 100%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
}

.salakit-creation-modal .salakit-modal-close {
	float: right;
	background: none;
	border: none;
	font-size: 1.2em;
	cursor: pointer;
}

.salakit-cpt-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var( --salakit-spacing-sm );
	margin: var( --salakit-spacing-md ) 0;
}

.salakit-cpt-button {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var( --salakit-color-border );
	background: transparent;
	cursor: pointer;
}

.salakit-cpt-button.is-active {
	border-color: var( --salakit-color-primary );
	color: var( --salakit-color-primary );
}

.salakit-cpt-fields textarea,
.salakit-cpt-fields input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: var( --salakit-spacing-sm );
}

.salakit-editor-fallback {
	display: block;
	margin-top: var( --salakit-spacing-xs );
	font-size: 0.85em;
}

.salakit-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: var( --salakit-spacing-sm );
	margin-top: var( --salakit-spacing-md );
}