/**
 * Fundação de geometria responsiva.
 *
 * Dimensões, proporção, overflow, alinhamento e ordem herdam
 * desktop > tablet > mobile. Visibilidade é específica por dispositivo.
 */

.nexo-has-geometry-width {
  width: var(--nexo-geometry-width-desktop);
}

.nexo-has-geometry-max-width {
  max-width: var(--nexo-geometry-max-width-desktop);
}

.nexo-has-geometry-height {
  height: var(--nexo-geometry-height-desktop);
}

.nexo-has-geometry-min-height {
  min-height: var(--nexo-geometry-min-height-desktop);
}

.nexo-has-geometry-max-height {
  max-height: var(--nexo-geometry-max-height-desktop);
}

.nexo-has-geometry-aspect-ratio {
  aspect-ratio: var(--nexo-geometry-aspect-ratio-desktop);
}

.nexo-has-geometry-overflow {
  overflow: var(--nexo-geometry-overflow-desktop);
}

.nexo-has-geometry-align-self {
  align-self: var(--nexo-geometry-align-self-desktop);
}

.nexo-has-geometry-order {
  order: var(--nexo-geometry-order-desktop);
}

@media (max-width: 1024px) {
  .nexo-has-geometry-width {
    width: var(
      --nexo-geometry-width-tablet,
      var(--nexo-geometry-width-desktop)
    );
  }

  .nexo-has-geometry-max-width {
    max-width: var(
      --nexo-geometry-max-width-tablet,
      var(--nexo-geometry-max-width-desktop)
    );
  }

  .nexo-has-geometry-height {
    height: var(
      --nexo-geometry-height-tablet,
      var(--nexo-geometry-height-desktop)
    );
  }

  .nexo-has-geometry-min-height {
    min-height: var(
      --nexo-geometry-min-height-tablet,
      var(--nexo-geometry-min-height-desktop)
    );
  }

  .nexo-has-geometry-max-height {
    max-height: var(
      --nexo-geometry-max-height-tablet,
      var(--nexo-geometry-max-height-desktop)
    );
  }

  .nexo-has-geometry-aspect-ratio {
    aspect-ratio: var(
      --nexo-geometry-aspect-ratio-tablet,
      var(--nexo-geometry-aspect-ratio-desktop)
    );
  }

  .nexo-has-geometry-overflow {
    overflow: var(
      --nexo-geometry-overflow-tablet,
      var(--nexo-geometry-overflow-desktop)
    );
  }

  .nexo-has-geometry-align-self {
    align-self: var(
      --nexo-geometry-align-self-tablet,
      var(--nexo-geometry-align-self-desktop)
    );
  }

  .nexo-has-geometry-order {
    order: var(
      --nexo-geometry-order-tablet,
      var(--nexo-geometry-order-desktop)
    );
  }
}

@media (max-width: 767px) {
  .nexo-has-geometry-width {
    width: var(
      --nexo-geometry-width-mobile,
      var(
        --nexo-geometry-width-tablet,
        var(--nexo-geometry-width-desktop)
      )
    );
  }

  .nexo-has-geometry-max-width {
    max-width: var(
      --nexo-geometry-max-width-mobile,
      var(
        --nexo-geometry-max-width-tablet,
        var(--nexo-geometry-max-width-desktop)
      )
    );
  }

  .nexo-has-geometry-height {
    height: var(
      --nexo-geometry-height-mobile,
      var(
        --nexo-geometry-height-tablet,
        var(--nexo-geometry-height-desktop)
      )
    );
  }

  .nexo-has-geometry-min-height {
    min-height: var(
      --nexo-geometry-min-height-mobile,
      var(
        --nexo-geometry-min-height-tablet,
        var(--nexo-geometry-min-height-desktop)
      )
    );
  }

  .nexo-has-geometry-max-height {
    max-height: var(
      --nexo-geometry-max-height-mobile,
      var(
        --nexo-geometry-max-height-tablet,
        var(--nexo-geometry-max-height-desktop)
      )
    );
  }

  .nexo-has-geometry-aspect-ratio {
    aspect-ratio: var(
      --nexo-geometry-aspect-ratio-mobile,
      var(
        --nexo-geometry-aspect-ratio-tablet,
        var(--nexo-geometry-aspect-ratio-desktop)
      )
    );
  }

  .nexo-has-geometry-overflow {
    overflow: var(
      --nexo-geometry-overflow-mobile,
      var(
        --nexo-geometry-overflow-tablet,
        var(--nexo-geometry-overflow-desktop)
      )
    );
  }

  .nexo-has-geometry-align-self {
    align-self: var(
      --nexo-geometry-align-self-mobile,
      var(
        --nexo-geometry-align-self-tablet,
        var(--nexo-geometry-align-self-desktop)
      )
    );
  }

  .nexo-has-geometry-order {
    order: var(
      --nexo-geometry-order-mobile,
      var(
        --nexo-geometry-order-tablet,
        var(--nexo-geometry-order-desktop)
      )
    );
  }
}

@media (min-width: 1025px) {
  .nexo-geometry-hidden-desktop {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .nexo-geometry-hidden-tablet {
    display: none;
  }
}

@media (max-width: 767px) {
  .nexo-geometry-hidden-mobile {
    display: none;
  }
}