@use 'sass:map';

// Container breakpoint classes:
// .int-container-xxs
// .int-container-xs
// .int-container-sm
// .int-container-md
// .int-container-lg
// .int-container-xl
// .int-container-xxl

$container-floors: (
  'xxs': 0px,
  'xs': 251px,
  'sm': 328px,
  'md': 420px,
  'lg': 625px,
  'xl': 841px,
  'xxl': 1040px,
);
$next-container: (
  'xxs': 'xs',
  'xs': 'sm',
  'sm': 'md',
  'md': 'lg',
  'lg': 'xl',
  'xl': 'xxl',
);

@mixin container-at-least($name) {
  $xs: if(&, ':global(.int-container-xs) &', ':global(.int-container-xs)');
  $sm: if(&, ':global(.int-container-sm) &', ':global(.int-container-sm)');
  $md: if(&, ':global(.int-container-md) &', ':global(.int-container-md)');
  $lg: if(&, ':global(.int-container-lg) &', ':global(.int-container-lg)');
  $xl: if(&, ':global(.int-container-xl) &', ':global(.int-container-xl)');
  $xxl: if(
    &,
    ':global(.int-container-xxl) &',
    ':global(.int-container-xxl)'
  );

  @if $name == 'xxs' {
    @content;
  }

  @supports (container-type: inline-size) {
    $floor: map.get($container-floors, $name);

    @container intmodule (min-width: #{$floor}) {
      @content;
    }
  }

  @supports not (container-type: inline-size) {
    @if $name == 'xs' {
      #{$xs},
      #{$sm},
      #{$md},
      #{$lg},
      #{$xl},
      #{$xxl} {
        @content;
      }
    }

    @if $name == 'sm' {
      #{$sm},
      #{$md},
      #{$lg},
      #{$xl},
      #{$xxl} {
        @content;
      }
    }

    @if $name == 'md' {
      #{$md},
      #{$lg},
      #{$xl},
      #{$xxl} {
        @content;
      }
    }

    @if $name == 'lg' {
      #{$lg},
      #{$xl},
      #{$xxl} {
        @content;
      }
    }

    @if $name == 'xl' {
      #{$xl},
      #{$xxl} {
        @content;
      }
    }

    @if $name == 'xxl' {
      #{$xxl} {
        @content;
      }
    }
  }
}

@mixin container-at-most($name) {
  $xxs: if(
    &,
    ':global(.int-container-xxs) &',
    ':global(.int-container-xxs)'
  );
  $xs: if(&, ':global(.int-container-xs) &', ':global(.int-container-xs)');
  $sm: if(&, ':global(.int-container-sm) &', ':global(.int-container-sm)');
  $md: if(&, ':global(.int-container-md) &', ':global(.int-container-md)');
  $lg: if(&, ':global(.int-container-lg) &', ':global(.int-container-lg)');
  $xl: if(&, ':global(.int-container-xl) &', ':global(.int-container-xl)');

  @if $name == 'xxl' {
    @content;
  }

  @if $name != 'xxl' {
    @supports (container-type: inline-size) {
      $next: map.get($next-container, $name);
      $floor: map.get($container-floors, $next);

      @container intmodule (max-width: #{$floor - 1px}) {
        @content;
      }
    }

    @supports not (container-type: inline-size) {
      @if $name == 'xxs' {
        #{$xxs} {
          @content;
        }
      }

      @if $name == 'xs' {
        #{$xxs},
        #{$xs} {
          @content;
        }
      }

      @if $name == 'sm' {
        #{$xxs},
        #{$xs},
        #{$sm} {
          @content;
        }
      }

      @if $name == 'md' {
        #{$xxs},
        #{$xs},
        #{$sm},
        #{$md} {
          @content;
        }
      }

      @if $name == 'lg' {
        #{$xxs},
        #{$xs},
        #{$sm},
        #{$md},
        #{$lg} {
          @content;
        }
      }

      @if $name == 'xl' {
        #{$xxs},
        #{$xs},
        #{$sm},
        #{$md},
        #{$lg},
        #{$xl} {
          @content;
        }
      }
    }
  }
}