@import (reference) "rb/css/defs.less";


/**
 * An update notification bubble shown at the bottom of the page.
 *
 * This is used for conveying updates to a review request or something else worth
 * showing to the user.
 *
 * Update bubbles are meant to be accessible, communicated as a status alert. This
 * helps assistive technologies inform users when it appears.
 *
 * Version Added:
 *     7.0
 *
 * Modifiers:
 *     -is-open:
 *         Display the bubble.
 *
 *         This will cause it to fade and slide in.
 *
 * DOM Attributes:
 *     role (string):
 *         Should be set to ``status``, unless the notification is more urgent.
 *
 * Structure:
 *     <div class="rb-c-page-updates-bubble
 *                 [-is-open]">
 *      <div class="rb-c-page-updates-bubble__message">...</div>
 *      <div class="rb-c-page-updates-bubble__actions">...</div>
 *     </div>
 */
.rb-c-page-updates-bubble {
  background: var(--ink-p-light__yellow-300);
  color: var(--ink-p-fg-on-light);
  border: 1px rgba(0, 0, 0, 0.4) solid;
  bottom: var(--ink-u-spacing-sm);
  border-radius: var(--ink-u-border-radius-xxl);
  box-shadow: var(--ink-g-shadow-std);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ink-u-spacing-m) var(--ink-u-spacing-l);
  font-size: 110%;
  width: max-content;
  max-width: calc(100% - @page-container-padding);
  opacity: 0;
  padding: var(--ink-u-spacing-m) var(--ink-u-spacing-ml);
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  transition: bottom 0.2s ease-in,
              opacity 0.2s ease-in;
  z-index: @z-index-page-overlay;

  &.-is-open {
    opacity: 1;
    bottom: var(--ink-u-spacing-m);
  }

  /**
   * An action the user can perform on the update.
   *
   * This may contain text, or a mixed-in icon class. Implementations must set any
   * accessibility attributes as appropriate.
   *
   * DOM Attributes:
   *     role (string):
   *         Should be set to ``button``, unless another role is more appropriate.
   *
   *     aria-label (string, optional):
   *         A label to communicate to screen readers, if not set as a child.
   *
   *     title (string, optional):
   *         A label to show on hover, if not set as a child.
   *
   * Structure:
   *     <a class="rb-c-page-updates-bubble__action"
   *        role="button"
   *        [aria-label="<<string>>"]
   *        [title="<<string>>"]>
   *      [...]
   *     </a>
   */
  &__action {
    display: flex;

    &,
    &:link,
    &:visited {
      color: inherit;
    }

    &:focus {
      outline: solid;
    }
  }

  /**
   * A list of actions the user can perform on the update.
   *
   * Structure:
   *     <div class="rb-c-page-updates-bubble__actions">
   *      <a class="rb-c-page-updates-bubble__action ..." ...>...</a>  [1+]
   *     </div>
   */
  &__actions {
    display: flex;
    gap: var(--ink-u-spacing-m);
  }

  /**
   * The message shown on the bubble.
   *
   * Structure:
   *     <div class="rb-c-page-updates-bubble__message">
   *      ...
   *     </div>
   */
  &__message {
    a {
      &:link,
      &:visited {
        color: var(--ink-p-link-fg-on-light);
      }
    }
  }
}
