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

$ls-aside-width-collapsed:   3.25rem     !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;




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


.layout-aside {
	@extend .h-100,
          .d-flex,
          .flex-wrap,
          .bg-light-secondary,
			    .overflow-auto;

}

.x-aside-sticky {
  @extend .position-fixed,
          .h-100,
          .d-flex,
          .flex-column;
}

.lt-aside {
  @extend .d-flex,
          .justify-content-between,
          .overflow-auto,
          .flex-column,
          .flex-wrap;
  width: $ls-aside-width-md;
  background-color: $x-aside-nav-bg-light;

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

  .x-aside-sticky {
    width: $ls-aside-width-sm;
  }

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

  > * {
  	width: 100%;
  }

  .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 .bg-dark,
            .p-0;
		width: $ls-aside-width-collapsed;
	}
}


// Aside footer Card Switch
.lt-aside-switch {
	@extend .p-3,
          .d-flex,
          .text-grey,
          .font-weight-bold,
          .bg-light-transparent;

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



.lt-container {
	@extend .h-100,
          .d-flex,
          .flex-1;
  > * {
    @extend .flex-auto;
    width: 100%;
  }

  .lt-header {
    @extend .d-flex,
            .w-100,
            .justify-content-between,
            .align-items-center;
    min-height: $x-header-height-xs;
    @include media-breakpoint-up(md) {

      min-height: $x-header-height-sm;
    }
    > * {
      @extend .d-flex;
    }
  }
}