@use 'variables' as *;
@include export-module('tree-bigger') {
  .e-bigger {
    .e-treegrid {
      .e-grid {

        
        .e-treegridexpand,
        .e-treegridcollapse {
          font-size: $treegrid-bigger-icon-font-size;
          height: $treegrid-bigger-icon-size;
          width: $treegrid-bigger-icon-size;
          vertical-align: bottom;
        }

        .e-treegridexpand {
          @if $skin-name =='highcontrast' {
            vertical-align: middle;
          }
        }

        .e-hierarchycheckbox {
          padding-left: 2px;
          @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
            line-height: 0px;
          }
        }

        .e-hierarchycheckbox .e-frame {
          @if $skin-name =='bootstrap' or $skin-name =='boostrap-dark' or $skin-name =='fabric-dark' or $skin-name =='fabric' or $skin-name =='highcontrast' or $skin-name =='FluentUI' or $theme-name =='fluentui-dark' {
            font-size: 12px;
            line-height: 12px;
            padding: 2px 0;
          }
          height: $treegrid-frame-bigger-icon-height;
          width: $treegrid-frame-bigger-icon-width;
        }

        .e-treecell {
          line-height: $treegrid-bigger-icon-size;
        }

        .e-treecolumn-container span {
          vertical-align: middle;
        }

        .e-row[aria-expanded = 'true'] .e-treecell {
          @if $skin-name == 'FluentUI' or $theme-name == 'fluentui-dark' {
            font-size: 16px;
            font-weight: bold;
          }
        }

        // .e-gridcontent .e-rowcell {
        //   @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
        //     line-height: 19px;
        //   }
        // }

        .e-gridheader {
          .e-headercell .e-css.e-hierarchycheckbox {
            @if $skin-name =='fluent2' or $skin-name =='fluent2-dark' {
              bottom: 12px;
            }
          }
        }
      }
    }
  }
}