@use "../variables" as *;

/* RetroCSS Container Queries
 * A modern approach to component-based responsive design
 */

// Container Query Container
.retro-container {
  container-type: inline-size;
  container-name: retro-container;
}

// NOTE: eleven @container blocks used to sit here -- .retro-cq-sm/-md/-lg/-xl,
// -wide/-tall, -landscape/-portrait and -size-sm/-md/-lg -- each with a
// comment for a body. They compiled to nothing, so those classes were
// documented by their names and did not exist. Removed rather than filled
// in: what they should do depends on the component, and the blocks below
// cover the cases the framework actually has an opinion about.

// Container Query Mixins
@mixin container-query($breakpoint) {
  @container retro-container (min-width: $breakpoint) {
    @content;
  }
}

// Container Query Utilities
.retro-cq-hide {
  @container retro-container (max-width: 20rem) {
    display: none;
  }
}

.retro-cq-show {
  @container retro-container (min-width: 20rem) {
    display: block;
  }
}

// Container Query Typography
@container retro-container (min-width: 30rem) {
  .retro-cq-text-lg {
    font-size: 1.25rem;
  }
}

@container retro-container (min-width: 40rem) {
  .retro-cq-text-xl {
    font-size: 1.5rem;
  }
}

// Container Query Layout
@container retro-container (min-width: 30rem) {
  .retro-cq-flex-row {
    flex-direction: row;
  }
}

@container retro-container (max-width: 30rem) {
  .retro-cq-flex-col {
    flex-direction: column;
  }
}

// Container Query Spacing
@container retro-container (min-width: 30rem) {
  .retro-cq-p-4 {
    padding: 1rem;
  }
}

@container retro-container (min-width: 40rem) {
  .retro-cq-p-6 {
    padding: 1.5rem;
  }
}

// Container Query Grid
@container retro-container (min-width: 30rem) {
  .retro-cq-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@container retro-container (min-width: 40rem) {
  .retro-cq-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}