$euiSideNavEmphasizedBackgroundColor: transparentize($euiColorLightShade, .7);
@import '@elastic/eui/src/components/side_nav/mixins';

// Put the page background color in the flyout version too
.kbnPageTemplateSolutionNav__flyout {
  background-color: $euiPageBackgroundColor;
}

.kbnPageTemplateSolutionNav {
  @include euiSideNavEmbellish;
  @include euiYScroll;

  @include euiBreakpoint('m' ,'l', 'xl') {
    width: 248px;
    padding: $euiSizeL;
  }

  .kbnPageTemplateSolutionNavAvatar {
    margin-right: $euiSize;
  }
}

.kbnPageTemplateSolutionNav--hidden {
  pointer-events: none;
  opacity: 0;

  @include euiCanAnimate {
    transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
  }
}