/*!
 * Created by PhpStorm.
 * Developer: Tariq Ayman ( tariq.ayman94@gmail.com )
 * Date: 1/5/20, 1:53 AM
 * Last Modified: 12/22/19, 10:14 PM
 * Project Name: Wafaq
 * File Name: _layout.scss
 */

/*!
 * Created by PhpStorm.
 * Developer: Tariq Ayman ( tariq.ayman94@gmail.com )
 * Date: 12/22/19, 10:14 PM
 * Last Modified: 11/1/19, 5:58 PM
 *
 * File Name: _layout.scss
 */

// Layouts
//

.layout-wrapper,
.layout-inner {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  width: 100%;
}

.layout-offcanvas .layout-wrapper,
.layout-fixed-offcanvas .layout-wrapper {
  overflow: hidden;
}

.layout-inner {
  min-height: 100vh;
}

.layout-container,
.layout-content,
.layout-content > *,
.layout-sidenav {
  min-height: 1px;
}

.layout-container {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  padding: 0;

  .layout-without-sidenav & {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

.layout-content {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
}

.layout-navbar,
.layout-footer {
  flex: 0 0 auto;
}

.layout-navbar {
  position: relative;
  z-index: 2;

  .navbar {
    transform: translate3d(0, 0, 0);
  }
}

.layout-sidenav {
  position: relative;
  flex: 1 0 auto;

  .sidenav {
    transform: translate3d(0, 0, 0);
  }

  .sidenav-vertical {
    height: 100%;
  }
}

.layout-sidenav .sidenav-vertical,
.layout-sidenav.sidenav-vertical {
  align-items: flex-start;
}

html:not(.layout-fixed):not(.layout-fixed-offcanvas) .layout-sidenav.sidenav-vertical {
  min-height: 100%;
}

// *******************************************************************************
// * Layout 1

.layout-1 {
  .layout-inner {
    flex-direction: column;
  }

  .layout-content {
    flex-basis: 100%;
    width: 0;
    min-width: 0;
    max-width: 100%;
  }
}

// *******************************************************************************
// * Layout 2

.layout-2 {
  .layout-container {
    flex-basis: 100%;
    flex-direction: column;
    width: 0;
    min-width: 0;
    max-width: 100%;
  }

  .layout-content {
    // flex-basis: 100%;
    width: 100%;
  }
}

// *******************************************************************************
// * Reversed layout

.layout-reversed {
  .layout-1 .layout-container {
    flex-direction: row-reverse;
  }

  .layout-2 .layout-inner {
    flex-direction: row-reverse;
  }
}

// *******************************************************************************
// * Toggle

.layout-sidenav-toggle {
  display: block;
}

// *******************************************************************************
// * Small screens layout

@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
  .layout-sidenav {
    position: fixed !important;
    top: 0 !important;
    height: 100% !important;
    left: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    transform: translate3d(-100%, 0, 0);
    will-change: transform, -webkit-transform;

    @include rtl-style {
      right: 0 !important;
      left: auto !important;
      transform: translate3d(100%, 0, 0);
    }

    .layout-reversed & {
      right: 0 !important;
      left: auto !important;
      transform: translate3d(100%, 0, 0);
    }

    .layout-expanded & {
      transform: translate3d(0, 0, 0) !important;
    }
  }

  .layout-expanded body {
    overflow: hidden;
  }

  @include rtl-only {
    &.layout-reversed .layout-sidenav {
      right: auto !important;
      left: 0 !important;
      transform: translate3d(-100%, 0, 0);
    }
  }

  .layout-overlay {
    position: fixed;
    top: 0;
    right: 0;
    height: 100% !important;
    left: 0;
    display: none;
    background: $modal-backdrop-bg;
    opacity: $modal-backdrop-opacity;
    cursor: pointer;

    .layout-expanded & {
      display: block;
    }
  }

  .layout-sidenav-100vh .layout-sidenav,
  .layout-sidenav-100vh .layout-overlay {
    height: 100vh !important;
  }
}

// *******************************************************************************
// * Collapsed layout

@include media-breakpoint-up(lg) {
  // Sidenav style

  .layout-collapsed:not(.layout-sidenav-hover):not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
    .layout-sidenav .sidenav-vertical,
    .layout-sidenav.sidenav-vertical {
      @include sidenav-collapsed();
    }
  }

  @include rtl-only {
    &.layout-collapsed:not(.layout-sidenav-hover):not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
      .layout-sidenav .sidenav-vertical,
      .layout-sidenav.sidenav-vertical {
        @include sidenav-collapsed-rtl();
      }
    }
  }

  // Sidenav position

  .layout-sidenav-hover.layout-collapsed {
    .layout-sidenav {
      margin-right: -$sidenav-width + $sidenav-collapsed-width;
    }

    &.layout-reversed .layout-sidenav {
      margin-right: 0;
      margin-left: -$sidenav-width + $sidenav-collapsed-width;
    }
  }

  @include rtl-only {
    &.layout-sidenav-hover.layout-collapsed {
      .layout-sidenav {
        margin-right: 0;
        margin-left: -$sidenav-width + $sidenav-collapsed-width;
      }

      &.layout-reversed .layout-sidenav {
        margin-right: -$sidenav-width + $sidenav-collapsed-width;
        margin-left: 0;
      }
    }
  }
}

