// Extends euiFlyout
@import '../flyout/variables';
@import '../flyout/mixins';

.euiCollapsibleNav {
  @include euiFlyout;
  border-left: none;
  right: auto;
  left: 0;
  width: $euiCollapsibleNavWidth;
  max-width: 80vw;
  animation: euiCollapsibleNavIn $euiAnimSpeedNormal $euiAnimSlightResistance;
  clip-path: polygon(0 0, 150% 0, 150% 100%, 0 100%); // Must include the width of the close button too
}

.euiCollapsibleNav__closeButton {
  position: absolute;
  right: 0;
  top: $euiSize;
  margin-right: -27%;
  padding: $euiSizeM 0;
  line-height: 1;
  border-radius: $euiBorderRadius;

  &:focus {
    @include euiFocusRing;
    // Override default `EuiButtonEmpty` :focus background to ensure better contrast
    background: $euiColorEmptyShade !important; // sass-lint:disable-line no-important
  }
}

// The addition of this class is handled through JS
// via the `dockingBreakpoint` and `isDocked` combination
.euiCollapsibleNav.euiCollapsibleNav--isDocked {
  @include euiBottomShadowMedium;
  z-index: $euiZHeader; // When docked, make it the same level as the header
  clip-path: none;

  .euiCollapsibleNav__closeButton {
    display: none;
  }
}

.euiBody--collapsibleNavIsDocked {
  // Shrink the content from the left so it's no longer overlapped by the nav drawer (ALWAYS)
  padding-left: $euiCollapsibleNavWidth !important; // sass-lint:disable-line no-important
  transition: padding $euiAnimSpeedFast $euiAnimSlightResistance;
}

@include euiBreakpoint('xs') {
  // At tiny screens, reduce the close button to a simple `x`
  .euiCollapsibleNav__closeButton {
    margin-right: -15%;

    .euiCollapsibleNav__closeButtonText {
      // But be sure the text can still be read by a screen reader
      @include euiScreenReaderOnly;
    }
  }
}

// Specific keyframes so in comes in from the left
@keyframes euiCollapsibleNavIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  75% {
    opacity: 1;
    transform: translateX(0%);
  }
}