corex

@import "../main.css";

@layer components {
  .tree-view[data-loading] [data-scope="tree-view"][data-part="root"] {
    @apply ui-loading;
  }

  .tree-view {
    width: 100%;
    max-width: var(--container-md);
    min-width: 0;
  }

  .tree-view [data-scope="tree-view"][data-part="root"] {
    @apply ui-root;
  }

  .tree-view [data-scope="tree-view"][data-part="tree"] {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .tree-view [data-scope="tree-view"][data-part="label"] {
    @apply ui-label;
    padding-inline-start: var(--spacing-space);
  }

  .tree-view [data-scope="tree-view"][data-part="branch"] {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .tree-view [data-scope="tree-view"][data-part="item"],
  .tree-view [data-scope="tree-view"][data-part="branch-control"] {
    @apply ui-item;
  }

  .tree-view
    [data-scope="tree-view"][data-part="branch-control"][data-state="open"]:not(
      [data-selected]
    ):not([data-checked]):not([data-indeterminate]):not([data-loading]) {
    background-color: var(--color-ui-active);
  }

  .tree-view [data-scope="tree-view"][data-part="branch-indicator"][dir="rtl"][data-state="open"],
  .tree-view [data-scope="tree-view"][data-part="item-indicator"][dir="rtl"][data-state="open"] {
    transform: rotate(-90deg) !important;
  }

  .tree-view [data-scope="tree-view"][data-part="branch-content"] {
    margin-inline-start: --spacing(4);
    min-width: 0;
    align-self: stretch;
    position: relative;
    isolation: isolate;
  }

  .tree-view
    [data-scope="tree-view"][data-part="branch-content"]
    > [data-scope="tree-view"][data-part="item"],
  .tree-view
    [data-scope="tree-view"][data-part="branch-content"]
    > [data-scope="tree-view"][data-part="branch"] {
    flex: 0 0 auto;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .tree-view
    [data-scope="tree-view"][data-part="branch-content"][data-state="open"] {
    visibility: visible;
    display: flex;
    flex-direction: column;
  }

  .tree-view[data-animation="js"] [data-scope="tree-view"][data-part="branch-content"][data-state="closed"],
  .tree-view[data-animation="custom"] [data-scope="tree-view"][data-part="branch-content"][data-state="closed"] {
    display: flex;
    flex-direction: column;
    height: 0;
    opacity: 0;
    overflow: hidden;
  }

  .tree-view [data-scope="tree-view"][data-part="branch-label"] {
    @apply ui-label;
  }

  .tree-view
    [data-scope="tree-view"][data-part="branch-content"]
    [data-scope="tree-view"][data-part="branch-indent-guide"] {
    border-inline-start: var(--border-width-1) solid var(--color-ink-muted);
    top: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    opacity: 0.65;
  }

  .tree-view [data-scope="tree-view"][data-part="root"][data-loading] {
    @apply ui-loading;
  }

  .tree-view [data-scope="tree-view"][data-part="root"][data-loading] [data-scope="tree-view"][data-part="branch-text"],
  .tree-view [data-scope="tree-view"][data-part="root"][data-loading] [data-scope="tree-view"][data-part="branch-indicator"],
  .tree-view [data-scope="tree-view"][data-part="root"][data-loading] [data-scope="tree-view"][data-part="item-text"] {
    display: inline-block;
    min-height: var(--spacing-size);
    background-color: var(--color-ui-active);
    border-radius: var(--radius-md);
    animation: corex-skeleton 1.4s ease-in-out infinite;
  }
}

@utility tree-view--* {
  [data-scope="tree-view"][data-part="label"] {
    padding-inline-start: --value(--spacing-space-*, [length]);
  }

  [data-scope="tree-view"][data-part="item"] {
    padding-inline: --value(--spacing-space-*, [length]);
    gap: --value(--spacing-space-*, [length]);
    min-height: --value(--spacing-size-*, [length]);
    &[data-selected],
    &[data-state="checked"],
    &[data-state="on"],
    &[data-in-range],
    &[data-checked],
    &[data-indeterminate] {
      background-color: --value(--color-*, [color]);
      color: --value(--color-*-ink, [color]);

      &:hover {
        background-color: --value(--color-*-hover, [color]);
      }

      &:active {
        background-color: --value(--color-*-active, [color]);
      }

      &:focus-visible,
      &[data-focus] {
        box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
        outline: none;
      }

      &:disabled,
      &[data-disabled],
      &[disabled] {
        background-color: --value(--color-*-muted, [color]);
        cursor: not-allowed;
      }
    }
  }

  [data-scope="tree-view"][data-part="branch-control"] {
    padding-inline: --value(--spacing-space-*, [length]);
    gap: --value(--spacing-space-*, [length]);
    min-height: --value(--spacing-size-*, [length]);

    &[data-selected],
    &[data-state="checked"],
    &[data-state="on"],
    &[data-in-range],
    &[data-checked],
    &[data-indeterminate] {
      background-color: --value(--color-*, [color]);
      color: --value(--color-*-ink, [color]);

      &:hover {
        background-color: --value(--color-*-hover, [color]);
      }

      &:active {
        background-color: --value(--color-*-active, [color]);
      }

      &:focus-visible {
        box-shadow: inset 0 0 0 2px --value(--color-*-ink, [color]);
        outline: none;
      }

      &:disabled,
      &[data-disabled],
      &[disabled],
      &[data-loading] {
        background-color: --value(--color-*-muted, [color]);
        cursor: not-allowed;
      }
    }
  }

  [data-scope="tree-view"][data-part="item-text"],
  [data-scope="tree-view"][data-part="branch-text"] {
    gap: --value(--spacing-space-*, [length]);
  }

  .tree-view
    [data-scope="tree-view"][data-part="branch-content"]
    [data-scope="tree-view"][data-part="branch-indent-guide"] {
    border-inline-start: var(--border-width-1) solid --value(--color-*-ink, [color]);
  }
}

@utility tree-view--rounded-* {
  [data-scope="tree-view"][data-part="item"],
  [data-scope="tree-view"][data-part="branch-control"] {
    border-radius: --value(--radius-*, [length]);
  }
}

@utility tree-view--text-* {
  [data-scope="tree-view"][data-part="item"],
  [data-scope="tree-view"][data-part="branch-control"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
  }

  [data-scope="tree-view"][data-part="item-text"],
  [data-scope="tree-view"][data-part="branch-text"] {
    font-size: --value(--text-*, [length]);
    line-height: --value(--text-*--line-height, [length]);
  }
}