@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/opacity';

@mixin mx-tree-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mat-tree.tree-wrapper {
    background-color: transparent;
  }

  .tree-wrapper {
    .tree-node {
      &-leaf-node-icon {
        color: map.get($color-theme, onSurfaceVariant);
      }
      &-label {
        color: map.get($color-theme, onSurface);
      }
      &-delete-button {
        color: map.get($color-theme, onSurfaceVariant);
      }
    }
  }

  .tree-wrapper.selection.highlight {
    .tree-node-group-wrapper {
      .tree-node-inner-wrapper {
        &:hover {
          background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
        }
      }
    }
    .tree-node-selected {
      .tree-node-inner-wrapper {
        background-color: rgba(map.get($color-theme, primary), opacity.$opacity-8);
      }
    }
  }

  .tree-wrapper.highlight {
    .tree-node-wrapper {
      .tree-node-inner-wrapper {
        &:hover {
          background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
        }
      }
    }
    .tree-node-selected {
      .tree-node-inner-wrapper {
        background-color: rgba(map.get($color-theme, primary), opacity.$opacity-8);
      }
    }
  }
}