// *******************************************************************************
// * Off-canvas layout

@include media-breakpoint-up(lg) {
  .layout-collapsed.layout-offcanvas {
    .layout-sidenav {
      margin-right: -$sidenav-width;
      transform: translateX(-100%);
    }

    &.layout-reversed .layout-sidenav {
      margin-right: 0;
      margin-left: -$sidenav-width;
      transform: translateX(100%);
    }
  }

  @include rtl-only {
    &.layout-collapsed.layout-offcanvas {
      .layout-sidenav {
        margin-right: 0;
        margin-left: -$sidenav-width;
        transform: translateX(100%)
      }

      &.layout-reversed .layout-sidenav {
        margin-right: -$sidenav-width;
        margin-left: 0;
        transform: translateX(-100%)
      }
    }
  }
}

// *******************************************************************************
// * Fixed and fixed off-canvas layout

@include media-breakpoint-up(lg) {
  // Sidenav

  .layout-fixed,
  .layout-fixed-offcanvas {
    .layout-sidenav {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      margin-right: 0 !important;
      margin-left: 0 !important;
    }

    &.layout-reversed .layout-sidenav {
      right: 0;
      left: auto;
    }
  }

  @include rtl-only {
    &.layout-fixed,
    &.layout-fixed-offcanvas {
      .layout-sidenav {
        right: 0;
        left: auto;
      }

      &.layout-reversed .layout-sidenav {
        right: auto;
        left: 0;
      }
    }
  }

  // Fixed off-canvas

  .layout-fixed-offcanvas.layout-collapsed {
    .layout-sidenav {
      transform: translateX(-100%);
    }

    &.layout-reversed .layout-sidenav {
      transform: translateX(100%);
    }
  }

  @include rtl-only {
    &.layout-fixed-offcanvas.layout-collapsed {
      .layout-sidenav {
        transform: translateX(100%);
      }

      &.layout-reversed .layout-sidenav {
        transform: translateX(-100%);
      }
    }
  }

  // Container

  .layout-fixed:not(.layout-collapsed),
  .layout-fixed-offcanvas:not(.layout-collapsed) {
    .layout-container {
      padding-left: $sidenav-width;
    }

    &.layout-reversed .layout-container {
      padding-right: $sidenav-width;
      padding-left: 0;
    }
  }

  @include rtl-only {
    &.layout-fixed:not(.layout-collapsed),
    &.layout-fixed-offcanvas:not(.layout-collapsed) {
      .layout-container {
        padding-right: $sidenav-width;
        padding-left: 0;
      }

      &.layout-reversed .layout-container {
        padding-right: 0;
        padding-left: $sidenav-width;
      }
    }
  }

  .layout-fixed.layout-collapsed {
    .layout-container {
      padding-left: $sidenav-collapsed-width;
    }

    &.layout-reversed .layout-container {
      padding-right: $sidenav-collapsed-width;
      padding-left: 0;
    }
  }

  @include rtl-only {
    &.layout-fixed.layout-collapsed {
      .layout-container {
        padding-right: $sidenav-collapsed-width;
        padding-left: 0;
      }

      &.layout-reversed .layout-container {
        padding-right: 0;
        padding-left: $sidenav-collapsed-width;
      }
    }
  }
}

