/**
 * A license card.
 *
 * This displays information about a license, including its status, summary,
 * details, and actions.
 *
 * Modifiers:
 *     -has-warning:
 *         The license has a warning state to display.
 *
 * DOM Attributes:
 *     data-status:
 *         The current status of the license. One of:
 *
 *         * ``expired-grace-period``
 *         * ``hard-expired``
 *         * ``licensed``
 *         * ``unlicensed``
 *
 *     data-check-status:
 *         The current status of a license check operation. One of:
 *
 *         * ``applying``
 *         * ``checking``
 *         * ``error-checking``
 *         * ``error-applying``
 *
 * Structure:
 *     <div class="rb-c-license">
 *      <div class="rb-c-license__header">...</div>
 *      <ul class="rb-c-license__details">...</ul>
 *     </div>
 */
.rb-c-license {
  @status-icon-size: 48px;

  background: var(--ink-p-container-bg);
  border: var(--ink-g-border-container);
  border-radius: var(--ink-u-border-radius-std);
  box-shadow: var(--ink-g-shadow-std);
  color: var(--ink-p-container-fg);
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: var(--ink-u-spacing-std);
  padding: var(--ink-u-spacing-std);

  &::before {
    .fa-icon();

    grid-row: 1 / -1;
    font-size: @status-icon-size;
    width: @status-icon-size;
    vertical-align: top;
    text-align: center;
  }

  &[data-status].-has-warning {
    /* TODO: Add an Ink orange palette. */
    @_light-orange: #f79a28;
    @_dark-orange: #b9721b;

    &::before {
      color: @_light-orange;
      content: @fa-var-warning;
    }

    .rb-c-license__summary {
      color:
        var(--if-dark, @_light-orange)
        var(--if-light, @_dark-orange);
    }
  }

  &[data-status="licensed"] {
    &::before {
      color:
        var(--if-dark, var(--ink-p-green-700))
        var(--if-light, var(--ink-p-green-500));
      content: @fa-var-check-circle;
    }

    .rb-c-license__summary {
      color: var(--ink-p-green-900);
    }
  }

  &[data-check-status="error-checking"],
  &[data-check-status="error-applying"],
  &[data-status="hard-expired"],
  &[data-status="unlicensed"],
  &[data-status="expired-grace-period"] {
    &::before {
      color:
        var(--if-dark, var(--ink-p-red-800))
        var(--if-light, var(--ink-p-red-400));
      content: @fa-var-times-circle;
    }

    .rb-c-license__summary {
      color:
        var(--if-dark, var(--ink-p-red-800))
        var(--if-light, var(--ink-p-red-600));
    }
  }

  &[data-check-status="checking"],
  &[data-check-status="applying"] {
    &::before {
      @spinner-size: 24px;

      color:
        var(--if-dark, var(--ink-p-red-800))
        var(--if-light, var(--ink-p-red-400));
      content: "" !important;
      background-color: var(--ink-p-container-fg);
      background-repeat: no-repeat;
      mask-image: var(--ink-c-spinner-image);
      width: @spinner-size;
      height: @spinner-size;
      margin: ((@status-icon-size - @spinner-size) / 2);
    }

    .rb-c-license__summary {
      color: var(--ink-p-container-fg);
    }
  }

  /**
   * Container for license action buttons.
   *
   * Structure:
   *     <div class="rb-c-license__actions">
   *      <button class="ink-c-button ...">...</button>
   *      ...
   *     </div>
   */
  &__actions {
    display: flex;
    gap: var(--ink-u-spacing-m);
    padding: var(--ink-u-spacing-m) 0;

    &:empty {
      padding: 0;
    }
  }

  /**
   * A detail item showing license information.
   *
   * Structure:
   *     <li class="rb-c-license__detail">
   *      <span class="rb-c-license__detail-icon ..."></span>
   *      <div class="rb-c-license__detail-content ..."></div>
   *     </li>
   */
  &__detail {
    display: flex;
    gap: 0.5ch;
  }

  /**
   * Content shown for a detail item.
   *
   * Structure:
   *     <div class="rb-c-license__detail-content ..."></div>
   */
  &__detail-content {
  }

  /**
   * An icon shown in a detail item.
   *
   * Structure:
   *     <span class="rb-c-license__detail-icon ..."></span>
   */
  &__detail-icon {
    min-height: var(--ink-u-icon-std);
    min-width: var(--ink-u-icon-std);
    vertical-align: text-top;
  }

  /**
   * Container for license detail items.
   */
  &__details {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    gap: var(--ink-u-spacing-m);

    &:empty {
      display: none;
    }
  }

  /**
   * Header section containing the status icon and summary.
   *
   * Structure:
   *     <div class="rb-c-license__header">
   *      <h3 class="rb-c-license__summary">...</h3>
   *      [<div class="rb-c-license__notice">...</div>]
   *      <div class="rb-c-license__state">...</div>
   *     </div>
   */
  &__header {
    display: flex;
    flex-direction: column;
    gap: var(--ink-u-spacing-m);
    line-height: 1.5;
  }

  /**
   * A notice shown below the summary.
   *
   * Structure:
   *     <div class="rb-c-license__notice">
   *      text...
   *     </div>
   */
  &__notice {
  }

  /**
   * The current state of the license.
   *
   * Structure:
   *     <div class="rb-c-license__state">
   *      text...
   *     </div>
   */
  &__state {
  }

  /**
   * A summary of the license status.
   *
   * Structure:
   *     <h3 class="rb-c-license__summary">
   *      text...
   *     </h3>
   */
  &__summary {
    font-size: var(--ink-u-font-ml);
    margin: 0;
    padding: 0;
  }

  /**
   * A warning shown below the summary.
   *
   * Structure:
   *     <div class="rb-c-license__warning">
   *      text...
   *     </div>
   */
  &__warning {
  }

  &__notice,
  &__warning {
    color: var(--ink-p-red-800);
  }
}

/**
 * Container for multiple license cards.
 *
 * Structure:
 *     <div class="rb-c-licenses">
 *      <div class="rb-c-license">...</div>
 *      ...
 *     </div>
 */
.rb-c-licenses {
  display: flex;
  flex-direction: column;
  gap: var(--ink-u-spacing-l);
}
