@use 'sass:map';

$layout-breakpoints: (
  xs: 480px,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
  fhd: 1920px,
  fhd-p: 2200px
);

@mixin container($breakpoint) {
  /* Set 'container-type: inline-size;' to reference container*/

  $val: map.get($layout-breakpoints, $breakpoint);
  @container (width < #{$val}) {
    @content;
  }
}

@mixin container-custom($width) {
  /* Set 'container-type: inline-size;' to reference container*/
  @container (width < #{$width}) {
    @content;
  }
}

@mixin container-mobile() {
  @include container(sm) {
    @content;
  }
}

@mixin container-tablet() {
  @include container(md) {
    @content;
  }
}

@mixin container-laptop() {
  @include container(lg) {
    @content;
  }
}

@mixin container-narrow-desktop() {
  @include container(xl) {
    @content;
  }
}

@mixin container-desktop() {
  @include container(xxl) {
    @content;
  }
}

@mixin container-fhd() {
  @include container(fhd) {
    @content;
  }
}

@mixin container-fhd-p() {
  @include container(fhd-p) {
    @content;
  }
}

@mixin layout($breakpoint) {
  @media screen and (max-width: map.get($layout-breakpoints, $breakpoint)) {
    @content;
  }
}

@mixin layout-mobile() {
  @include layout(sm) {
    @content;
  }
}

@mixin layout-tablet() {
  @include layout(md) {
    @content;
  }
}

@mixin layout-laptop() {
  @include layout(lg) {
    @content;
  }
}

@mixin layout-narrow-desktop() {
  @include layout(xl) {
    @content;
  }
}

@mixin layout-desktop() {
  @include layout(xxl) {
    @content;
  }
}

@mixin layout-fhd() {
  @include layout(fhd) {
    @content;
  }
}

@mixin layout-fhd-p() {
  @include layout(fhd-p) {
    @content;
  }
}