// 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:          25.00rem    !default;

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

.lt-aside {
  @extend .d-flex,
          .bg-light-transparent,
          .justify-content-between,
          .overflow-auto,
          .flex-column;

  width: $ls-aside-width-md;

  > * {
  	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;
	}
}


// DEFAULT BACKGROUND
.lt-header {
	@extend .bg-light;
}

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


.x-ag-wrapper {
	@extend .position-relative;
}