// Reset paddings
html:not(.layout-navbar-fixed):not(.layout-fixed):not(.layout-fixed-offcanvas) .layout-container,
html:not(.layout-navbar-fixed) .layout-2 .layout-container {
  padding-top: 0 !important;
}
html:not(.layout-footer-fixed) .layout-content {
  padding-bottom: 0 !important;
}
@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
  .layout-fixed .layout-wrapper.layout-1 .layout-sidenav,
  .layout-fixed-offcanvas .layout-wrapper.layout-1 .layout-sidenav {
    top: 0 !important;
  }

  html:not(.layout-navbar-fixed) .layout-1 .layout-container {
    padding-top: 0 !important;
  }
}

// *******************************************************************************
// * Fixed navbar layout

.layout-navbar-fixed .layout-navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

@include media-breakpoint-up(lg) {
  // Fix navbar within layout 1 in fixed mode
  .layout-fixed .layout-1 .layout-navbar,
  .layout-fixed-offcanvas .layout-1 .layout-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
  }

  // Layout fixed

  .layout-navbar-fixed:not(.layout-collapsed),
  .layout-fixed.layout-navbar-fixed:not(.layout-collapsed),
  .layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed) {
    .layout-2 .layout-navbar {
      left: $sidenav-width;
    }

    &.layout-reversed .layout-2 .layout-navbar {
      right: $sidenav-width;
      left: 0;
    }
  }

  @include rtl-only {
    &.layout-navbar-fixed:not(.layout-collapsed),
    &.layout-fixed.layout-navbar-fixed:not(.layout-collapsed),
    &.layout-fixed-offcanvas.layout-navbar-fixed:not(.layout-collapsed) {
      .layout-2 .layout-navbar {
        right: $sidenav-width;
        left: 0;
      }

      &.layout-reversed .layout-2 .layout-navbar {
        right: 0;
        left: $sidenav-width;
      }
    }
  }

  // Layout fixed off-canvas

  .layout-navbar-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas),
  .layout-fixed.layout-navbar-fixed.layout-collapsed {
    .layout-2 .layout-navbar {
      left: $sidenav-collapsed-width;
    }

    &.layout-reversed .layout-2 .layout-navbar {
      right: $sidenav-collapsed-width;
      left: 0;
    }
  }

  @include rtl-only {
    &.layout-navbar-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas),
    &.layout-fixed.layout-navbar-fixed.layout-collapsed {
      .layout-2 .layout-navbar {
        right: $sidenav-collapsed-width;
        left: 0;
      }

      &.layout-reversed .layout-2 .layout-navbar {
        right: 0;
        left: $sidenav-collapsed-width;
      }
    }
  }
}

// *******************************************************************************
// * Fixed footer

.layout-footer-fixed .layout-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

@include media-breakpoint-up(lg) {
  .layout-footer-fixed:not(.layout-collapsed) {
    .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
      left: $sidenav-width;
    }

    &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
      right: $sidenav-width;
      left: 0;
    }
  }

  .layout-footer-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
    .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
      left: $sidenav-collapsed-width;
    }

    &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
      right: $sidenav-collapsed-width;
      left: 0;
    }
  }

  @include rtl-only {
    &.layout-footer-fixed:not(.layout-collapsed) {
      .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
        left: 0;
        right: $sidenav-width;
      }

      &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
        left: $sidenav-width;
        right: 0;
      }
    }

    &.layout-footer-fixed.layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
      .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
        left: 0;
        right: $sidenav-collapsed-width;
      }

      &.layout-reversed .layout-wrapper:not(.layout-without-sidenav) .layout-footer {
        right: 0;
        left: $sidenav-collapsed-width;
      }
    }
  }
}

// *******************************************************************************
// * Z-Indexes

// Navbar
.layout-navbar-fixed body:not(.modal-open),
.layout-fixed body:not(.modal-open),
.layout-fixed-offcanvas body:not(.modal-open) {
  .layout-1 .layout-navbar {
    z-index: $zindex-layout-fixed;
  }

  .layout-2 .layout-navbar {
    z-index: $zindex-layout-fixed - 5;
  }
}

.layout-footer-fixed .layout-footer {
  z-index: $zindex-fixed;
}

.layout-sidenav-horizontal {
  z-index: 9;
}

