/* --- Margin / Padding area --- */

div[data-controlKey='_margin'] ul.dimensions,
div[data-controlKey='_padding'] ul.dimensions,
div[data-controlKey='_innerContainerMargin'] ul.dimensions,
div[data-controlKey='_innerContainerPadding'] ul.dimensions,
div[data-controlKey='menuMargin'] ul.dimensions,
div[data-controlKey='menuPadding'] ul.dimensions,
div[data-controlKey='subMenuPadding'] ul.dimensions,
div[data-controlKey='mobileMenuPadding'] ul.dimensions,
div[data-controlKey='mobileSubMenuPadding'] ul.dimensions,
div[data-controlKey='mobileMenuToggleClosePosition'] ul.dimensions,
div[data-controlKey='titleMargin'] ul.dimensions,
div[data-controlKey='titlePadding'] ul.dimensions,
div[data-controlKey='contentMargin'] ul.dimensions,
div[data-controlKey='contentPadding'] ul.dimensions,
div[data-controlKey='fieldMargin'] ul.dimensions,
div[data-controlKey='fieldPadding'] ul.dimensions,
div[data-controlKey='submitButtonMargin'] ul.dimensions,
div[data-controlKey='iconMargin'] ul.dimensions,
div[data-controlKey='iconPadding'] ul.dimensions,
div[data-controlKey='itemMargin'] ul.dimensions,
div[data-controlKey='itemPadding'] ul.dimensions,
div[data-controlKey='highlightLabelPadding'] ul.dimensions,
div[data-controlKey='highlightContentPadding'] ul.dimensions,
div[data-controlKey='metaMargin'] ul.dimensions,
li[data-controlKey='gutter'] ul.dimensions,
div[data-controlKey='imageMargin'] ul.dimensions,
div[data-controlKey='slidePadding'] ul.dimensions,
div[data-controlKey='paginationSpacing'] ul.dimensions,
div[data-controlKey='overlayMargin'] ul.dimensions,
div[data-controlKey='overlayPadding'] ul.dimensions,
li[data-controlKey='margin'] ul.dimensions,
div[data-controlKey='postsPadding'] ul.dimensions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    '. top top .'
    'left left right right'
    '. bottom bottom .';
  justify-content: end;
  justify-items: center;
  gap: 2px;
}

div[data-control='dimensions'] ul.dimensions label {
  display: none;
}

div[data-controlKey='_margin'] ul li .vertical,
div[data-controlKey='_padding'] ul li .vertical,
div[data-controlKey='_innerContainerMargin'] ul li .vertical,
div[data-controlKey='_innerContainerPadding'] ul li .vertical,
div[data-controlKey='menuMargin'] ul li .vertical,
div[data-controlKey='menuPadding'] ul li .vertical,
div[data-controlKey='subMenuPadding'] ul li .vertical,
div[data-controlKey='mobileMenuPadding'] ul li .vertical,
div[data-controlKey='mobileSubMenuPadding'] ul li .vertical,
div[data-controlKey='mobileMenuToggleClosePosition'] ul li .vertical,
div[data-controlKey='titleMargin'] ul li .vertical,
div[data-controlKey='titlePadding'] ul li .vertical,
div[data-controlKey='contentMargin'] ul li .vertical,
div[data-controlKey='contentPadding'] ul li .vertical,
div[data-controlKey='fieldMargin'] ul li .vertical,
div[data-controlKey='fieldPadding'] ul li .vertical,
div[data-controlKey='submitButtonMargin'] ul li .vertical,
div[data-controlKey='iconMargin'] ul li .vertical,
div[data-controlKey='iconPadding'] ul li .vertical,
div[data-controlKey='itemMargin'] ul li .vertical,
div[data-controlKey='itemPadding'] ul li .vertical,
div[data-controlKey='highlightLabelPadding'] ul li .vertical,
div[data-controlKey='highlightContentPadding'] ul li .vertical,
div[data-controlKey='metaMargin'] ul li .vertical,
li[data-controlKey='gutter'] ul li .vertical,
div[data-controlKey='imageMargin'] ul li .vertical,
div[data-controlKey='slidePadding'] ul li .vertical,
div[data-controlKey='paginationSpacing'] ul li .vertical,
div[data-controlKey='overlayMargin'] ul li .vertical,
div[data-controlKey='overlayPadding'] ul li .vertical,
li[data-controlKey='margin'] ul li .vertical,
div[data-controlKey='postsPadding'] ul li .vertical {
  display: flex;
  align-items: center;
}

div[data-control='number'] .number {
  width: 60px;
}

div[data-control='dimensions'] ul.dimensions li input {
  border-bottom-left-radius: var(--builder-border-radius);
  border-top-left-radius: var(--builder-border-radius);
}

div[data-control='dimensions'] ul.dimensions li:last-child .number input {
  border-bottom-right-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-top-left-radius: var(--builder-border-radius) !important;
  border-bottom-left-radius: var(--builder-border-radius) !important;
}

