/*
 * TODO: Once we drop support for RB6, we can switch to using var(--ink-p-*)
 *       colors and #ink-ns-ui.icons.svg-icon icons here.
 */
/*
 * Legacy banner for Power Pack 7.0 and earlier.
 */
#powerpack-license-banner {
  /* These colors correspond to --ink-p-accent-warning-* values. */
  background: #FFF4B0;
  border-bottom: 1px rgba(0, 0, 0, 0.2) solid;
  color: #000000;
  font-size: 110%;
  padding: 5px;
  padding-left: 76px;
  position: relative;
}
[data-ink-color-scheme] #powerpack-license-banner {
  /*
     * On RB7+, the bottom border will be handled by rb-c-topbar.
     *
     * TODO: Once we drop support for RB6, we can remove this and the
     *       border-bottom defined above.
     */
  border-bottom: none;
}
#powerpack-license-banner h2 {
  font-size: 120%;
  font-weight: normal;
  margin: 0;
  padding-bottom: 5px;
  padding-top: 0.2em;
}
#powerpack-license-banner p {
  min-height: 1.5em;
  margin: 0;
}
#powerpack-license-banner a {
  /* This corresponds to --ink-p-link-fg-on-light. */
  color: #124BBD;
}
#powerpack-license-banner a:hover {
  color: #0e398e;
}
#powerpack-license-banner img {
  width: 22px;
}
#powerpack-license-banner #powerpack-license-banner-close {
  position: absolute;
  top: 5px;
  right: 5px;
}
/*# sourceMappingURL=powerpack.css.e7837b126073.map */
/**
 * Activation UI for Review Board.
 *
 * Version Added:
 *     6.0
 *
 * Structure:
 *     <div class="powerpack-c-activation">
 *      <h2 class="powerpack-c-activation__header">...</h2>
 *      <form class="powerpack-c-activation__content">...</h2>
 *     </div>
 */
.powerpack-c-activation {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-align: center;
  margin: 0 auto;
  height: 100%;
  max-width: 60em;
  overflow-y: auto;
  /**
   * Action buttons for license activation.
   *
   * Structure:
   *     <div class="powerpack-c-activation__buttons">
   *      <button class="ink-c-button ...">...</button>  [1+]
   *     </div>
   */
  /**
   * Activation code input.
   *
   * DOM Attributes:
   *     autofocus:
   *         Enable autofocus by default.
   *
   *     label:
   *         A label describing the field for accessibility tools.
   *
   *     maxlength:
   *         The maximum length of the field (36 characters).
   *
   *     minlength:
   *         The minimum length of the field (36 characters).
   *
   *     pattern:
   *         The accepted pattern for an activation code.
   *
   *     required:
   *         The field is required for submission.
   *
   *     type:
   *         "text", always.
   *
   * Structure:
   *     <input class="powerpack-c-activation__code-input"
   *            autofocus
   *            label="..."
   *            maxlength="36"
   *            minlength="36"
   *            pattern="[A-F0-9]{8}-([A-F0-9]{4}-){3}[A-F0-9]{12}"
   *            required
   *            type="text"/>
   */
  /**
   * Main content area for the activation information.
   *
   * Structure:
   *     <form class="powerpack-c-activation__content">
   *      (
   *       <input type="hidden" name="csrfmiddlewaretoken" value="..."/>
   *       <div class="powerpack-c-activation__errors" ...>...</div>
   *       <p>...</p>
   *       <input class="powerpack-c-activation__code-input" .../>
   *       |
   *       <p class="powerpack-c-activation__setup-info">...</p>
   *      )
   *      <div class="powerpack-c-activation__buttons">...</div>
   *     </form>
   */
  /**
   * Activation error display.
   *
   * DOM Attributes:
   *     aria-live:
   *         Set to "polite" for non-interrupting notifications of errors.
   *
   * Structure:
   *     <div class="powerpack-c-activation__errors"
   *          aria-live="polite">
   *      html...
   *     </div>
   */
  /**
   * Header above the activation content.
   *
   * Structure:
   *     <h2 class="powerpack-c-activation__header">
   *      text...
   *     </h2>
   */
  /**
   * Post-activation setup instructions.
   *
   * Structure:
   *     <p class="powerpack-c-activation__setup-info">
   *      html...
   *     </p>
   */
}
.powerpack-c-activation__buttons .ink-c-button {
  font-size: var(--ink-u-font-m);
}
.powerpack-c-activation__code-input[type="text"] {
  font-family: var(--ink-ff-monospace);
  font-size: var(--ink-u-font-ml);
  letter-spacing: 0.1ch;
  padding: var(--ink-u-spacing-sm);
  width: 45ch;
  /* 36 characters + padding */
  align-self: center;
  text-align: center;
}
.powerpack-c-activation__content {
  display: flex;
  flex-direction: column;
  gap: var(--ink-u-spacing-std);
  font-size: var(--ink-u-font-m);
}
.powerpack-c-activation__errors {
  color: var(--ink-p-accent-error-fg-on-container);
  text-align: left;
  white-space: pre-wrap;
}
.powerpack-c-activation__setup-info {
  text-align: left;
}
/**
 * License banner for Review Board and Power Pack license notices.
 *
 * This is used on Review Board 7.1+, requiring page banner support.
 *
 * Version Added:
 *     6.0
 *
 * DOM Attributes:
 *    aria-labelledby (string):
 *        The ID of the inner header element.
 *
 *    role (string):
 *        "region", always.
 *
 * Structure:
 *     <div class="rb-c-page-banner powerpack-c-license-banner"
 *          aria-labelledby="..."
 *          role="region">
 *      <div class="rb-c-page-banner__content">
 *       <h2 class="rb-c-page-banner__header"
 *           id="...">
 *        ...
 *       </h2>
 *       <div class="powerpack-c-license-banner__actions">...</div>
 *       [<div class="powerpack-c-license-banner__notice">...</div>]
 *      </div>
 *     </div>
 */
.powerpack-c-license-banner {
  /**
   * Actions shown on the banner.
   *
   * Structure:
   *     <div class="powerpack-c-license-banner__actions">
   *      <a href="ink-c-button" ...>...</a>  [1+]
   *     </div>
   */
  /**
   * A notice shown at the bottom of the banner.
   *
   * Structure:
   *     <div class="powerpack-c-license-banner__notice">
   *      text...
   *     </div>
   */
}
.powerpack-c-license-banner .rb-c-page-banner__content {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--ink-u-spacing-l);
}
.powerpack-c-license-banner__actions {
  display: flex;
  gap: var(--ink-u-spacing-std);
}
.powerpack-c-license-banner__notice {
  flex-basis: 100%;
}
/*# sourceMappingURL=ui/index.css.9de9607b4ec9.map */