#djblets-ns-extensions() {
  .extension-list() {
  }

  .extension-item() {
    @version-color: grey;
    @version-margin-left: 0.5em;
    @load-error-color: darkred;
  }
}


/**
 * The Manage Extensions component.
 *
 * This contains actions for working with the list of extensions, and a list
 * of all extensions currently registered.
 *
 * Structure:
 *     <div class="djblets-c-extensions">
 *      <div class="djblets-c-config-forms-list-actions">
 *       ...
 *      </div>
 *      <table class="djblets-c-config-forms-list
 *                    -all-items-have-actions -all-items-are-multiline"
 *             aria-live="polite" aria-busy="true">
 *       ...
 *      </table>
 *     </div>
 */
.djblets-c-extensions {
}


/**
 * An item in the list of extensions.
 *
 * This represents a single extension. It makes use of the enabled, disabled,
 * and error state modifiers.
 *
 * Modifiers:
 *     -has-error:
 *         The extension has an error. The item must include a
 *         ``djblets-c-extension-item__load-error`` class.
 *
 *     -is-disabled:
 *         The extension is disabled.
 *
 *     -is-enabled:
 *         The extension is enabled.
 *
 * Structure:
 *     <tr class="djblets-c-extension-item
 *                 djblets-c-config-forms-list__item">
 *      <td class="djblets-c-config-forms-list__item-main">
 *       <div class="djblets-c-extension-item__header">...</div>
 *       <p class="djblets-c-extension-item__description">...</p>
 *
 *       <pre class="djblets-c-extension-item__load-error">...</pre>
 *      </td>
 *      <td class="djblets-c-config-forms-list__item-state"></td>
 *      <td>
 *       <span class="djblets-c-config-forms-list__item-actions">...</span>
 *      </td>
 *     </tr>
 */
.djblets-c-extension-item {
  @_extension-item-vars: #djblets-ns-extensions.extension-item();

  /**
   * The author of the extension.
   *
   * Structure:
   *     <div class="djblets-c-extension-item__author">
   *      <a href="...">...</a>
   *     </div>
   */
  &__author {
    line-height: 2;
  }

  /**
   * A description of the extension.
   *
   * Structure:
   *     <p class="djblets-c-extension-item__description">
   *      text...
   *     </p>
   */
  &__description {
  }

  /**
   * The header containing details on the extension.
   *
   * Structure:
   *     <div class="djblets-c-extension-item__header">
   *      <h3 class="djblets-c-extension-item__name">...</h3>
   *      <span class="djblets-c-extension-item__version">...</span>
   *      <div class="djblets-c-extension-item__author">...</div>
   *     </div>
   */
  &__header {
  }

  /**
   * The name of the extension.
   *
   * Structure:
   *     <h3 class="djblets-c-extension-item__name">
   *      text...
   *     </h3>
   */
  &__name {
    display: inline;
  }

  /**
   * The extension's version.
   *
   * Structure:
   *     <span class="djblets-c-extension-item__version">
   *      text...
   *     </span>
   */
  &__version {
    color: @_extension-item-vars[@version-color];
    margin-left: @_extension-item-vars[@version-margin-left];
  }

  /**
   * A detailed error describing why the extension could not load.
   *
   * This should only be present if there is an error to show.
   *
   * Structure:
   *     <pre class="djblets-c-extension-item__load-error">
   *      text...
   *     </pre>
   */
  &__load-error {
    color: var(--ink-p-accent-error-fg-on-container);
    font-size: inherit;
    overflow-x: auto;
    white-space: pre-wrap;
  }
}
