_treeview.scss

//
// Copyright IBM Corp. 2016, 2023
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use '../form';
@use '../../config' as *;
@use '../../motion' as *;
@use '../../spacing' as *;
@use '../../theme' as *;
@use '../../type' as *;
@use '../../utilities/convert';
@use '../../utilities/component-reset';
@use '../../utilities/focus-outline' as *;
@use '../../utilities/skeleton' as *;

/// Treeview styles
/// @access public
/// @group treeview
@mixin treeview {
  .#{$prefix}--tree {
    @include component-reset.reset;

    overflow: hidden;
  }

  .#{$prefix}--tree-node {
    background-color: $layer-01;
    color: $text-secondary;
    padding-inline-start: $spacing-05;

    &:focus {
      outline: none;
    }

    &:hover {
      cursor: pointer;
    }
  }

  .#{$prefix}--tree-node__children {
    @include component-reset.reset;

    list-style-type: none;
  }

  .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-node {
    margin-inline-start: $spacing-03;
  }

  .#{$prefix}--tree-node:focus > .#{$prefix}--tree-node__label {
    @include focus-outline('outline');
  }

  .#{$prefix}--tree-node--disabled:focus > .#{$prefix}--tree-node__label {
    outline: none;
  }

  .#{$prefix}--tree-node--disabled,
  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__label:hover,
  .#{$prefix}--tree-node--disabled
    .#{$prefix}--tree-node__label:hover
    .#{$prefix}--tree-node__label__details {
    background-color: $field-01;
    color: $text-disabled;
  }

  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-parent-node__toggle-icon,
  .#{$prefix}--tree-node--disabled .#{$prefix}--tree-node__icon,
  .#{$prefix}--tree-node--disabled
    .#{$prefix}--tree-node__label:hover
    .#{$prefix}--tree-parent-node__toggle-icon,
  .#{$prefix}--tree-node--disabled
    .#{$prefix}--tree-node__label:hover
    .#{$prefix}--tree-node__icon {
    fill: $icon-disabled;
  }

  .#{$prefix}--tree-node--disabled,
  .#{$prefix}--tree-node--disabled
    .#{$prefix}--tree-parent-node__toggle-icon:hover {
    cursor: not-allowed;
  }

  .#{$prefix}--tree-node__label {
    @include type-style('body-compact-01');

    display: flex;
    flex: 1;
    align-items: center;
    min-block-size: convert.to-rem(32px);

    &:hover {
      background-color: $layer-hover-01;
      color: $text-primary;
    }
  }

  .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node)
    .#{$prefix}--tree-node__label {
    padding-block-end: convert.to-rem(7px);
    // (min-height 32px - single line text height 18px) / 2 = 7px
    padding-block-start: convert.to-rem(7px);
  }

  .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__label__details {
    color: $text-primary;
  }

  .#{$prefix}--tree-node__label:hover
    .#{$prefix}--tree-parent-node__toggle-icon,
  .#{$prefix}--tree-node__label:hover .#{$prefix}--tree-node__icon {
    fill: $icon-primary;
  }

  .#{$prefix}--tree-leaf-node {
    display: flex;
    padding-inline-start: $spacing-08;
  }

  .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon {
    padding-inline-start: $spacing-07;
  }

  .#{$prefix}--tree-leaf-node.#{$prefix}--tree-node--with-icon
    .#{$prefix}--tree-leaf-node {
    padding-inline-start: $spacing-06;
  }

  .#{$prefix}--tree-node__label__details {
    display: flex;
    align-items: center;
  }

  .#{$prefix}--tree-node--with-icon .#{$prefix}--tree-parent-node__toggle {
    margin-inline-end: 0;
  }

  .#{$prefix}--tree-parent-node__toggle {
    display: flex;
    align-items: center;
    align-self: flex-start;
    border: 0;
    block-size: convert.to-rem(24px);
    inline-size: convert.to-rem(24px);
    margin-block-start: $spacing-02;
    margin-inline-end: $spacing-02;
    margin-inline-start: -$spacing-02;
    padding-inline-start: $spacing-02;

    &:hover {
      cursor: pointer;
    }

    &:focus {
      outline: none;
    }
  }

  .#{$prefix}--tree-parent-node__toggle-icon {
    fill: $icon-secondary;
    transform: rotate(-90deg);
    transition: all $duration-fast-02 motion(standard, productive);
  }

  .#{$prefix}--tree-parent-node__toggle-icon--expanded {
    transform: rotate(0);
  }

  .#{$prefix}--tree-node__icon {
    align-self: flex-start;
    fill: $icon-secondary;
    margin-block-start: convert.to-rem(1px);
    margin-inline-end: $spacing-03;
    margin-inline-start: $spacing-03;
    min-block-size: 1rem;
    min-inline-size: 1rem;
  }

  .#{$prefix}--tree-parent-node__toggle
    + .#{$prefix}--tree-node__label__details
    .#{$prefix}--tree-node__icon {
    margin-inline-start: $spacing-02;
  }

  .#{$prefix}--tree-node--selected > .#{$prefix}--tree-node__label {
    background-color: $layer-selected-01;
    color: $text-primary;

    &:hover {
      background-color: $layer-selected-hover-01;
    }
  }

  .#{$prefix}--tree-node--selected
    > .#{$prefix}--tree-node__label
    .#{$prefix}--tree-parent-node__toggle-icon,
  .#{$prefix}--tree-node--selected
    > .#{$prefix}--tree-node__label
    .#{$prefix}--tree-node__icon {
    fill: $icon-primary;
  }

  .#{$prefix}--tree-node--active > .#{$prefix}--tree-node__label {
    position: relative;

    &::before {
      position: absolute;
      background-color: $interactive;
      block-size: 100%;
      content: '';
      inline-size: convert.to-rem(4px);
      inset-block-start: 0;
      inset-inline-start: 0;
    }
  }

  // xs size variant
  .#{$prefix}--tree--xs .#{$prefix}--tree-node__label {
    min-block-size: convert.to-rem(24px);
  }

  .#{$prefix}--tree--xs
    .#{$prefix}--tree-node:not(.#{$prefix}--tree-parent-node)
    .#{$prefix}--tree-node__label {
    padding: 0;
  }

  .#{$prefix}--tree--xs .#{$prefix}--tree-parent-node__toggle {
    margin-block-start: 0;
  }
}