.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;
}
}
}