@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
  .layout-sidenav {
    z-index: $zindex-layout-mobile;
  }

  .layout-overlay {
    z-index: $zindex-layout-mobile - 1;
  }
}

@include media-breakpoint-up(lg) {
  .layout-1 {
    .layout-navbar {
      z-index: 10;
    }

    .layout-sidenav {
      z-index: 9;
    }
  }

  .layout-2 {
    .layout-navbar {
      z-index: 9;
    }

    .layout-sidenav {
      z-index: 10;
    }
  }

  // Collapsed

  .layout-collapsed:not(.layout-offcanvas):not(.layout-fixed-offcanvas) {
    &.layout-sidenav-hover .layout-1 .layout-sidenav {
      z-index: $zindex-layout-fixed - 5 !important;
    }

    .layout-2 .layout-sidenav {
      z-index: $zindex-layout-fixed + 5 !important;
    }
  }

  // Fixed

  .layout-fixed body:not(.modal-open) .layout-1 .layout-sidenav,
  .layout-fixed-offcanvas body:not(.modal-open) .layout-1 .layout-sidenav {
    z-index: $zindex-layout-fixed - 5;
  }

  .layout-navbar-fixed body:not(.modal-open) .layout-2 .layout-sidenav,
  .layout-fixed body:not(.modal-open) .layout-2 .layout-sidenav,
  .layout-fixed-offcanvas body:not(.modal-open) .layout-2 .layout-sidenav {
    z-index: $zindex-layout-fixed;
  }
}

// *******************************************************************************
// * Transitions and animations

.layout-sidenav-link-no-transition {
  .layout-sidenav .sidenav-link,
  .layout-sidenav-horizontal .sidenav-link {
    transition: none !important;
    animation: none !important;
  }
}

.layout-no-transition .layout-sidenav,
.layout-no-transition .layout-sidenav-horizontal {
  &,
  & .sidenav,
  & .sidenav-item {
    transition: none !important;
    animation: none !important;
  }
}

@media (max-width: (map-get($grid-breakpoints, lg) - 1)) {
  .layout-transitioning {
    .layout-overlay {
      animation: layoutSidenavAnimation $sidenav-animation-duration;
    }

    .layout-sidenav {
      transition-duration: $sidenav-animation-duration;
      transition-property: transform, -webkit-transform;
    }
  }
}

@include media-breakpoint-up(lg) {
  .layout-collapsed:not(.layout-transitioning):not(.layout-offcanvas):not(.layout-fixed):not(.layout-fixed-offcanvas) .layout-sidenav {
    transition-duration: $sidenav-animation-duration;
    transition-property: margin-left, margin-right, width;
  }

  .layout-transitioning {
    &.layout-offcanvas .layout-sidenav {
      transition-duration: $sidenav-animation-duration;
      transition-property: margin-left, margin-right, transform, -webkit-transform;
    }

    &.layout-fixed,
    &.layout-fixed-offcanvas {
      .layout-container {
        transition-duration: $sidenav-animation-duration;
        transition-property: padding-left, padding-right;
      }
    }

    &.layout-fixed {
      .layout-sidenav {
        transition: width $sidenav-animation-duration;
      }
    }

    &.layout-fixed-offcanvas {
      .layout-sidenav {
        transition-duration: $sidenav-animation-duration;
        transition-property: transform, -webkit-transform;
      }
    }

    &.layout-navbar-fixed .layout-2 .layout-navbar,
    &.layout-footer-fixed .layout-footer {
      transition-duration: $sidenav-animation-duration;
      transition-property: left, right;
    }

    &:not(.layout-offcanvas):not(.layout-fixed):not(.layout-fixed-offcanvas) .layout-sidenav {
      transition-duration: $sidenav-animation-duration;
      transition-property: margin-left, margin-right, width;
    }
  }
}

// Disable transitions/animations in IE 10-11
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .sidenav,
  .layout-sidenav,
  .layout-container,
  .layout-navbar,
  .layout-footer {
    transition: none !important;
    transition-duration: 0s !important;
  }
  .layout-overlay {
    animation: none !important;
  }
}

@include keyframes(layoutSidenavAnimation) {
  0% {
    opacity: 0;
  }
  100% {
    opacity: $modal-backdrop-opacity;
  }
}