@import '../abstracts/_mixins';

.wrapper--full {
  position: relative;
  width: 100%;

  .grid__wrapper {
    padding: 0;
  }
}

.wrapper--1,
.wrapper--large,
.wrapper--2,
.wrapper--medium,
.wrapper--3,
.wrapper--small {
  position: relative;
  width: 100%;
  height: 100%;
  margin: auto;
  padding: 0 var(--spacing-4);

  @include mq-480 {
    padding: 0 var(--spacing-3);
  }

  @include mq-320 {
    padding: 0 var(--spacing-2);
  }
}

.wrapper--1,
.wrapper--large {
  max-width: var(--wrapper-large)
}

.wrapper--2,
.wrapper--medium {
  max-width: var(--wrapper-medium)
}

.wrapper--3,
.wrapper--small {
  max-width: var(--wrapper-small)
}

div[class*='wrapper--']:not(.wrapper--full) {
  .wrapper--full {
    width: calc(100vw - var(--side-bar-width));
    margin: 0 calc(50% - 50vw + var(--side-bar-width) / 2);
  }

  .side-bar--active {
    .wrapper--full {
      width: 100vw;
      margin: 0vw;
    }
  }

  $wrappers: 1 "large" 1368px,
    2 "medium" 1068px,
    3 "small" 768px;

  @each $wrapper, $wrapper-var, $media-query in $wrappers {
    .wrapper--#{$wrapper} {
      width: 100vw;
      max-width: var(--wrapper-#{$wrapper-var});
      margin: 0 calc(50% - var(--wrapper-#{$wrapper-var}) / 2);

      @media only screen and (max-width: #{$media-query}) {
        margin: 0px calc(50% - 50vw);
      }
    }
  }

  $wrappers: (
    'large': 1368px,
    'medium': 1068px,
    'small': 768px
  );

@each $wrapper, $media-query in $wrappers {
  .wrapper--#{$wrapper} {
    width: 100vw;
    max-width: var(--wrapper-#{$wrapper});
    margin: 0 calc(50% - var(--wrapper-#{$wrapper}) / 2);

    @media only screen and (max-resolution: 1.25dppx) and (max-width: #{$media-query}) {
      margin: 0px calc(50% - 50vw);
    }
  }
}
}

@include print {
  div[class*='wrapper--'] {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}