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

.ouiTreeView__wrapper .ouiTreeView {
  margin: 0;
  list-style-type: none;
}

.ouiTreeView .ouiTreeView {
  padding-left: $ouiSizeL;
}

.ouiTreeView__node {
  max-height: $ouiSizeXL;
  line-height: $ouiSizeXL;
}

.ouiTreeView__node--expanded {
  max-height: 100vh;
}

.ouiTreeView__nodeInner {
  @include ouiTextTruncate;

  padding-left: $ouiSizeS;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: $ouiSizeXL;
  border-radius: $ouiBorderRadius;
  width: 100%;
  text-align-last: left;

  &:focus {
    @include ouiFocusRing('small');
  }

  &:hover,
  &:active,
  &:focus {
    @include ouiFocusBackground($ouiTextColor);
  }

  .ouiTreeView__iconPlaceholder {
    width: $ouiSizeXL;
  }

}

.ouiTreeView__nodeLabel {
  @include ouiTextTruncate;
}

.ouiTreeView__iconWrapper {
  margin-top: -($ouiSizeXS / 2);
  margin-right: $ouiSizeS;

  // This helps tokens appear vertically centered
  .ouiToken {
    margin-top: $ouiSizeXS / 2;
  }
}

.ouiTreeView--compressed {
  .ouiTreeView__node {
    max-height: $ouiSizeL;
    line-height: $ouiSizeL;

    .ouiTreeView__nodeInner {
      height: $ouiSizeL;

    }

    .ouiTreeView__iconWrapper {
      margin: 0 ($ouiSizeS * .75) 0 0;
    }

    .ouiTreeView__nodeLabel {
      margin-top: -1px;
    }

    .ouiTreeView__iconPlaceholder {
      width: $ouiSizeL;
    }
  }

  .ouiTreeView__node--expanded {
    max-height: 100vh;
  }
}

.ouiTreeView--withArrows {
  .ouiTreeView__expansionArrow {
    margin-right: $ouiSizeXS;
  }

  &.ouiTreeView {
    .ouiTreeView__nodeInner--withArrows {
      .ouiTreeView__iconWrapper {
        margin-left: 0;
      }
    }

    .ouiTreeView__iconWrapper {
      margin-left: $ouiSize + $ouiSizeXS;
    }
  }

  &.ouiTreeView--compressed {
    .ouiTreeView__nodeInner--withArrows {
      .ouiTreeView__iconWrapper {
        margin-left: 0;
      }
    }

    .ouiTreeView__iconWrapper {
      margin-left: $ouiSize;
    }
  }
}