// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@include exports('tree-view.clarity') {
  .clr-tree-node {
    //Display
    display: block;

    //Not sure why Firefox doesn't add this by default using the collapse
    //animation directive.
    @include fixForFirefox() {
      overflow-y: hidden;
    }
  }

  .clr-tree-node-content-container {
    //Display
    display: flex;
    align-items: center;
  }

  .clr-treenode-content {
    //Note to people reviewing: Adding display flex to the content area. You think this might break a few things
    //on the consumer side?
    //Display
    flex: 1 1 auto;
    display: flex;
    align-items: center;

    //Dimensions
    &:first-child {
      padding-left: $clr-tree-node-touch-target;
    }

    //Others
    border-radius: $clr-tree-border-radius 0 0 $clr-tree-border-radius;
    line-height: $clr-tree-node-touch-target;

    //Horrible. This, unfortunately, is carried over from earlier to make sure we don't break anything.
    //Why did I add styles directly on the icons selector? :-( x-(
    //This was not even needed because it's the user's responsibility to align things they project.
    clr-icon,
        /*TODO: Update demos to use .clr-icon class*/
        .clr-icon {
      //Dimensions
      height: $clr-tree-caret-size;
      width: $clr-tree-caret-size;
      margin-right: $clr-tree-node-content-icon-margin-right;

      //Others
      vertical-align: middle;
    }
  }

  .clr-treenode-caret {
    //Display
    flex: 0 0 $clr-tree-node-touch-target;

    //Dimensions
    padding: 0;
    margin: 0;
    height: $clr-tree-node-touch-target;
    width: $clr-tree-node-touch-target;

    //Others
    background: none;
    border: none;
    color: $clr-tree-node-caret-color;
    cursor: pointer;
    outline-offset: -5px; //TODO: Replace with the outline offset mixin after the rem value change.

    &:hover {
      color: $clr-tree-node-caret-link-hover-color;
    }
  }

  .clr-tree-node-caret-icon {
    //Dimensions
    height: $clr-tree-caret-size;
    width: $clr-tree-caret-size;

    //Others
    vertical-align: middle;
  }

  .clr-treenode-spinner-container {
    //Dimensions
    height: $clr-tree-node-touch-target;
    width: $clr-tree-node-touch-target;
    padding: ($clr-tree-node-touch-target - $clr-tree-spinner-size) / 2;
  }

  .clr-treenode-spinner {
    //Dimensions
    min-height: $clr-tree-spinner-size;
    min-width: $clr-tree-spinner-size;
    height: $clr-tree-spinner-size;
    width: $clr-tree-spinner-size;
  }

  .clr-treenode-children {
    //Dimensions
    margin-left: $clr-tree-node-children-margin;
  }

  .clr-treenode-link {
    //Display
    display: inline-block;

    //Dimensions
    height: 100%;
    margin: 0;
    padding: 0 0 0 $clr-tree-node-link-padding-left;
    width: 100%;

    //Others
    background: transparent;
    border: 0;
    color: $clr-tree-link-text-color;
    cursor: pointer;
    line-height: inherit;
    text-align: left;

    //States
    &:link,
    &:visited,
    &:active,
    &:hover {
      color: inherit;
    }

    &:hover,
    &:focus {
      background: $clr-tree-link-hover-color;
      text-decoration: none;
    }

    &:focus {
      //Removed only because we provide an alternative style
      outline: 0;
    }

    &.active {
      background: $clr-tree-link-selection-color;
      color: $clr-tree-node-caret-link-hover-color;
    }
  }

  .clr-tree-node-content-container > .clr-checkbox-wrapper {
    //Dimensions
    height: $clr-tree-node-touch-target;
    width: $clr-tree-node-touch-target;
    padding-top: $clr-tree-checkbox-padding-top;
    padding-left: $clr-tree-checkbox-padding-left;
  }

  .clr-tree-node-content-container > .clr-checkbox-wrapper:first-child {
    margin-left: $clr-tree-node-touch-target;
  }

  .clr-treenode-content .label {
    margin-left: 0.25rem;
  }

  @include fixForMsEdge {
    .clr-treenode-content .label {
      margin-left: 0.125rem;
    }
  }

  @include fixForIE10AndUp {
    .clr-treenode-content .label {
      margin-left: 0.125rem;
    }
  }
}