@use '@nu-art/ts-styles' as styles;

.ts-json-viewer {
  width: 100%;
  height: 100%;
  background: white;
  border: 2px solid black;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px 0;

  .ts-tree__node {
    background: transparent !important;
    cursor: default;
    padding: 0;

    .clickable {
      padding: 5px 0 5px 5px;
      cursor: default;
      display: flex;
      gap: 4px;
    }
  }

  .ts-json-viewer__item {
    width: 0;
    flex-grow: 1;
    gap: 8px;

    .ts-json-viewer__item__key {
      flex-shrink: 0;
      font: {
        size: 14px;
        weight: bold;
      }
    }

    .ts-json-viewer__item__value {
      width: 0;
      flex-grow: 1;
      font: {
        size: 14px;
      }
      @include styles.text-ellipsis;
    }

    &.string {
      .ts-json-viewer__item__value {
        color: #e67e22;
      }
    }

    &.number {
      .ts-json-viewer__item__value {
        color: #2ecc71;
      }
    }

    &.boolean {
      .ts-json-viewer__item__value {
        color: #bf95d0;
      }
    }

    &.object {
      cursor: pointer;

      .ts-json-viewer__item__value {
        color: #f1c40f;
      }
    }
  }

  .ts-json-viewer__icon {
    width: 14px;
    height: 14px;

    &.expanded {
      rotate: 90deg;
    }
  }

  .ts-json-viewer__icon-placeholder {
    width: 14px;
    height: 14px;
  }
}