// stylelint-disable declaration-no-important

//* Grid variation
//*
//* Custom styles for additional grid alignment options.

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    // Justifying the grid tracks on the row (X) axis
    .#{$infix}grid-justify-content-start   { justify-content: start !important; }
    .#{$infix}grid-justify-content-end     { justify-content: end !important; }
    .#{$infix}grid-justify-content-center  { justify-content: center !important; }
    .#{$infix}grid-justify-content-stretch  { justify-content: stretch !important; }
    .#{$infix}grid-justify-content-between { justify-content: space-between !important; }
    .#{$infix}grid-justify-content-around  { justify-content: space-around !important; }
    .#{$infix}grid-justify-content-evenly  { justify-content: space-evenly !important; }

    // Aligning the grid tracks on the block (Y) axis
    .#{$infix}grid-align-content-start   { align-content: start !important; }
    .#{$infix}grid-align-content-end     { align-content: end !important; }
    .#{$infix}grid-align-content-center  { align-content: center !important; }
    .#{$infix}grid-align-content-between { align-content: space-between !important; }
    .#{$infix}grid-align-content-around  { align-content: space-around !important; }
    .#{$infix}grid-align-content-stretch { align-content: stretch !important; }
    .#{$infix}grid-align-content-evenly  { align-content: space-evenly !important; }

    // Justifying items on the inline (X) axis
    .#{$infix}grid-justify-items-start    { justify-items: start !important; }
    .#{$infix}grid-justify-items-end      { justify-items: end !important; }
    .#{$infix}grid-justify-items-center   { justify-items: center !important; }
    .#{$infix}grid-justify-items-stretch  { justify-items: space-between !important; }
    .#{$infix}grid-justify-items-baseline { justify-items: space-between !important; }

    // Aligning items on the block (Y) axis
    .#{$infix}grid-align-items-start     { align-items: start !important; }
    .#{$infix}grid-align-items-end       { align-items: end !important; }
    .#{$infix}grid-align-items-center    { align-items: center !important; }
    .#{$infix}grid-align-items-stretch   { align-items: stretch !important; }
    .#{$infix}grid-align-items-baseline  { align-items: baseline !important; }

    // Aligning individual items on the block (Y) axis
    .#{$infix}grid-align-self-auto       { align-self: auto !important; }
    .#{$infix}grid-align-self-start      { align-self: start !important; }
    .#{$infix}grid-align-self-end        { align-self: end !important; }
    .#{$infix}grid-align-self-center     { align-self: center !important; }
    .#{$infix}grid-align-self-baseline   { align-self: baseline !important; }
    .#{$infix}grid-align-self-stretch    { align-self: stretch !important; }

    // Justifying individual items on the inline (X) axis
    .#{$infix}grid-justify-self-auto     { justify-self: auto !important; }
    .#{$infix}grid-justify-self-start    { justify-self: start !important; }
    .#{$infix}grid-justify-self-end      { justify-self: end !important; }
    .#{$infix}grid-justify-self-center   { justify-self: center !important; }
    .#{$infix}grid-justify-self-baseline { justify-self: baseline !important; }
    .#{$infix}grid-justify-self-stretch  { justify-self: stretch !important; }
  }
}


//* Grid container max-width
//*
//* Sets max-width on the grid container at a specific breakpoint (seamless)

@include media-breakpoint-up(md) {
  .md-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, md)} - #{$sidebar-condensed-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__wrapper--sidebar-fixed .md-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, md)} - #{$sidebar-wide-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }
}

@include media-breakpoint-up(lg) {
  .lg-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, lg)} - #{$sidebar-condensed-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__wrapper--sidebar-fixed .lg-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, lg)} - #{$sidebar-wide-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }
}

@include media-breakpoint-up(xl) {
  .xl-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, xl)} - #{$sidebar-condensed-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__wrapper--sidebar-fixed .xl-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, xl)} - #{$sidebar-wide-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }
}

@include media-breakpoint-up(xxl) {
  .xxl-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, xxl)} - #{$sidebar-condensed-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__wrapper--sidebar-fixed .xxl-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, xxl)} - #{$sidebar-wide-width} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }
}

//*  Max-width classes for overview pages (= pages with sidenav)

