/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 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
 */


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

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

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

  &.ouiSideNavItemButton-isSelected {
    color: $ouiSideNavSelectedTextcolor;
    font-weight: $ouiFontWeightBold;

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

  &:disabled {
    @include ouiDisabledState($ouiSideNavDisabledTextcolor);
  }
}

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

.ouiSideNavItemButton__icon {
  margin-right: $ouiSizeS;
}

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

.ouiSideNavItemButton__label {
  flex-grow: 1;
}

.ouiSideNavItemButton__label--truncated {
  @include ouiTextTruncate;
}

.ouiSideNavItem--root {
  &.ouiSideNavItem--rootIcon > .ouiSideNavItem__items {
    margin-left: $ouiSizeL;
  }

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

    .ouiSideNavItemButton__label {
      @include ouiTitle('xs');
      color: inherit;
    }
  }

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

    &:after {
      display: none;
    }
  }

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

.ouiSideNavItem--trunk {
  color: $ouiSideNavRootTextcolor; /* 2 */

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

  & > .ouiSideNavItem__items {
    margin-left: $ouiSizeS;
    width: 100%;
  }
}

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

  &::after { /* 1 */
    position: absolute;
    content: '';
    top: 0;
    bottom: 0;
    width: 1px;
    background: $ouiBorderColor;
    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: $ouiSizeM;
  }

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

    &:after {
      position: absolute; /* 2 */
      content: '';
      top: $ouiSizeM;
      left: 0;
      width: $ouiSizeXS;
      height: 1px;
      background: $ouiBorderColor;
    }
  }

  & > .ouiSideNavItem__items {
    margin-left: $ouiSize;
  }
}

.ouiSideNavItem--emphasized {
  background: $ouiSideNavEmphasizedBackgroundColor;
  color: $ouiSideNavRootTextcolor;
  // 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 $ouiSideNavEmphasizedBackgroundColor, -100px 0 0 0 $ouiSideNavEmphasizedBackgroundColor;

  > .ouiSideNavItemButton {
    font-weight: $ouiFontWeightBold;
  }

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