// Range Control
.enb-range {

	.components-range-control {
		inline-size: 100%;
	}

	.components-range-control__number {
		inline-size: 70px;
	}

	.components-input-control__container {
		inline-size: 100%;
	}

	.components-input-control__input {
		padding-inline-end: 0 !important;

		// &::-webkit-outer-spin-button,
		// &::-webkit-inner-spin-button {
		// 	-webkit-appearance: none;
		// 	margin: 0;
		// }
	}
}

.enb-range-input {

	.components-range-control {
		inline-size: 100%;

		.components-base-control__field {
			margin: 0;
		}

		.components-flex {
			border-radius: 0;
		}

		.components-input-control .components-input-control__backdrop {
			border-inline-end: 0 !important;
			border-color: var(--wp-components-color-gray-600, #949494);
		}

		&:first-of-type .components-flex {
			border-start-start-radius: 2px;
			border-end-start-radius: 2px;
		}


		&:last-of-type .components-flex {
			border-start-end-radius: 2px;
			border-end-end-radius: 2px;
		}
	}

	&.has-inputs {

		.components-base-control__field {
			display: flex;
			flex-direction: column-reverse;
			gap: 4px;
		}

		.components-base-control__label {
			margin: 0;
			font-size: 10px !important;
			letter-spacing: 0.05em;
			text-align: center;
			color: var(--enb-color-500);
		}
	}

	&:not(.has-unit) {

		.components-range-control:last-of-type {

			.components-input-control .components-input-control__backdrop {
				border-inline-end: 1px solid #949494 !important;

			}
		}
	}

	&.hidden-rail {

		.components-range-control__wrapper {
			display: none;
		}

		.components-number-control {
			margin: 0 !important;
		}

		.components-number-control,
		.components-input-control__container {
			inline-size: 100%;
		}
	}
}

.enb-range.has-no-units {

	.components-range-control__wrapper {
		max-inline-size: 130px;
	}

	.components-range-control__number {
		// min-inline-size: 96px;
		inline-size: 102px;
	}

	// .components-input-control__container {
	// 	inline-size: 100%;
	// }
}