// Set default customise component variables here,
// Override it in theme variables files

$ls-aside-width-collapsed:   3.5rem      !default;
$ls-aside-width-sm:          15.00rem    !default;
$ls-aside-width-md:          18.75rem    !default;
$ls-aside-width-lg:          22.50rem    !default;
$ls-aside-width-xl:          30rem       !default;

$x-header-height-xs: 3.5em     !default;
$x-header-height-sm: 6rem      !default;
$x-header-height-md: 7rem      !default;
$x-header-height-lg: 14.5rem   !default;


body {
  @extend %bg-transparent;

  // Scrollbars
  scrollbar-width: auto;
  scrollbar-color: theme-color('dark') $border-color;
  -ms-overflow-style: auto;

  ::-webkit-scrollbar {
    width: 6px !important;
  }
  ::-webkit-scrollbar-track {
    background: $border-color;
  }
  ::-webkit-scrollbar-thumb {
    background-color: theme-color('dark');
    border-radius: 3px;
  }
}

html,
body {
  @include media-breakpoint-up(md) {
    height: 100%;
    min-height: 100%;
  }
}

%layout-aside,
.layout-aside {
  @extend %d-flex,
          %overflow-auto,
          %h-100,
          %flex-nowrap;

 @include media-breakpoint-down(md) {
   padding-top: $x-header-height-xs;
  }
}

.x-main-container {
  @extend %flex-column,
          %flex-md-row,
          %d-flex,
          %h-100,
          %flex-grow-1;
}

.x-main-panel {
  @extend %d-flex,
          %flex-column,
          %overflow-hidden,
          %flex-1;
  @include transition(all 300ms ease-in-out);
}

.x-main-aside {
  @extend %d-flex,
          %flex-column,
          %flex-wrap,
          %h-100,
          %w-100;

  @include media-breakpoint-up(md) {
    max-width: $ls-aside-width-lg;
  }

  @media (min-width: 1367px)  {
    max-width: $ls-aside-width-xl;
  }
}

%lt-aside,
.lt-aside {
  @extend %d-flex,
          %flex-column,
          %flex-wrap,
          %h-100,
          %position-relative,
          %justify-content-between;
  background-color: $x-aside-nav-bg;
  transition: $x-transition-transform;
  width: $ls-aside-width-sm;
  left: 0;

  @include media-breakpoint-up(lg) {
    position: relative;
  }

  .x-aside-theme-dark & {
    @extend %x-theme-dark-aside;
  }

  &.is-wide {
    width: $ls-aside-width-lg;
    @include media-breakpoint-up(xl) {
      width: $ls-aside-width-xl;
    }
  }

  .x-panel-lg &, // for overlay side panel
  .modal & {
    width: $ls-aside-width-sm;
    &.is-wide {
      width: $ls-aside-width-md;
    }
    &.is-wider {
      width: $ls-aside-width-lg;
    }
  }

  &.is-narrow {
    @extend %p-0;
		width: $ls-aside-width-collapsed;
	}
}


// Aside footer Card Switch
.lt-aside-switch {
  @extend %text-grey,
  %bg-light-transparent;

  @extend %p-3,
          %font-weight-bold,
          %d-flex;

	.x-switch {
    @extend %font-size-sm;
	}
}

.lt-header-aside {
  @extend %d-flex,
          %py-3,
          %px-3,
          %py-lg-4,
          %px-lg-4,
          %align-items-center,
          %justify-content-between;
  border-bottom: 1px solid $border-color;
  padding: 1.5rem;
}

.lt-container {
  @extend %d-flex,
          %overflow-hidden,
          %flex-1,
          %h-100;
  > * {
    @extend %d-flex,
            %w-100;
  }

  .x-overlay & {
    z-index: $zindex-fixed;
    top: 3.5rem;
  }

  .lt-header-aside {
    @extend %d-flex,
            %py-3,
            %px-3,
            %py-lg-4,
            %px-lg-4,
            %align-items-center,
            %justify-content-between;
    border-bottom: 1px solid $border-color;
    padding: 1.5rem;
  }

  .lt-header-title {
    @extend %flex-column,
            %py-3,
            %py-xl-4,
            %border-bottom,
            %justify-content-center;
  }

  .lt-header {
    @extend %flex-row,
            %py-1,
            %py-md-3,
            %py-xl-4,
            %w-100,
            %d-flex,
            %justify-content-center,
            %justify-content-xl-start,
            %align-items-center;
    min-height: $x-header-height-xs;

    @include media-breakpoint-up(xl) {
      min-height: $x-header-height-sm;
    }
    > * {
      @extend %d-flex;
    }
  }
}



/// scroll cdk overrides
div.cdk-virtual-scroll-content-wrapper {
  contain: unset !important;
}