//
// Layout
// --------------------------------------------------

.layout {
  padding-bottom: $layout-footer-height + $layout-footer-margin + 1;

  &-tabs {
    padding: 0 $layout-margin;

    .nav {
      margin-bottom: 0;
    }

    .tab-content {
      display: none;
    }
  }

  // Style variations
  // ----------------------

  &-fixed {
    $layout-header-padding-y: $grid-unit-y;
    $layout-header-padding-x: $layout-fixed-padding;
    $breadcrumb-height: $breadcrumb-line-height + $breadcrumb-padding-vertical *
      2 + $layout-header-padding-y * 2;
    $layout-subsidenav-padding-x: $grid-unit-y * 3;
    $layout-subsidenav-padding-y: $grid-unit-y * 3;

    padding-bottom: 0;

    .layout-notification {
      margin-left: $layout-fixed-sidenav-width;
    }

    .layout-sidebar {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 1;
      width: $layout-fixed-sidenav-width;
      overflow: hidden;

      @include transition(
        width $component-animation-duration $component-animation-timing
      );

      @include media-breakpoint-down(md) {
        z-index: $zindex-sidebar-mobile;
        top: $navbar-height-mobile + 1;
        width: $layout-fixed-sidenav-width + $layout-fixed-subsidenav-width;
      }

      &-lg {
        width: $layout-fixed-sidenav-width + $layout-fixed-subsidenav-width;
      }

      &-collapsed {
        @include media-breakpoint-down(md) {
          width: 0;
        }
      }

      // Sidebar Backdrop
      &-backdrop {
        position: fixed;
        top: $navbar-height-mobile + 1;
        right: 0;
        bottom: 0;
        left: 0;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: $zindex-sidebar-mobile - 1;

        @each $theme, $map in $themes {
          .#{$theme} & {
            $layout-fixed-sidebar-backdrop-bg: map-get(
              $map,
              layout-fixed-sidebar-backdrop-bg
            );

            background: $layout-fixed-sidebar-backdrop-bg
              0
              0
              no-repeat
              padding-box;
          }
        }

        @include opacity(0);

        @include transition(
          opacity $component-animation-duration $component-animation-timing
        );

        &.in {
          @include opacity($modal-backdrop-opacity);
        }
      }

      // Right Sidebar
      &-right {
        position: fixed;
        right: 0;
        bottom: 0;
        top: 0;
        width: $layout-fixed-sidenav-width + $layout-fixed-subsidenav-width;
        overflow-x: hidden;
        border-left: 1px solid $color-grey-rgba-08;

        @include styled-scroll-vert();
        @include transition(
          transform $component-animation-duration $component-animation-timing
        );

        @include themes(background-color, layout-fixed-sidebar-bg);

        &-container {
          padding: $layout-subsidenav-padding-y $layout-subsidenav-padding-x;

          @include themes(background-color, layout-fixed-sidebar-bg);

          & + .layout-sidebar-right-container {
            border-top: 1px solid $color-grey-rgba-08;
          }
        }

        .list-group-item {
          border-left-width: 0;
          border-right-width: 0;
          padding: $layout-subsidenav-padding-y $layout-subsidenav-padding-x;
        }

        &-collapsed {
          top: $navbar-height-mobile + 1;

          @include transform(
            translateX(
              $layout-fixed-sidenav-width + $layout-fixed-subsidenav-width
            )
          );
        }

        &-mobile {
          z-index: $zindex-sidebar-mobile;
          top: $navbar-height-mobile + 1;

          @include media-breakpoint-up(lg) {
            display: none;
          }
        }
      }
    }

    .layout-sidenav {
      $brand-height-img: $grid-unit-y * 4;
      $layout-fixed-sidenav-padding-y: $grid-unit-y * 2;

      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: $layout-fixed-sidenav-width;
      overflow-y: auto;
      padding-top: $layout-fixed-sidenav-padding-y;
      padding-bottom: $grid-unit-y;
      z-index: 10;

      @include themes-border-right(color-new-border);
      @include themes(background-color, layout-fixed-sidenav-bg);

      &-container {
        padding: 0 $layout-margin;
      }

      &-domain {
        text-align: center;

        .brand-img {
          height: $brand-height-img;
        }
      }

      &-list {
        position: absolute;
        top: $layout-fixed-sidenav-padding-y;
        left: 0;
        right: 0;
        bottom: 277px;
        overflow-y: scroll;
        padding-left: $scroll-width;

        @include styled-scroll-vert(
          $background-color: layout-fixed-sidenav-list-scroll-bg,
          $thumb-color: layout-fixed-sidenav-list-scroll-thumb
        );

        &-image {
          top: $brand-height-img + $layout-fixed-sidenav-padding-y * 2;
        }
      }

      &-bottom {
        position: absolute;
        bottom: $grid-unit-y;
        left: 0;

        right: 0;
        padding-top: ceil($grid-unit-y * 1.5);

        &:before {
          content: "";
          position: absolute;
          height: 1px;
          top: 0;
          left: ceil($grid-unit-x * 1.5);
          right: ceil($grid-unit-x * 1.5);

          @include themes(
            background-color,
            layout-fixed-sidenav-bottom-line-color
          );
        }
      }

      &-language {
        margin-top: $padding-small-vertical;
        font-size: $font-size-base;
        line-height: $grid-unit-y * 2;
        font-weight: $font-weight-medium;
        text-align: center;
        display: block;
        margin-bottom: $padding-small-vertical;

        @include themes(color, layout-fixed-sidenav-language);

        &:after {
          content: " \f078";
          font-family: $font-family-awesome;
          font-size: $font-size-extra-small;
          vertical-align: middle;
        }
      }

      &-brand {
        text-align: center;
        margin-bottom: $padding-small-vertical;
      }

      &-made {
        font-size: $font-size-extra-small - 1;
        text-align: center;
        line-height: ceil($grid-unit-y * 1.5);
        font-weight: $font-weight-medium;

        @include themes(color, layout-fixed-sidenav-made);

        .fa {
          color: $color-harmony-soft-red;
        }
      }
    }

    .layout-subsidenav {
      width: $layout-fixed-subsidenav-width;
      position: absolute;
      top: 0;
      left: $layout-fixed-sidenav-width;
      bottom: 0;
      overflow: auto;
      display: none;
      overflow-x: hidden;

      @include themes(background-color, layout-fixed-subsidenav-bg);
      @include themes-border-right(layout-fixed-subsidenav-border-color);

      @include transition(
        left $component-animation-duration $component-animation-timing
      );

      @include media-breakpoint-down(md) {
        display: block;
      }

      @include styled-scroll-vert(
        $background-color: "layout-fixed-subsidenav-scroll-bg",
        $thumb-color: "layout-fixed-subsidenav-scroll-thumb"
      );

      &-header {
        position: relative;
        margin-bottom: $layout-subsidenav-padding-y;
        padding-left: $layout-subsidenav-padding-x;
        padding-right: $layout-subsidenav-padding-x;

        .layout-subsidenav-title {
          font-size: $font-size-h4;
          font-weight: $font-weight-medium;
          line-height: $grid-unit-y * 3;
          margin-top: 0;
          margin-bottom: 0;

          @include themes(color, color-new-heading);
        }

        .layout-subsidenav-subtitle {
          font-size: $font-size-base;
          line-height: $grid-unit-y * 2;
          margin-top: 0;
          margin-bottom: 0;

          @include themes(color, color-text-default);
        }
      }

      &-btn-collapse {
        $size: $grid-unit-y * 4;

        position: fixed;
        left: $layout-fixed-sidenav-width + $layout-fixed-subsidenav-width -
          $layout-subsidenav-padding-x - $size;
        bottom: $grid-unit-y * 2;
        font-size: $font-size-base;
        height: $size;
        line-height: $size;
        width: $size;
        text-align: center;
        border-radius: $border-radius-base * 2;
        cursor: pointer;
        z-index: 10;

        @include themes(color, layout-fixed-subsidenav-btn-collapse-color);
        @include themes(background-color, layout-fixed-subsidenav-bg);

        @include transition(
          transform $component-animation-duration $component-animation-timing,
          left $component-animation-duration $component-animation-timing
        );

        @include media-breakpoint-down(md) {
          display: none;
        }

        &:before {
          content: "\f100";
          font-family: $font-family-awesome;
          font-weight: $font-family-awesome-weight;
        }

        &:hover,
        &:focus {
          @include themes(color, color-text-dark);
        }
      }

      &-container {
        padding: $layout-subsidenav-padding-y 0;
        height: 100%;

        @include media-breakpoint-down(md) {
          height: auto;
        }

        > uib-accordion,
        accordians > uib-accordion {
          display: block;
        }

        > .panel-group {
          margin-bottom: 0;
        }

        &-dark {
          @include themes(background-color, layout-fixed-sidenav-bg);

          @include media-breakpoint-up(lg) {
            display: none;
          }
        }
      }

      &-footer {
        padding: $layout-subsidenav-padding-y $layout-subsidenav-padding-x 0;
      }

      // Variations

      &-dark {
        @include themes(background-color, layout-fixed-sidenav-bg);
      }

      &-fixed {
        display: flex;
        flex-direction: column;
        height: 100%;

        .layout-subsidenav-body {
          flex: 1 1 auto;
          overflow-y: auto;

          @each $theme, $map in $themes {
            .#{$theme} & {
              $scroll-bg-alt: map-get($map, scroll-bg-alt);
              $scroll-thumb-alt: map-get($map, scroll-thumb-alt);

              @include styled-scroll-vert-no-themes(
                $background-color: $scroll-bg-alt,
                $thumb-color: $scroll-thumb-alt
              );
            }
          }
        }
      }
    }

    .layout-content {
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100vh;

      @include media-breakpoint-up(lg) {
        margin-left: $layout-fixed-sidenav-width;

        @include transition(
          margin-left $component-animation-duration $component-animation-timing
        );

        .layout-header {
          left: $layout-fixed-sidenav-width;

          @include transition(
            left $component-animation-duration $component-animation-timing
          );
        }

        &-ml-lg {
          margin-left: $layout-fixed-subsidenav-width +
            $layout-fixed-sidenav-width;

          .layout-header {
            left: $layout-fixed-sidenav-width + $layout-fixed-subsidenav-width;
          }
        }

        &-sm {
          margin-left: $layout-fixed-subsidenav-sm-width + $grid-unit-x;
        }
      }

      &-inner {
        overflow: auto;
        flex: 1;

        @include styled-scroll-vert();
      }

      &-container {
        padding: $layout-fixed-padding $layout-fixed-padding;
        min-height: 100%;
        position: relative;

        @include themes(background-color, layout-fixed-content-bg);

        @include media-breakpoint-down(md) {
          padding: $layout-fixed-padding-mobile $layout-fixed-padding-mobile;
        }

        h3:first-child {
          margin-top: 0;
        }

        &-offset {
          margin: -$grid-unit-y * 3;

          @include media-breakpoint-down(md) {
            margin-top: -$grid-unit-y * 2;
          }
        }

        &-right-sidebar {
          margin-right: $layout-fixed-sidenav-width +
            $layout-fixed-subsidenav-width;
        }

        &-no-padding {
          padding: 0 !important;
        }
      }
    }

    .layout-header {
      flex-shrink: 0;
      z-index: $zindex-navbar-fixed;
      display: none;

      @include themes(background-color, layout-fixed-header-bg);

      @include media-breakpoint-down(md) {
        left: 0;
        display: block;
      }

      //# Elements

      &-navbar {
        padding-left: $layout-header-padding-x;
        padding-right: $layout-header-padding-x;
        //border-bottom-width: 1px;
        //border-bottom-style: solid;

        //@include themes(border-bottom-color, layout-fixed-navbar-border-color);

        @include media-breakpoint-down(md) {
          padding-left: $layout-fixed-padding-mobile;
          padding-right: $layout-fixed-padding-mobile;
        }

        .navbar-form .input-group {
          width: $grid-unit-x * 30;
        }

        &-open {
          @include themes(background-color, layout-fixed-navbar-open-bg);
        }
      }

      &-under {
        padding: $layout-header-padding-y $layout-header-padding-x;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        @include media-breakpoint-down(md) {
          padding-left: $layout-fixed-padding-mobile;
          display: none;
        }

        &-mobile {
          @include media-breakpoint-down(md) {
            display: flex;
          }

          &-fixed-on-top {
            @include media-breakpoint-down(md) {
              position: fixed;
              top: 0;
              right: 0;
              padding: $layout-fixed-padding-mobile $layout-fixed-padding-mobile;
            }
          }
        }
      }

      &-breadcrumb {
        margin-bottom: 0;

        @include media-breakpoint-down(md) {
          display: none;
        }

        &-mobile {
          display: none;
          margin-bottom: 0;
          padding-left: $layout-fixed-padding-mobile;
          padding-right: $layout-fixed-padding-mobile;

          @include media-breakpoint-down(md) {
            display: block;
          }
        }
      }

      //# Variations

      &-transparent {
        position: fixed;
        right: 0;

        @include themes-value(background-color, transparent);

        .layout-header-navbar {
          border-bottom-width: 0;
        }
      }
    }

    .layout-footer {
      flex-shrink: 0;
      position: relative;

      &-container {
        padding: ($padding-base-vertical - 1) $layout-fixed-padding
          ($padding-base-vertical + $grid-unit-y * 1.5 - 1);
        z-index: $zindex-navbar;

        @include themes(background-color, layout-fixed-footer-bg);

        @include media-breakpoint-down(md) {
          left: 0;
        }

        .pagination {
          margin-bottom: $padding-base-vertical - 1;
          vertical-align: top;
        }

        &.layout-max-width {
          max-width: $layout-max-width + $layout-fixed-padding +
            $layout-fixed-padding;
        }
      }

      &-subsidenav {
        .layout-footer-container {
          left: $layout-fixed-sidenav-width + $layout-fixed-subsidenav-width;

          @include media-breakpoint-down(md) {
            left: 0;
          }
        }
      }
    }

    .layout-max-width {
      max-width: $layout-max-width;
      margin-left: auto;
      margin-right: auto;
    }

    // Variation when subsidenav collapsed

    &-subsidenav-collapsed {
      .layout-sidebar {
        @include media-breakpoint-up(lg) {
          width: $layout-fixed-sidenav-width;
        }
      }

      .layout-subsidenav {
        @include media-breakpoint-up(lg) {
          left: $layout-fixed-sidenav-width - $layout-fixed-subsidenav-width;

          .layout-subsidenav-btn-collapse {
            left: $layout-fixed-sidenav-width + $layout-subsidenav-padding-x;

            @include themes(color, color-text-dark);

            @include transform(rotate(180deg));

            &:before {
              content: "\f100";
            }
          }
        }
      }

      .layout-content {
        @include media-breakpoint-up(lg) {
          margin-left: $layout-fixed-sidenav-width;

          .layout-header {
            left: $layout-fixed-sidenav-width;
          }
        }
      }

      .layout-footer-subsidenav {
        .layout-footer-container {
          left: $layout-fixed-sidenav-width;
        }
      }
    }
  }
}

.fullscreen {
  .layout-footer-container {
    left: 0 !important;
  }
}