@use "sass:map";
@use "sass:meta";
@use "../config/feature-flags" as config-flags;
@use "../config/breakpoints" as config-breakpoint;
@use "../config/container-queries" as config-container;
@use "../functions/feature-flags" as fn-flags;
@use "../functions/breakpoints" as fn-breakpoints;

// Container Query Mixins
// Usage:
// .container {
//   container-type: inline-size;
//   container-name: sidebar;
// }
// .item {
//   @include container-up('md', 'sidebar') {
//     // Styles for 'md' and up within 'sidebar' container
//   }
// }

// /Container Query: Up
@mixin container-up($breakpoint, $containerName: null) {
    $bp-val: fn-breakpoints.get-breakpoint-value($breakpoint);
    @container #{$containerName} (min-width: #{$bp-val}) {
        @content;
    }
}

// /Container Query: Down
@mixin container-down($breakpoint, $containerName: null) {
    $bp-val: fn-breakpoints.get-breakpoint-value($breakpoint);
    $max-val: $bp-val - 0.02px;
    @container #{$containerName} (max-width: #{$max-val}) {
        @content;
    }
}

// /Container Query: Between
@mixin container-between($lower, $upper, $containerName: null) {
    $min: fn-breakpoints.get-breakpoint-value($lower);
    $max: fn-breakpoints.get-breakpoint-value($upper);
    $max-val: $max - 0.02px;
    @container #{$containerName} (min-width: #{$min}) and (max-width: #{$max-val}) {
        @content;
    }
}

// /Container Query: Only
@mixin container-only($breakpoint, $containerName: null) {
    $min: fn-breakpoints.get-breakpoint-value($breakpoint);
    $next-breakpoint: null;

    @each $name, $width in config-breakpoint.$breakpoints {
        @if $width > $min and (not $next-breakpoint or $width < $next-breakpoint) {
            $next-breakpoint: $width;
        }
    }

    @if $next-breakpoint {
        $max-val: $next-breakpoint - 0.02px;
        @container #{$containerName} (min-width: #{$min}) and (max-width: #{$max-val}) {
            @content;
        }
    } @else {
        @container #{$containerName} (min-width: #{$min}) {
            @content;
        }
    }
}

// /Container Query: Query by Size
@mixin container-query($size, $containerName: null) {
    @container #{$containerName} (min-width: $size) {
        @content;
    }
}

@mixin container-type($type: inline-size) {
    container-type: $type;
}

@mixin container-name($name) {
    container-name: $name;
}

@if fn-flags.feature-enabled("container-queries") {
    // Utility classes
    #{config-flags.$parent-selector} .container-inline-size {
        container-type: inline-size;
    }

    #{config-flags.$parent-selector} .container-size {
        container-type: size;
    }

    @each $name in config-container.$container-names {
        #{config-flags.$parent-selector} .container-#{$name} {
            container-name: $name;
        }
    }
}