@use "sass:math";
@use "media-queries";
@use "variables";

/* =Container Queries
-----------------------------------------------------------------------------*/

// Wrapper — enables container queries on any element
.container-query {
  container-type: inline-size;
}

// Container-scoped responsive units
// Mirror the viewport breakpoints but scope to the container's inline size.

$container-breakpoints: (
  "phone": media-queries.$breakpoint-phone,
  "large-phone": media-queries.$breakpoint-large-phone,
  "tablet": media-queries.$breakpoint-tablet,
  "small-desktop": media-queries.$breakpoint-small-desktop,
);

@each $bp-name, $bp-value in $container-breakpoints {
  @container (max-width: #{$bp-value}) {
    @each $name, $value in variables.$unit-scale {
      .container-#{$bp-name}-unit-#{$name} {
        @if $name == 100 {
          flex-basis: 100%;
        } @else {
          flex-basis: calc(#{$value} - var(--units-gap, 1rem) * #{1 - math.div($name, 100)});
        }
      }
    }
    .container-#{$bp-name}-unit-auto {
      flex-basis: 0;
      flex-grow: 1;
    }
  }
}