// 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,
			    %overflow-auto;
}

.layout-aside-overflow-hidden {
  @extend .h-100,
          %d-flex,
          %overflow-hidden;
}

%lt-aside,
.lt-aside {
  @extend %d-flex,
          %bg-light-transparent,
          %justify-content-between,
          %overflow-auto,
          %flex-column,
          %pb-5;
  width: $ls-aside-width-md;

  .x-card-detail & {
    @extend %pb-0;
  }

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