.gblocks-unit-control {
	&__disabled {
		.gblocks-unit-control__input > .components-base-control {
			opacity: 0.5;
		}
	}

	&__override-action {
		display: flex;
		align-items: center;

		button.components-button {
			width: 20px;
			height: 20px;
			min-width: 20px;
			padding: 0;
			justify-content: center !important;

			&.is-primary:focus:not(.disabled) {
				box-shadow: 0 0 0;
			}

			svg {
				width: 15px;
				margin: 0 !important;
			}
		}
	}

	&__input {
		display: flex;
		align-items: flex-start;
		position: relative;

		.components-base-control:first-child {
			flex-grow: 1;
		}

		.components-base-control,
		.components-base-control__field {
			margin-bottom: 0;
		}

		&--action {
			position: absolute;
			right: 5px;
			top: 0;
			bottom: 0;
			display: flex;
			gap: 3px;
		}

		.gblocks-unit-control-units {
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: auto;
				min-width: 20px;
				height: 20px;
				font-size: 10px;
				padding: 0 3px;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid rgba(0,0,0,0.1);

				&:disabled {
					pointer-events: none;
				}

				&:hover, &.is-opened {
					border-color: currentColor;
				}

				&.is-opened {
					background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
					color: var(--wp-components-color-accent-inverted, #fff);
				}
			}
		}
	}
}

.gblocks-unit-control-popover .components-menu-group > div[role="group"] {
	display: grid;
	grid-template-columns: repeat(4, 1fr);

	button {
		min-height: auto;
		display: flex;
		justify-content: center;

		.components-menu-item__item {
			min-width: auto;
			font-size: 11px;
			margin: 0;
		}
	}
}

.rtl {
	.gblocks-unit-control__input--action {
		left: 5px;
		right: auto;
	}
}