/**
 * Repsonsive Styles
 */

/**
 * Required Variables
 */

$default_width: 1170px;
$max_content_width: 1370px;
$default_width_post: 768px;
$breakpoint_sm: 482px;
$breakpoint_md: 592px;
$breakpoint_lg: 652px;
$breakpoint_xl: 822px;
$breakpoint_xxl: 1024px;

// Responsive breakpoints mixin
@mixin media( $res ) {

  @if mobile-only == $res {
    @media only screen and (max-width: #{$breakpoint_sm - 1}) {
      @content;
    }
  }

  @if mobile == $res {
    @media only screen and (min-width: #{$breakpoint_sm}) {
      @content;
    }
  }

  @if tablet-only == $res {
    @media only screen and (max-width: #{$breakpoint_md - 1}) {
      @content;
    }
  }

  @if tablet == $res {
    @media only screen and (min-width: #{$breakpoint_md}) {
      @content;
    }
  }

  @if laptop-only == $res {
    @media only screen and (max-width: #{$breakpoint_lg - 1}) {
      @content;
    }
  }

  @if laptop == $res {
    @media only screen and (min-width: #{$breakpoint_lg}) {
      @content;
    }
  }

  @if desktop-only == $res {
    @media only screen and (max-width: #{$breakpoint_xl - 1}) {
      @content;
    }
  }

  @if desktop == $res {
    @media only screen and (min-width: #{$breakpoint_xl}) {
      @content;
    }
  }

  @if wide-only == $res {
    @media only screen and (max-width: #{$breakpoint_xxl - 1}) {
      @content;
    }
  }

  @if wide == $res {
    @media only screen and (min-width: #{$breakpoint_xxl}) {
      @content;
    }
  }
}

/**
 * Root Media Query Variables
 */
:root {
  --responsive--spacing-horizontal: 40px;
  --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
  --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
  --responsive--alignfull-width: 100%;
  --responsive--alignright-margin: var(--global--spacing-horizontal);
  --responsive--alignleft-margin: var(--global--spacing-horizontal);
  --responsive--alignright-margin-post: var(--global--spacing-horizontal);
  --responsive--alignleft-margin-post: var(--global--spacing-horizontal);

}

@include media(mobile) {

  :root {
    --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), #{$default_width});
    --responsive--aligndefault-width-post: min(calc(100vw - 4 * var(--global--spacing-horizontal)), #{$default_width_post});
    --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
    --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
    --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
    --responsive--alignright-margin-post: calc(0.5 * (100vw - var(--responsive--aligndefault-width-post)));
    --responsive--alignleft-margin-post: calc(0.5 * (100vw - var(--responsive--aligndefault-width-post)));
  }
}

@include media(desktop) {

  :root {
    --responsive--aligndefault-width: #{$default_width};
    --responsive--alignwide-width: #{$max_content_width};
    --responsive--aligndefault-width-post: #{$default_width_post};
  }
}

/**
 * Extends
 */
%responsive-aligndefault-width {

  max-width: var(--responsive--aligndefault-width);
  margin-left: auto;
  margin-right: auto;

  .post &,
  .rockiste-narrow-page &,
  .editor-styles-wrapper & {

    @include media(mobile) {
      max-width: var(--responsive--aligndefault-width-post);
    }

  }


}

%responsive-aligndefault-width-post {

  max-width: var(--responsive--aligndefault-width-post);
  margin-left: auto;
  margin-right: auto;

}

%responsive-alignwide-width {
  max-width: var(--responsive--alignwide-width);
  margin-left: auto;
  margin-right: auto;

  .post &,
  .editor-styles-wrapper & {
    max-width: var(--responsive--aligndefault-width);
  }
}

%responsive-alignfull-width-mobile {
  max-width: var(--responsive--alignfull-width);
  width: var(--responsive--alignfull-width);
  margin-left: auto;
  margin-right: auto;
}

@include media(mobile) {
  %responsive-alignfull-width {
    max-width: var(--responsive--alignfull-width);
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

%responsive-alignwide-width-nested {
  margin-left: auto;
  margin-right: auto;
  width: var(--responsive--alignwide-width);
  max-width: var(--responsive--alignfull-width);
}

%responsive-alignfull-width-nested {
  margin-left: auto;
  margin-right: auto;
  width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal)));
  max-width: var(--responsive--alignfull-width);
}

@include media(desktop) {
  %responsive-alignfull-width-nested {
    margin-left: auto;
    margin-right: auto;
    width: calc(var(--responsive--alignfull-width) - calc(4 * var(--responsive--spacing-horizontal)));
    max-width: var(--responsive--alignfull-width);
  }
}


%responsive-alignleft-mobile {

  /*rtl:ignore*/
  margin-left: 0;
  /*rtl:ignore*/
  margin-right: var(--responsive--spacing-horizontal);
}

@include media(mobile) {
  %responsive-alignleft {


    /*rtl:ignore*/
    margin-left: var(--responsive--alignleft-margin);

    /*rtl:ignore*/
    margin-right: var(--global--spacing-horizontal);


  }
}

%responsive-alignright-mobile {

  /*rtl:ignore*/
  margin-left: var(--responsive--spacing-horizontal);

  /*rtl:ignore*/
  margin-right: 0;
}

@include media(mobile) {
  %responsive-alignright {

    /*rtl:ignore*/
    margin-left: var(--global--spacing-horizontal);

    /*rtl:ignore*/
    margin-right: var(--responsive--alignright-margin);

    .post & {
      margin-right: var(--responsive--alignright-margin-post);

    }

  }
}

// Output


.default-max-width {
  @extend %responsive-aligndefault-width;
}

.wide-max-width {
  @extend %responsive-alignwide-width;
}

.full-max-width {
  @extend %responsive-alignfull-width;
}