div[data-control='dimensions'] ul.dimensions li:last-child input {
  border-bottom-right-radius: var(--builder-border-radius) !important;
  border-top-right-radius: var(--builder-border-radius) !important;
}

div[data-control='number'].vertical .unit input {
  width: 40px;
  background-color: var(--builder-bg-2) !important;
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
  height: var(--builder-input-height);
  line-height: var(--builder-input-height);
  border-radius: var(--builder-border-radius);
}

div[data-controlKey='_margin'] ul li,
div[data-controlKey='_padding'] ul li,
div[data-controlKey='_innerContainerMargin'] ul li,
div[data-controlKey='_innerContainerPadding'] ul li,
div[data-controlKey='menuMargin'] ul li,
div[data-controlKey='menuPadding'] ul li,
div[data-controlKey='subMenuPadding'] ul li,
div[data-controlKey='mobileMenuPadding'] ul li,
div[data-controlKey='mobileSubMenuPadding'] ul li,
div[data-controlKey='mobileMenuToggleClosePosition'] ul li,
div[data-controlKey='titleMargin'] ul li,
div[data-controlKey='titlePadding'] ul li,
div[data-controlKey='contentMargin'] ul li,
div[data-controlKey='contentPadding'] ul li,
div[data-controlKey='fieldMargin'] ul li,
div[data-controlKey='fieldPadding'] ul li,
div[data-controlKey='submitButtonMargin'] ul li,
div[data-controlKey='iconMargin'] ul li,
div[data-controlKey='iconPadding'] ul li,
div[data-controlKey='itemMargin'] ul li,
div[data-controlKey='itemPadding'] ul li,
div[data-controlKey='highlightLabelPadding'] ul li,
div[data-controlKey='highlightContentPadding'] ul li,
div[data-controlKey='metaMargin'] ul li,
li[data-controlKey='gutter'] ul li,
div[data-controlKey='imageMargin'] ul li,
div[data-controlKey='slidePadding'] ul li,
div[data-controlKey='paginationSpacing'] ul li,
div[data-controlKey='overlayMargin'] ul li,
div[data-controlKey='overlayPadding'] ul li,
li[data-controlKey='margin'] ul li,
div[data-controlKey='postsPadding'] ul li {
  max-width: 100px;
}

div[data-controlKey='_margin'] ul li:nth-child(1),
div[data-controlKey='_padding'] ul li:nth-child(1),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(1),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(1),
div[data-controlKey='menuMargin'] ul li:nth-child(1),
div[data-controlKey='menuPadding'] ul li:nth-child(1),
div[data-controlKey='subMenuPadding'] ul li:nth-child(1),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(1),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(1),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(1),
div[data-controlKey='titleMargin'] ul li:nth-child(1),
div[data-controlKey='titlePadding'] ul li:nth-child(1),
div[data-controlKey='contentMargin'] ul li:nth-child(1),
div[data-controlKey='contentPadding'] ul li:nth-child(1),
div[data-controlKey='fieldMargin'] ul li:nth-child(1),
div[data-controlKey='fieldPadding'] ul li:nth-child(1),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(1),
div[data-controlKey='iconMargin'] ul li:nth-child(1),
div[data-controlKey='iconPadding'] ul li:nth-child(1),
div[data-controlKey='itemMargin'] ul li:nth-child(1),
div[data-controlKey='itemPadding'] ul li:nth-child(1),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(1),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(1),
div[data-controlKey='metaMargin'] ul li:nth-child(1),
li[data-controlKey='gutter'] ul li:nth-child(1),
div[data-controlKey='imageMargin'] ul li:nth-child(1),
div[data-controlKey='slidePadding'] ul li:nth-child(1),
div[data-controlKey='paginationSpacing'] ul li:nth-child(1),
div[data-controlKey='overlayMargin'] ul li:nth-child(1),
div[data-controlKey='overlayPadding'] ul li:nth-child(1),
li[data-controlKey='margin'] ul li:nth-child(1),
div[data-controlKey='postsPadding'] ul li:nth-child(1) {
  grid-area: top;
}

div[data-controlKey='_margin'] ul li:nth-child(2),
div[data-controlKey='_padding'] ul li:nth-child(2),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(2),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(2),
div[data-controlKey='menuMargin'] ul li:nth-child(2),
div[data-controlKey='menuPadding'] ul li:nth-child(2),
div[data-controlKey='subMenuPadding'] ul li:nth-child(2),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(2),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(2),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(2),
div[data-controlKey='titleMargin'] ul li:nth-child(2),
div[data-controlKey='titlePadding'] ul li:nth-child(2),
div[data-controlKey='contentMargin'] ul li:nth-child(2),
div[data-controlKey='contentPadding'] ul li:nth-child(2),
div[data-controlKey='fieldMargin'] ul li:nth-child(2),
div[data-controlKey='fieldPadding'] ul li:nth-child(2),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(2),
div[data-controlKey='iconMargin'] ul li:nth-child(2),
div[data-controlKey='iconPadding'] ul li:nth-child(2),
div[data-controlKey='itemMargin'] ul li:nth-child(2),
div[data-controlKey='itemPadding'] ul li:nth-child(2),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(2),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(2),
div[data-controlKey='metaMargin'] ul li:nth-child(2),
li[data-controlKey='gutter'] ul li:nth-child(2),
div[data-controlKey='imageMargin'] ul li:nth-child(2),
div[data-controlKey='slidePadding'] ul li:nth-child(2),
div[data-controlKey='paginationSpacing'] ul li:nth-child(2),
div[data-controlKey='overlayMargin'] ul li:nth-child(2),
div[data-controlKey='overlayPadding'] ul li:nth-child(2),
li[data-controlKey='margin'] ul li:nth-child(2),
div[data-controlKey='postsPadding'] ul li:nth-child(2) {
  grid-area: right;
}

