// These mobile children are hidden in everything but mobile view.
.euiSideNav__mobileToggle {
  display: none;
  border-bottom: $euiBorderThin;
  padding: $euiSize $euiSizeL;
  width: 100%;
  text-align: left;

  /**
   * 1. This toggle also works with EUI link, but we need the outline
   *    that comes with the focus state.
   */
  &:focus {
    outline: none;
  }
}

.euiSideNav__mobileIcon {
  fill: $euiColorPrimary;
}

.euiSideNav__mobileWrap {
  display: flex;
}

.euiSideNav__mobileTitle {
  flex-grow: 1;
  color: $euiColorPrimary;
}

.euiSideNav__hideButton {
  width: $euiSizeL;
  height: $euiSizeL;
  border-radius: $euiBorderRadius;
  border: $euiBorderThin;
  background: $euiColorEmptyShade;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-around;
  right: -$euiSizeXXL;
  top: $euiSizeXL;
}

@include euiBreakpoint('xs', 's') {
  /**
   * 1. Animation doesn't work against height. Need max-height instead.
   *    We set a value larger than what is needed to fake "auto".
   */
  .euiSideNav-isOpenMobile {
    .euiSideNav__content {
      visibility: visible;
      opacity: 1;
      margin: $euiSizeL;
      max-height: 5000px; /* 1 */
      transition: all $euiAnimSpeedNormal $euiAnimSlightResistance;
    }
  }

  .euiSideNav__mobileToggle {
    display: block;
  }

  .euiSideNav__content {
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    max-height: 0;
    margin: 0 $euiSizeL;
  }
}