// Links section

.links-container {
	background-color: #fbfafa;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 15px 10px;

	.components-base-control {
		margin-bottom: 10px;
	}

	.components-base-control__label {
		margin-bottom: 2px !important;
	}
}

// Files section

.leco-cp-file-image-container,
.leco-cp-file-file-container {
	background-color: #fbfafa;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-bottom: 10px;
	position: relative;
}

.leco-cp-file-file {
	flex: 1;
	padding: 10px;
}

.leco-cp-file-image {
	padding: 10px;
}

.leco-cp-file-image {
	height: 180px;
	width: 100%;

	img {
		object-fit: contain;
		object-position: 50% 50%;
		height: 100%;
		width: 100%;
	}
}

.leco-cp-file-image-actions {
	display: flex;
	gap: 5px;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 9;
}

.leco-cp-file-actions {
	display: flex;
	gap: 5px;
	margin-right: 10px !important;
}

.leco-cp-file-file-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.leco-cp-label-style {
	display: block;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 8px;
	text-transform: uppercase;
}

// Client Uploads

.icon-download-link {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 15px;

	.icon-download {
		height: 15px;
		width: 15px;
		stroke: currentColor;
		stroke-width: 4px;
		fill: none;
	}

	.icon-filename {
		flex: 1;
	}
}

.icon-file__actions {
	background-color: #fbfafa;
	height: auto !important;
	padding: 3px;
	position: relative;

	svg {
		height: 15px;
		width: 15px;
		stroke: black;
		stroke-width: 4px;
		fill: none;
	}
}

// Content Page

.content-page__btns {
	display: flex;
	gap: 5px;
}

.content-page__select {
	margin-bottom: 24px;
}

// Styles for the disabled options in the dropdown
.content-page__select {
	// Target React Select's disabled options
	[class*="-option"][aria-disabled="true"] {
		color: #999 !important;
		font-style: italic;
		background-color: #f5f5f5 !important;
		cursor: not-allowed !important;
		
		&:hover {
			background-color: #f0f0f0 !important;
		}
		
		em {
			margin-left: 8px;
			color: #888;
			font-size: 0.9em;
		}
	}
}

// Date

.components-datetime {
	margin-bottom: 30px;

	h3 {
		margin-bottom: 0px;
	}
}

.components-datetime__time {
	.components-base-control,
	.components-input-control,
	.components-input-control:last-child {
		margin-bottom: 0;
	}

	.components-datetime__time-wrapper {
		align-items: flex-start;
	}
}

// General

.add-new-link-btn {
	margin-top: 10px;
}

.choose-icon {
	align-items: center;
	display: flex;
	gap: 10px;
	padding: 5px 10px;

	img {
		width: 20px !important;
		height: auto;
	}
}

.leco-cp__instructions {
	margin-top: 15px !important;
}

.leco-cp-container {
	display: block !important;

	.block-editor-inner-blocks {
		.block-editor-block-list__layout {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
		}
	}
}

// Mark as complete

.action .tooltip .arrow {
	left: calc(100% - 14px);
	right: auto !important;
	top: 29px !important;
}

// Block icons
.leco-cp-modules-icon {
	max-width: 18px !important;
	min-width: 18px !important;
}