div[data-controlKey='_margin'] ul li:nth-child(3),
div[data-controlKey='_padding'] ul li:nth-child(3),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(3),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(3),
div[data-controlKey='menuMargin'] ul li:nth-child(3),
div[data-controlKey='menuPadding'] ul li:nth-child(3),
div[data-controlKey='subMenuPadding'] ul li:nth-child(3),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(3),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(3),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(3),
div[data-controlKey='titleMargin'] ul li:nth-child(3),
div[data-controlKey='titlePadding'] ul li:nth-child(3),
div[data-controlKey='contentMargin'] ul li:nth-child(3),
div[data-controlKey='contentPadding'] ul li:nth-child(3),
div[data-controlKey='fieldMargin'] ul li:nth-child(3),
div[data-controlKey='fieldPadding'] ul li:nth-child(3),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(3),
div[data-controlKey='iconMargin'] ul li:nth-child(3),
div[data-controlKey='iconPadding'] ul li:nth-child(3),
div[data-controlKey='itemMargin'] ul li:nth-child(3),
div[data-controlKey='itemPadding'] ul li:nth-child(3),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(3),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(3),
div[data-controlKey='metaMargin'] ul li:nth-child(3),
li[data-controlKey='gutter'] ul li:nth-child(3),
div[data-controlKey='imageMargin'] ul li:nth-child(3),
div[data-controlKey='slidePadding'] ul li:nth-child(3),
div[data-controlKey='paginationSpacing'] ul li:nth-child(3),
div[data-controlKey='overlayMargin'] ul li:nth-child(3),
div[data-controlKey='overlayPadding'] ul li:nth-child(3),
li[data-controlKey='margin'] ul li:nth-child(3),
div[data-controlKey='postsPadding'] ul li:nth-child(3) {
  grid-area: bottom;
}

div[data-controlKey='_margin'] ul li:nth-child(4),
div[data-controlKey='_padding'] ul li:nth-child(4),
div[data-controlKey='_innerContainerMargin'] ul li:nth-child(4),
div[data-controlKey='_innerContainerPadding'] ul li:nth-child(4),
div[data-controlKey='menuMargin'] ul li:nth-child(4),
div[data-controlKey='menuPadding'] ul li:nth-child(4),
div[data-controlKey='subMenuPadding'] ul li:nth-child(4),
div[data-controlKey='mobileMenuPadding'] ul li:nth-child(4),
div[data-controlKey='mobileSubMenuPadding'] ul li:nth-child(4),
div[data-controlKey='mobileMenuToggleClosePosition'] ul li:nth-child(4),
div[data-controlKey='titleMargin'] ul li:nth-child(4),
div[data-controlKey='titlePadding'] ul li:nth-child(4),
div[data-controlKey='contentMargin'] ul li:nth-child(4),
div[data-controlKey='contentPadding'] ul li:nth-child(4),
div[data-controlKey='fieldMargin'] ul li:nth-child(4),
div[data-controlKey='fieldPadding'] ul li:nth-child(4),
div[data-controlKey='submitButtonMargin'] ul li:nth-child(4),
div[data-controlKey='iconMargin'] ul li:nth-child(4),
div[data-controlKey='iconPadding'] ul li:nth-child(4),
div[data-controlKey='itemMargin'] ul li:nth-child(4),
div[data-controlKey='itemPadding'] ul li:nth-child(4),
div[data-controlKey='highlightLabelPadding'] ul li:nth-child(4),
div[data-controlKey='highlightContentPadding'] ul li:nth-child(4),
div[data-controlKey='metaMargin'] ul li:nth-child(4),
li[data-controlKey='gutter'] ul li:nth-child(4),
div[data-controlKey='imageMargin'] ul li:nth-child(4),
div[data-controlKey='slidePadding'] ul li:nth-child(4),
div[data-controlKey='paginationSpacing'] ul li:nth-child(4),
div[data-controlKey='overlayMargin'] ul li:nth-child(4),
div[data-controlKey='overlayPadding'] ul li:nth-child(4),
li[data-controlKey='margin'] ul li:nth-child(4),
div[data-controlKey='postsPadding'] ul li:nth-child(4) {
  grid-area: left;
}