@use 'semanticColors' as *;
@use 'spacing' as *;
@use 'typography' as *;
@use 'css-util' as *;

.tree {
  > div {
    // Container div for nodes
    padding-bottom: spacing(l);
  }
}

.node {
  display: grid;
  grid-template-columns: spacing(m) 1fr;

  column-gap: spacing(xs);
  align-items: center;

  background: repeating-linear-gradient(90deg, $control-slight-color, $control-slight-color 1px, transparent 1px, transparent spacing(m), );
  background-repeat: no-repeat;
  background-size: 0 100%;
  // Start background at 1/2 indent spacing (m = 1rem)
  background-position-x: spacing(s);

  @include text(ms);

  :global(.svg-inline--fa) {
    bottom: 0;
  }

  > :first-child {
    justify-self: center;
  }
}

.file {
  cursor: pointer;
  @include no-selection;

  &:hover {
    background-color: $button-white-hover-color;
  }

  &:active {
    background-color: $button-white-push-color;
  }
}

.active {
  color: $control-text-color-white;
  background: none;
  background-color: $button-blue-color;

  &:hover {
    background-color: $button-blue-color;
  }

  &:active {
    background-color: $button-blue-hover-color;
  }
}

.highlight {
  > span {
    font-weight: $highlight-weight;
  }
}

.placeholder {
  text-align: center;
}
