:root {
	--csm-border-color: #e0e0e0;
	--csm-border-dark-color: #757575;
	--csm-accent-color: #0073aa;
}
.crocoblock-style-manager {
	&__inline-control {
		> .components-base-control__field {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 20px;
			> .components-base-control__label {
				margin: 0;
				line-height: 16px;
			}
		}
	}

	&__heading-control {
		margin: 0;
		font-size: 13px;
		line-height: 18px;
		font-weight: 600;
		text-transform: uppercase;
	}

	&__control.is-control--text {
		padding: 0 0 10px;
	}

	&__color-indicator {
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 5px;
		width: 100px;
		flex: 0 0 100px;
		.component-color-indicator {
			width: 16px;
			height: 16px;
		}
		&-label {
			font-size: 12px;
			line-height: 16px;
		}
	}

	&__usage-marker {
		position: absolute;
		top: 5px;
		left: -10px;
		width: 6px;
		height: 6px;
		border-radius: 50%;
		.is-control--dimensions & {
			top: 11px;
		}
		.is-control--choose &,
		.is-control--range &,
		.is-control--border & {
			top: 4px;
		}
		.is-control--typography & {
			top: 5px;
		}
		&.is-used {
			background-color: var(--csm-accent-color);
		}
		&.is-inherited {
			background-color: var(--csm-border-color);
		}
	}

	&__control,
	&__with-spacing {
		position: relative;
		padding: 0 0 25px;

		.components-base-control .components-base-control__field {
			padding-top: 0;
		}

		&:last-child {
			padding-bottom: 0;
			.crocoblock-style-manager__controls-tabs {
				border-bottom: none;
			}
		}

		// Fixes for vertical alignment of controls
		.components-input-control {
			margin: 0;
		}
		> div[data-wp-component="Grid"] {
			align-items: center;
			.components-base-control__label {
				margin: 0;
			}
			div[data-wp-component="HStack"] {
				gap: 16px;
			}
		}

		.components-border-radius-control {
			margin: 0;
		}
	}

	&__border-control,
	&__dimensions-control {
		margin: 0;
	}

	&__color-palette {
		&-item {
			width: 28px;
			height: 28px;
			&-indicator {
				width: 100%;
				height: 100%;
				border-radius: 50%;
				cursor: pointer;
				&--active {
					outline: 2px solid var( --csm-border-dark-color );
					outline-offset: 1px;
				}
			}
		}
	}

	&__typography {
		&-controls {
			min-width: 300px;
		}
		&-indicator {
			display: flex;
			align-items: center;
			gap: 5px;
			cursor: pointer;
			width: 100px;
			&-label {
				font-size: 11px;
				line-height: 16px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				max-width: 67px;
			}
		}
	}

	&__controls-tabs {
		margin: 0 -16px;
		border-top: 1px solid var(--csm-border-color);
		border-bottom: 1px solid var(--csm-border-color);
		&-navigation {
			display: flex;
			gap: 10px;
			border-bottom: 1px solid var(--csm-border-color);
			background-color: #efefef;
			padding: 8px 16px;
			button.crocoblock-style-manager__controls-tabs-button {
				flex: 1;
				text-align: center;
				border: none;
				background: transparent;
				padding: 8px 0;
				cursor: pointer;
				&.is-active {
					background-color: #1e1e1e;
					color: #fff;
				}
			}
		}
		&-content {
			padding: 15px 16px 0;
			&:last-child {
				padding-bottom: 15px;
			}
		}
		.is-control--tabs + .is-control--tabs & {
			margin-top: -25px;
			border-top: none;
		}
	}

	&__popover {
		min-width: 250px;
		&-content {
			padding: 20px;
			.components-input-control__container {
				width: 100%;
			}
		}
		&-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid var(--csm-border-color);
			padding: 10px 20px;
			font-weight: bold;
			line-height: 24px;
			button.crocoblock-style-manager__popover-close {
				width: 24px;
				height: 24px;
				min-width: 0;
				padding: 0;
			}
		}
		&-trigger {
			cursor: pointer;
			border: 1px solid var(--csm-border-color);
			padding: 5px;
			border-radius: 3px;
			margin-top: -5px;
			position: relative;
			svg {
				width: 16px;
				height: 16px;
				display: block;
				path {
					fill: currentColor;
				}
			}
		}
		&-clear {
			position: absolute;
			top: 50%;
			left: -23px;
			transform: translateY(-50%);
			padding: 0 !important;
			min-width: 20px !important;
			height: 20px !important;
			svg {
				width: 12px;
				height: 12px;
			}
		}
		&-control {
			padding-bottom: 10px;
			&-text-row {
				font-size: 12px;
				line-height: 16px;
				margin-top: -3px;
				margin-bottom: 10px;
			}
		}
		&-controls-row {
			display: flex;
			gap: 10px;
			width: 100%;
			.w-50 {
				width: calc( 50% - 5px );
				flex: 0 0 calc( 50% - 5px );
			}
		}
	}
}