@include media-breakpoint-up(md) {
  .layout-ov-page__content .md-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, md)} - #{$sidebar-condensed-width} - #{$sidenav-aside-width} - #{$grid-gap} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__wrapper--sidebar-fixed .layout-ov-page__content .md-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, md)} - #{$sidebar-wide-width} - #{$sidenav-aside-width} - #{$grid-gap} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }
}

@include media-breakpoint-up(lg) {
  .layout-ov-page__content .lg-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, lg)} - #{$sidebar-condensed-width} - #{$sidenav-aside-width} - #{$grid-gap} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__wrapper--sidebar-fixed .layout-ov-page__content .lg-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, lg)} - #{$sidebar-wide-width} - #{$sidenav-aside-width} - #{$grid-gap} - (#{$content-padding} * 2));
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }
}

@include media-breakpoint-up(xl) {
  .layout-ov-page__content .xl-grid-max-width {
    width: calc(#{map-get($grid-breakpoints, xl)} - #{$sidebar-condensed-width} - #{$sidenav-aside-width} - #{$grid-gap} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }

  .layout__wrapper--sidebar-fixed .layout-ov-page__content .xl-grid-max-width  {
    width: calc(#{map-get($grid-breakpoints, xl)} - #{$sidebar-wide-width} - #{$sidenav-aside-width} - #{$grid-gap} - #{$content-padding} * 2);
    transition: width $shell-transition-duration $ease-in-out-curve-function;
  }
}

@include media-breakpoint-up(xxl) {
  .layout-ov-page__content {
    .xxl-grid-max-width {
      width: calc(#{map-get($grid-breakpoints, xxl)} - #{$sidebar-condensed-width} - #{$sidenav-aside-width} - #{$grid-gap} - #{$content-padding} * 2);
      transition: width $shell-transition-duration $ease-in-out-curve-function;
    }
  }

  .layout__wrapper--sidebar-fixed {
    .layout-ov-page__content {
      .xxl-grid-max-width {
        width: calc(#{map-get($grid-breakpoints, xxl)} - #{$sidebar-wide-width} - #{$sidenav-aside-width} - #{$grid-gap} - #{$content-padding} * 2);
        transition: width $shell-transition-duration $ease-in-out-curve-function;
      }
    }
  }
}


//*  Section Indicator
//*
//*  Makes room for the section indicator on the right

.grid-section-indicator {
  @include media-breakpoint-up(sm) {padding-right: calc(#{$section-indicator-width} - #{$content-padding});}

  //*  Section indicator in combination with grid-max-width classes

  //MD
  &.md-grid-max-width.mx-auto {
    @media (min-width: map-get($grid-breakpoints, md) + (($section-indicator-width - $content-padding) * 2)) {padding-right: 0;}
  }

  &.md-grid-max-width:not(.mx-auto) {
    @media (min-width: map-get($grid-breakpoints, md) + $section-indicator-width - $content-padding) {padding-right: 0;}
  }

  //LG
  &.lg-grid-max-width.mx-auto {
    @media (min-width: map-get($grid-breakpoints, lg) + (($section-indicator-width - $content-padding) * 2)) {padding-right: 0;}
  }

  &.lg-grid-max-width:not(.mx-auto) {
    @media (min-width: map-get($grid-breakpoints, lg) + $section-indicator-width - $content-padding) {padding-right: 0;}
  }

  //XL
  &.xl-grid-max-width.mx-auto {
    @media (min-width: map-get($grid-breakpoints, xl) + (($section-indicator-width - $content-padding) * 2)) {padding-right: 0;}
  }

  &.xl-grid-max-width:not(.mx-auto) {
    @media (min-width: map-get($grid-breakpoints, xl) + $section-indicator-width - $content-padding) {padding-right: 0;}
  }

  //XXL
  &.xxl-grid-max-width.mx-auto {
    @media (min-width: map-get($grid-breakpoints, xxl) + (($section-indicator-width - $content-padding) * 2)) {padding-right: 0;}
  }

  &.xxl-grid-max-width:not(.mx-auto) {
    @media (min-width: map-get($grid-breakpoints, xxl) + $section-indicator-width - $content-padding) {padding-right: 0;}
  }
}