@use '../breakpoints';

@mixin layout {
  // ВАЖНО: не используем 100vw так как при использовании 100vw не вычитается ширина полосы прокрутки страницы
  width: 100%;

  // центрируем
  margin-left: auto;
  margin-right: auto;
}

// ВАЖНО: не прокидываем никаких кастомных свойств внутрь чтобы ими не воспользовались
.layout {
  @include breakpoints.lt('ms') {
    &:not(.disabled-mxs) {
      @include layout;
      padding-left: 16px;
      padding-right: 16px;
    }
  }
  @include breakpoints.gte('ms') {
    @include breakpoints.lt('mm') {
      &:not(.disabled-ms) {
        @include layout;
        padding-left: 16px;
        padding-right: 16px;
      }
    }
  }
  @include breakpoints.gte('mm') {
    @include breakpoints.lt('ml') {
      &:not(.disabled-mm) {
        @include layout;
        max-width: 656px;
      }
    }
  }
  @include breakpoints.gte('ml') {
    @include breakpoints.lt('xs') {
      &:not(.disabled-ml) {
        @include layout;
        max-width: 672px;
      }
    }
  }
  @include breakpoints.gte('xs') {
    @include breakpoints.lt('s') {
      &:not(.disabled-xs) {
        @include layout;
        padding-left: 64px;
        padding-right: 64px;
      }
    }
  }
  @include breakpoints.gte('s') {
    @include breakpoints.lt('m') {
      &:not(.disabled-s) {
        @include layout;
        padding-left: 64px;
        padding-right: 64px;
      }
    }
  }
  @include breakpoints.gte('m') {
    @include breakpoints.lt('l') {
      &:not(.disabled-m) {
        @include layout;
        padding-left: 64px;
        padding-right: 64px;
      }
    }
  }
  @include breakpoints.gte('l') {
    @include breakpoints.lt('xl') {
      &:not(.disabled-l) {
        @include layout;
        max-width: 1472px;
      }
    }
  }
  @include breakpoints.gte('xl') {
    &:not(.disabled-xl) {
      @include layout;
      max-width: 1504px;
    }
  }
}