/**
 * 1. Text-align defaults to center, so we have to override that.
 * 2. Need this on the button element to color the underline.
 */
.euiSideNavItemButton {
  @include euiFontSizeS;
  text-align: left; /* 1 */
  display: block;
  width: 100%;
  padding: $euiSizeXS / 2 0;
  color: $euiTextColor; /* 2 */

  &.euiSideNavItemButton--isClickable {
    &:hover .euiSideNavItemButton__label {
      text-decoration: underline;
    }

    // Focus state background regardless of index/selected state.
    &:focus {
      // sass-lint:disable-block no-important
      background-color: $euiFocusBackgroundColor !important;
    }
  }

  &.euiSideNavItemButton-isSelected {
    .euiSideNavItemButton__icon {
      fill: $euiColorPrimary;
    }

    .euiSideNavItemButton__label {
      color: $euiColorPrimary;
      font-weight: $euiFontWeightBold;
      text-decoration: underline;
    }
  }
}

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

.euiSideNavItemButton__icon {
  margin-right: $euiSizeS;
}

/**
  * 1. Enable ellipsis overflow to work (https://css-tricks.com/flexbox-truncated-text/)
  */
.euiSideNavItemButton__labelContainer {
  min-width: 0; /* 1 */
}

.euiSideNavItemButton__label {
  color: $euiTitleColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}

/**
 * 1. Draw the vertical line to group an expanded item's child items together.
 */
.euiSideNavItem__items {
  position: relative;

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

.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');
    }
  }


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

    &:after {
      display: none;
    }
  }

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

.euiSideNavItem--trunk {
  /**
   * 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. Absolutely position the horizontal tick connecting the item to the vertical line.
   */
  & > .euiSideNavItemButton {
    position: relative; /* 1 */
    padding-left: $euiSizeS;
    padding-right: $euiSizeS; /* 1 */

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

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

  .euiSideNavItemButton__icon {
    fill: $euiTextSubduedColor;
  }

  .euiSideNavItemButton__label {
    color: $euiTextSubduedColor;
  }
}