import { css } from 'lit';
import componentStyles from '../../styles/component.styles.mjs';

const styles = css`
  ${componentStyles}

  :host {
    /*
     * These are actually used by tree item, but we define them here so they can more easily be set and all tree items
     * stay consistent.
     */
    --indent-guide-color: var(--flow-ui-color-neutral-200);
    --indent-guide-offset: 0;
    --indent-guide-style: solid;
    --indent-guide-width: 0;
    --indent-size: var(--flow-ui-spacing-large);

    --selected-background-color: var(--flow-ui-color-neutral-100);
    --selected-marker-color: var(--flow-ui-color-primary-500);

    display: block;
    isolation: isolate;

    /*
     * Tree item indentation uses the "em" unit to increment its width on each level, so setting the font size to zero
     * here removes the indentation for all the nodes on the first level.
     */
    font-size: 0;
  }

  .tree--multiple {
    --selected-background-color: transparent;
    --selected-marker-color: transparent;
  }

  .tree--small {
    --indent-size: var(--flow-ui-spacing-medium);
  }
`;

export { styles as default };
