Tiny File Manager

Back Back Up Advanced Editor

.components-gblocks-dimensions-control {
	& > .components-base-control__field {
		display: flex;
		flex-wrap: wrap;
	}

&__inputs {
		flex-basis: 100%;
		display: grid;
		grid-template-areas:
		"top  right "
		"left bottom";
		gap: 10px;

& > div {
			.components-base-control {
				margin-bottom: 0;

&__field {
					margin-bottom: 0;
				}
			}

&:nth-child(3) {
				grid-area: left;
			}

&:nth-child(4) {
				grid-area: bottom;
			}
		}

&.style-circle {
			grid-template-areas:
			". top top ."
			"left left right right"
			". bottom bottom .";
			gap: 5px;

& > div {
				position: relative;

&:nth-child(1) {
					grid-area: top;
					display: flex;
					flex-direction: column-reverse;

.gblocks-dimensions-control__label {
						text-align: center;
						padding-bottom: 5px;
					}
				}

&:nth-child(2) {
					grid-area: left;

.gblocks-dimensions-control__label {
						position: absolute;
						bottom: calc(100% + 5px);
						left: 0;
					}
				}

&:nth-child(3) {
					grid-area: right;

.gblocks-dimensions-control__label {
						position: absolute;
						bottom: calc(100% + 5px);
						right: 0;
					}
				}

&:nth-child(4) {
					grid-area: bottom;
					display: flex;
					flex-direction: column;

.gblocks-dimensions-control__label {
						text-align: center;
						padding-top: 5px;
					}
				}
			}
		}
	}
}

.gblocks-dimensions-control__label {
    font-size: 10px;
    opacity: 0.5;
    line-height: 1;
}

.components-gblocks-dimensions-control_sync {
	&.components-button {
		padding: 0;
		text-align: center;
		width: 15px;
		height: 15px;
		margin-inline-start: 5px;

svg {
			width: 18px;
			height: 18px;
			fill: currentColor;
		}
	}
}

.rtl {
	.components-gblocks-dimensions-control__inputs.style-circle {
		& > div:nth-child(2) {
			grid-area: right;
		}

& > div:nth-child(3) {
			grid-area: left;
		}
	}
}