/**
 * Fundação estrutural de espaçamento.
 *
 * Cada classe aplica somente a propriedade explicitamente configurada.
 * Propriedades ausentes permanecem sob controle da cascata normal.
 */

/* Desktop e fallback principal. */
.nexo-has-spacing-margin-top {
  margin-top: var(--nexo-local-margin-top-desktop);
}

.nexo-has-spacing-margin-right {
  margin-right: var(--nexo-local-margin-right-desktop);
}

.nexo-has-spacing-margin-bottom {
  margin-bottom: var(--nexo-local-margin-bottom-desktop);
}

.nexo-has-spacing-margin-left {
  margin-left: var(--nexo-local-margin-left-desktop);
}

.nexo-has-spacing-padding-top {
  padding-top: var(--nexo-local-padding-top-desktop);
}

.nexo-has-spacing-padding-right {
  padding-right: var(--nexo-local-padding-right-desktop);
}

.nexo-has-spacing-padding-bottom {
  padding-bottom: var(--nexo-local-padding-bottom-desktop);
}

.nexo-has-spacing-padding-left {
  padding-left: var(--nexo-local-padding-left-desktop);
}

.nexo-has-spacing-row-gap {
  row-gap: var(--nexo-local-row-gap-desktop);
}

.nexo-has-spacing-column-gap {
  column-gap: var(--nexo-local-column-gap-desktop);
}

/* Tablet. */
@media (max-width: 1024px) {
  .nexo-has-spacing-margin-top {
    margin-top: var(
      --nexo-local-margin-top-tablet,
      var(--nexo-local-margin-top-desktop)
    );
  }

  .nexo-has-spacing-margin-right {
    margin-right: var(
      --nexo-local-margin-right-tablet,
      var(--nexo-local-margin-right-desktop)
    );
  }

  .nexo-has-spacing-margin-bottom {
    margin-bottom: var(
      --nexo-local-margin-bottom-tablet,
      var(--nexo-local-margin-bottom-desktop)
    );
  }

  .nexo-has-spacing-margin-left {
    margin-left: var(
      --nexo-local-margin-left-tablet,
      var(--nexo-local-margin-left-desktop)
    );
  }

  .nexo-has-spacing-padding-top {
    padding-top: var(
      --nexo-local-padding-top-tablet,
      var(--nexo-local-padding-top-desktop)
    );
  }

  .nexo-has-spacing-padding-right {
    padding-right: var(
      --nexo-local-padding-right-tablet,
      var(--nexo-local-padding-right-desktop)
    );
  }

  .nexo-has-spacing-padding-bottom {
    padding-bottom: var(
      --nexo-local-padding-bottom-tablet,
      var(--nexo-local-padding-bottom-desktop)
    );
  }

  .nexo-has-spacing-padding-left {
    padding-left: var(
      --nexo-local-padding-left-tablet,
      var(--nexo-local-padding-left-desktop)
    );
  }

  .nexo-has-spacing-row-gap {
    row-gap: var(
      --nexo-local-row-gap-tablet,
      var(--nexo-local-row-gap-desktop)
    );
  }

  .nexo-has-spacing-column-gap {
    column-gap: var(
      --nexo-local-column-gap-tablet,
      var(--nexo-local-column-gap-desktop)
    );
  }
}

/* Mobile. */
@media (max-width: 767px) {
  .nexo-has-spacing-margin-top {
    margin-top: var(
      --nexo-local-margin-top-mobile,
      var(
        --nexo-local-margin-top-tablet,
        var(--nexo-local-margin-top-desktop)
      )
    );
  }

  .nexo-has-spacing-margin-right {
    margin-right: var(
      --nexo-local-margin-right-mobile,
      var(
        --nexo-local-margin-right-tablet,
        var(--nexo-local-margin-right-desktop)
      )
    );
  }

  .nexo-has-spacing-margin-bottom {
    margin-bottom: var(
      --nexo-local-margin-bottom-mobile,
      var(
        --nexo-local-margin-bottom-tablet,
        var(--nexo-local-margin-bottom-desktop)
      )
    );
  }

  .nexo-has-spacing-margin-left {
    margin-left: var(
      --nexo-local-margin-left-mobile,
      var(
        --nexo-local-margin-left-tablet,
        var(--nexo-local-margin-left-desktop)
      )
    );
  }

  .nexo-has-spacing-padding-top {
    padding-top: var(
      --nexo-local-padding-top-mobile,
      var(
        --nexo-local-padding-top-tablet,
        var(--nexo-local-padding-top-desktop)
      )
    );
  }

  .nexo-has-spacing-padding-right {
    padding-right: var(
      --nexo-local-padding-right-mobile,
      var(
        --nexo-local-padding-right-tablet,
        var(--nexo-local-padding-right-desktop)
      )
    );
  }

  .nexo-has-spacing-padding-bottom {
    padding-bottom: var(
      --nexo-local-padding-bottom-mobile,
      var(
        --nexo-local-padding-bottom-tablet,
        var(--nexo-local-padding-bottom-desktop)
      )
    );
  }

  .nexo-has-spacing-padding-left {
    padding-left: var(
      --nexo-local-padding-left-mobile,
      var(
        --nexo-local-padding-left-tablet,
        var(--nexo-local-padding-left-desktop)
      )
    );
  }

  .nexo-has-spacing-row-gap {
    row-gap: var(
      --nexo-local-row-gap-mobile,
      var(
        --nexo-local-row-gap-tablet,
        var(--nexo-local-row-gap-desktop)
      )
    );
  }

  .nexo-has-spacing-column-gap {
    column-gap: var(
      --nexo-local-column-gap-mobile,
      var(
        --nexo-local-column-gap-tablet,
        var(--nexo-local-column-gap-desktop)
      )
    );
  }
}