/**
 * 1. Text-align defaults to center, so we have to override that.
 * 2. Color the text at the item level and then have the button inherit so overrides are easier
 * 3. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/)
 * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within
 */

.euiSideNavItemButton {
  @include euiFontSizeS;
  text-align: left; /* 1 */
  display: block;
  width: 100%;
  padding: ($euiSizeXS / 2) 0;
  color: inherit; /* 2 */

  &.euiSideNavItemButton--isClickable:not(:disabled) {
    &:hover {
      cursor: pointer;
    }

    &:hover,
    &:focus {
      .euiSideNavItemButton__label {
        // A lingering focus will stay underlined even if it doesn't get the `isSelected` prop
        text-decoration: underline; /* 4 */
      }
    }
  }

  &.euiSideNavItemButton-isSelected {
    color: $euiSideNavSelectedTextcolor;
    font-weight: $euiFontWeightBold;

    .euiSideNavItemButton__label {
      text-decoration: underline; /* 4 */
    }
  }

  &:disabled {
    @include euiDisabledState($euiSideNavDisabledTextcolor);
  }
}

.euiSideNavItemButton__content {
  display: flex;
  align-items: center;
}

.euiSideNavItemButton__icon {
  margin-right: $euiSizeS;
}

.euiSideNavItemButton__labelContainer {
  min-width: 0; /* 3 */
}

.euiSideNavItemButton__label {
  flex-grow: 1;
}

.euiSideNavItemButton__label--truncated {
  @include euiTextTruncate;
}

.euiSideNavItem--root {
  &.euiSideNavItem--rootIcon > .euiSideNavItem__items {
    margin-left: $euiSizeL;
  }

  /**
   * 1. Create padding around focus area without indenting the item itself.
   */
  & > .euiSideNavItemButton {
    margin-bottom: $euiSizeS;
    padding: 0;
    padding-left: $euiSizeS; /* 1 */
    padding-right: $euiSizeS; /* 1 */
    margin-left: -$euiSizeS; /* 1 */
    width: calc(100% + #{$euiSizeS * 2}); /* 1 */

    .euiSideNavItemButton__label {
      @include euiTitle('xs');
      color: inherit;
    }
  }

  & > .euiSideNavItem__items {
    position: static;
    margin-left: 0;

    &::after {
      display: none;
    }
  }

  & + & {
    margin-top: $euiSizeXL;
  }
}

.euiSideNavItem--trunk {
  color: $euiSideNavRootTextcolor; /* 2 */

  /**
   * 1. Create padding around focus area without indenting the item itself.
   */
  & > .euiSideNavItemButton {
    padding-left: $euiSizeS; /* 1 */
    padding-right: $euiSizeS; /* 1 */
    margin-left: -$euiSizeS; /* 1 */
    width: calc(100% + #{$euiSizeS * 2}); /* 1 */
  }

  & > .euiSideNavItem__items {
    margin-left: $euiSizeS;
    width: 100%;
  }
}

.euiSideNavItem--branch {
  /**
  * 1. Draw the vertical line to group an expanded item's child items together.
  */
  position: relative;
  color: $euiSideNavBranchTextcolor; /* 2 */

  &::after { /* 1 */
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    width: 1px;
    background: $euiBorderColor;
    left: 0;
  }

  // If this is actually the last item, we don't want the vertical line to stretch all the way down
  &:last-of-type::after {
    height: $euiSizeM;
  }

  /**
   * 2. Absolutely position the horizontal tick connecting the item to the vertical line.
   */
  & > .euiSideNavItemButton {
    position: relative; /* 2 */
    padding-left: $euiSizeS;
    padding-right: $euiSizeS; /* 2 */

    &::after {
      position: absolute; /* 2 */
      content: '';
      top: $euiSizeM;
      left: 0;
      width: $euiSizeXS;
      height: 1px;
      background: $euiBorderColor;
    }
  }

  & > .euiSideNavItem__items {
    margin-left: $euiSize;
  }
}

.euiSideNavItem--emphasized {
  background: $euiSideNavEmphasizedBackgroundColor;
  color: $euiSideNavRootTextcolor;
  // The large y values allow the shadow to stretch beyond the side nav bounds to it's parents container
  box-shadow: 100px 0 0 0 $euiSideNavEmphasizedBackgroundColor, -100px 0 0 0 $euiSideNavEmphasizedBackgroundColor;

  > .euiSideNavItemButton {
    font-weight: $euiFontWeightBold;
  }

  // Remove any extra box-shadows from nested emphasized items
  .euiSideNavItem--emphasized {
    background: transparent;
    box-shadow: none;
  }
}