/**
 * The following styles get applied inside the editor only.
 *
 * Replace them with your own styles or remove the file completely.
 */

.wp-block-create-block-revisual {
	border: 1px dotted #f00;
}

.rev-panel-header {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	.components-button.has-icon {
		min-width: 24px;

		svg {
			width: 14px;
		}
	}
}

.rev-panel-header-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.25em;
	margin-bottom: 0.25em;
}

.rev-block-editor-widgets-list-container {
	display: flex;
	flex-wrap: wrap;
}

.rev-block-editor-widgets-list-container-item {

	border-bottom: 1px solid #EEEEEE;
	padding: 0.5em;
	width: 100%;
	position: relative;

	button {
		//display: none;
		//position: absolute;
		//right: 1em;
		//top: 0;
		//bottom: 0;
		//margin: auto 0;
	}

	&:hover {
		background-color: #3858E90A;

		.rev-block-editor-widgets-list-container-item-actions {
			display: flex;
		}
		button {
			//display: block;
		}
	}
}

.rev-block-editor-widgets-list-container-item-title {
	color: #1E1E1E;
	font-weight: 500;
}

.rev-block-editor-widgets-list-container-item-subtitle {
	color: #757575;
	font-weight: 400;
	line-height: 1.53;
}

.rev-block-editor-widgets-list-container-item-actions {
	display: none;
	gap: 0.25em;
	margin-top: 0.5em;
}

.rev-block-canvas-placeholder {

}

.rev-block-canvas-placeholder-header {
	display: flex;
	flex-direction: column;
	font-size: 1.43em;
	line-height: 2em;
	font-weight: 400;
	width: 100%;
}

.rev-block-canvas-placeholder-title {
	display: flex;
	gap: 0.25em;
	align-items: center;
	justify-content: space-between;

	span {
		display: flex;
	}

	img {
		width: 1.33em;
		height: 1.33em;
		border: none;
	}

}

.rev-block-canvas-placeholder-subtitle {
	font-size: 14px;
	line-height: 16px;
}


.rev-block-canvas-placeholder-container {
	font-size: 14px;

	.rev-widgets-selector-panel:first-child {
		border: 1px solid #CCCCCC;
	}
}

.rev-block-canvas-placeholder {
	.components-card__header {
		position: sticky;
		top: 40px;
		z-index: 1000;
		background: white;
    width: calc(100% - 4px);
    margin-left: 2px;


	}

	.rev-widgets-table-container {
		overflow-y: scroll;
		height: 50vh;
		margin-top: 0;
		padding-top: 0;
	}

	.rev-widgets-table-header {
		top: 152px;
		z-index: 100000;
	}

	.rev-widgets-table thead {
		position: relative;
		top: unset;
	}

	.rev-widgets-table thead th {
		padding: 0;
	}
}


.rev-block-canvas-no-widgets-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1em;
}


.rev-widget-preview-block {
	pointer-events: none;
	min-height: 50px;
	position: relative;


	&:after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 1px dashed #CCCCCC;
	}

	&:before {
		content: "Revisual widget";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #757575;
		font-size: 13px;
		z-index: -1;
	}
}