$x-logo-sm:          1.5rem    !default;
$x-logo-md:          2rem      !default;
$x-logo-lg:          3.438rem  !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;

$x-header-width-sm:  8.5rem     !default;
$x-header-width-md:  16rem     !default;
$x-header-width-lg:  19.688rem !default;


// mobile header actions
.x-menu-action {
  @extend %x-btn-icon-only,
          %x-btn-link-info,
          .x-no-focus,
          %text-info;

  @include hover-focus-active {
    @include box-shadow(none);
  }

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

  // Tablet overrides
  .lt-aside-header & {
    @extend %mr-xl-0,
            %pr-xl-0,
            %pl-xl-0;
  }

  @include x-hover-focus-active {
    @include box-shadow(none);
  }
}

.lt-aside-mobile {
  @extend .lt-aside,
          .zindex-sidebar,
          %x-dropshadow-left,
          %overflow-auto,
          %position-absolute;
  top: 0;
  padding-top: 3.5rem;

}

.lt-aside-header {
  @extend %py-0,
          %px-0,
          %py-md-4,
          %px-md-0,
          %py-lg-5,
          %px-lg-0,
          %mb-xl-4,
          %py-xl-4,
          %px-xl-4;

  @include media-breakpoint-down(md) {
    background-color: $white;
    color: var(--custom-theme-primary,  theme-color("primary"));
    position: fixed;
    width: 100%;
    z-index: $zindex-sticky;
    justify-content: center;
    align-items: center;
    display: flex;
    height: $x-header-height-xs;
  }

  .x-aside-theme-dark & {
    min-height: $x-header-height-sm;
  }


  .is-wide & {
    min-height: $x-header-height-lg;

    @include media-breakpoint-down(xl) {
      min-height: $x-header-height-md;
    }
  }

  .is-narrow & {
    @extend .px-2,
            %x-flex-center;
  }

  > * {
    @extend %d-flex;
  }
}

.x-brand-wrap {
  @extend %w-100,
          %d-flex,
          %justify-content-center,
          %align-items-center;

  &.is-center {
    @include media-breakpoint-down(lg) {
      margin-left: -2.125rem;
    }
  }
}

.x-brand-logo {
  @extend %w-100;
  max-width: $x-header-width-sm;
  text-align: center;

  @include media-breakpoint-up(xl) {
    max-width: $x-header-width-lg;
  }

  .is-wide & {
    max-width: $x-header-width-md;
    @include media-breakpoint-up(xl) {
      max-width: $x-header-width-lg;
    }
  }

  img {
    @extend .w-100,
            .h-auto;
  }
}