@import (reference) '../../common/variables.less';

eak-sidebar {
  display: block;
  background: @white-bg;
  position: fixed;
  top: @header-height-mobile;
  z-index: 10;
  box-shadow: 0 5px 8px 0 rgba(0, 66, 94, 0.5);
  /* stylelint-disable */
  height: calc(~'100vh - @{header-height-mobile}');
  height: calc(~'100dvh - @{header-height-mobile}');
  /* stylelint-enable */
  max-width: 0;

  &[animation] {
    transition:
      max-width 0.5s ease-in-out,
      visibility 0.5s linear;

    &.open {
      transition:
        max-width 0.5s ease-in-out,
        visibility 0s linear;
    }
  }

  &,
  & .sidebar-content {
    width: 100vw;
    @media @sm {
      width: 20rem;
    }
    @media @md-xl {
      width: 17.875rem;
    }
  }

  @media @xs-sm {
    &:not(.eak-sidebar) {
      display: none;
    }

    visibility: hidden;
    &.open {
      visibility: visible;
    }
  }

  @media @md-xl {
    position: relative;
    top: 0;
    box-shadow: none;
    /* stylelint-disable */
    height: 100vh;
    height: 100dvh;
    /* stylelint-enable */
    max-width: 72px;

    .landing-layout & {
      display: none;
    }
  }

  &.open {
    max-width: 100vw;
    @media @md-xl {
      max-width: 17.875rem;
    }
  }
}

@import './sidebar-content.less';
@import './sidebar-primary-nav.less';
@import './sidebar-seccondary-nav.less';
