:host {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.entries {
  border-right: 1px solid gray; // TODO
  padding: 0 12px;

  .buttons {
    display: flex;
    justify-content: space-between;

    border-bottom: 1px dashed gray; // TODO
    padding: 4px 0;
  }
}

.metrics {
  padding: 0 12px;
}

.group {
  font-size: 12px;
  font-weight: 600;

  .name {
    display: flex;
    cursor: pointer;

    .menu-icon {
      color: var(--color-primary-default);
      font-size: 2em;
    }

    .content {
      display: flex;
      gap: 8px;
      align-items: center;

      .x-icon {
        font-size: 1.5em;
      }
    }
  }

  .entities {
    display: flex;
    flex-direction: column;

    .entity {
      display: flex;
      gap: 4px;
      align-items: center;
      cursor: pointer;

      margin-left: 24px;
      padding: 0 4px;

      .x-icon {
        font-size: 1.5em;
      }

      &.active {
        background-color: dodgerblue;
      }

      &:hover {
        outline: 1px solid gray;
        outline-offset: -1px;
      }
    }

    .metric {
      display: flex;
      gap: 8px;

      padding: 8px 12px 8px 0;
      border-top: 1px solid gray;
      cursor: move;

      line-height: 1.3em;

      &:last-child {
        border-bottom: 1px solid gray;
      }

      &:hover {
        // TODO
      }

      .description {
        color: grey;
      }
    }
  }
}

.drag-preview {
  //width: 100px;
  display: flex;
  gap: 8px;

  padding: 8px 12px 8px 0;
  //border-top: 1px solid gray;
  border-radius: 4px;

  // TODO: use XUI
  color: var(--color-bg-floating-contrast);
  background-color: var(--color-bg-floating);

  font-size: 12px;
  font-weight: 600;
  line-height: 1.3em;
}