discourse/app/assets/stylesheets/admin/schema_setting_editor.scss

@use "lib/viewport";

.schema-setting-editor {
  .schema-setting-editor__wrapper {
    --schema-space: 0.5em;
    display: grid;
    grid-template-columns: minmax(10em, 0.3fr) 1fr;
    grid-template-rows: auto 1fr;
    gap: 0 5vw;

    @include viewport.until(sm) {
      --schema-space: 0.33em;
      gap: 0 1em;
    }

    .schema-setting-editor__navigation {
      overflow: hidden;
      align-self: start;

      ul {
        list-style: none;
      }

      .schema-setting-editor__tree {
        border: 1px solid var(--primary-low);
        overflow: auto;
        margin: 0 0 2em 0;

        ul {
          padding: 0 calc(var(--schema-space) * 2) 0 var(--schema-space);
          margin: 0 0 1em;

          li:hover {
            background: var(--primary-very-low);
          }

          &.--is-hidden {
            display: none;
          }
        }

        .--heading {
          display: flex;
          align-items: center;
          padding: var(--schema-space) calc(var(--schema-space) * 3)
            var(--schema-space) calc(var(--schema-space) * 2);
          gap: 0.5em;

          .d-icon {
            font-size: var(--font-down-3);
            margin-left: auto;
          }
        }

        .schema-setting-editor__tree-node.--back-btn {
          cursor: pointer;
          width: 100%;
          border-bottom: 1px solid var(--primary-low);
          color: var(--primary-700);

          &:hover {
            color: var(--primary-800);
            background: var(--primary-very-low);
          }

          .schema-setting-editor__tree-node-text {
            color: currentcolor;

            .d-icon {
              color: currentcolor;
              margin-left: 0;
              margin-right: var(--schema-space);
            }
          }
        }

        .schema-setting-editor__tree-node-text {
          padding: var(--schema-space);
          color: var(--primary);
          display: flex;
          align-items: center;

          span {
            @include ellipsis;
          }

          .d-icon {
            margin-left: auto;
            font-size: var(--font-down-3);
            color: var(--primary-500);
          }
        }

        .schema-setting-editor__tree-node {
          cursor: pointer;

          &.--active {
            > .schema-setting-editor__tree-node-text {
              background-color: var(--tertiary);
              color: var(--secondary);

              .d-icon {
                color: var(--secondary);
              }
            }
          }

          &.--parent {
            border: 2px solid transparent;

            &:not(:has(ul)) {
              &:hover {
                background: var(--primary-very-low);
              }
            }

            &.--active {
              border: 2px solid var(--tertiary);
            }

            &.--add-button {
              border-top: 1px solid var(--primary-low);
            }
          }

          &.--heading {
            .d-icon {
              color: var(--primary-700);
            }

            &:hover {
              background: var(--primary-very-low);
            }
          }

          &.--child {
            margin-left: var(--schema-space);
            border-left: 1px solid var(--primary-200);

            .schema-setting-editor__tree-node-text {
              color: var(--primary-800);
            }
          }
        }
      }

      .schema-setting-editor__tree-add-button {
        color: var(--tertiary);
        width: 100%;
        line-height: 1.4; // match li height
        justify-content: start;
        padding: var(--schema-space);

        .d-icon {
          color: currentcolor;
          font-size: var(--font-down-1);
        }

        &:hover {
          background: var(--primary-very-low);
          color: var(--tertiary-hover);

          .d-icon {
            color: currentcolor;
          }
        }
      }
    }
  }
}