/**
 * Styles and variables for the rb-c-alert component.
 */
@import (reference) "lib/css/fontawesome.less";
@import (reference) "rb/css/ui/colors.less";


#rb-ns-ui() {
  .alert() {
    @_color-vars: #rb-ns-ui.colors();

    @icon-spacing: 0.5em;
    @icon-size: 18px;
    @border-radius: 4px;
    @margin-bottom: 1em;
    @padding: 1em;

    @error-bg: @_color-vars[@red-90];
    @error-border-color: darken(@error-bg, 15%);

    @info-bg: @_color-vars[@blue-80];
    @info-border-color: darken(@info-bg, 15%);

    @success-bg: @_color-vars[@green-80];
    @success-border-color: darken(@success-bg, 40%);

    @warning-bg: @_color-vars[@yellow-70];
    @warning-border-color: darken(@warning-bg, 45%);
  }
}


/**
 * An alert box displayed on the page that warns or informs.
 *
 * This is used to show something important to the user. It can display an
 * informational message/hint, a successful result, an warning, or an error.
 * The text will be displayed alongside an icon, which is dependent on the
 * type. The information may optionally be presented with leading or
 * sectional headers.
 *
 * Modifiers:
 *     -is-error:
 *         The alert represents an error.
 *
 *     -is-info:
 *         The alert represents information useful to the user.
 *
 *     -is-success:
 *         The alert represents a successful result.
 *
 *     -is-warning:
 *         The alert represents a warning.
 *
 * Structure:
 *     <div class="rb-c-alert -is-[type]">
 *      <span class="rb-c-alert__close" role="button"
 *            aria-label="Close" tabindex="0"></span>
 *      <p class="rb-c-alert__content">...</p>
 *     </div>
 */
.rb-c-alert {
  @_alert-vars: #rb-ns-ui.alert();

  border-radius: @_alert-vars[@border-radius];
  border: 1px transparent solid;
  margin: 0 0 @_alert-vars[@margin-bottom] 0;
  padding: @_alert-vars[@padding];

  &:before {
    .fa-icon();
    float: left;
    font-size: @_alert-vars[@icon-size];
    margin-right: @_alert-vars[@icon-spacing];
    text-align: center;
    width: @_alert-vars[@icon-size];
  }

  &:last-child {
    margin-bottom: 0;
  }

  &.-is-error {
    background: var(--ink-c-alert-error-bg);
    border-color: var(--ink-c-alert-error-border-color);
    color: var(--ink-c-alert-error-fg);

    &:before {
      content: @fa-var-exclamation-circle;
    }
  }

  &.-is-info {
    background: var(--ink-c-alert-info-bg);
    border-color: var(--ink-c-alert-info-border-color);
    color: var(--ink-c-alert-info-fg);

    &:before {
      content: @fa-var-info-circle;
    }
  }

  &.-is-success {
    background: var(--ink-c-alert-success-bg);
    border-color: var(--ink-c-alert-success-border-color);
    color: var(--ink-c-alert-success-fg);

    &:before {
      content: @fa-var-check;
    }
  }

  &.-is-warning {
    background: var(--ink-c-alert-warning-bg);
    border-color: var(--ink-c-alert-warning-border-color);
    color: var(--ink-c-alert-warning-fg);

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

  /*
   * Alerts always have light-ish colors, so the default link color in dark
   * mode is too low contrast. Fix it up to always us the fg-on-light color.
   */
  &.-is-error,
  &.-is-info,
  &.-is-success,
  &.-is-warning {
    --ink-p-link-fg: var(--ink-p-link-fg-on-light);
    --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light);
  }

  /**
   * Content to display within the alert.
   *
   * If showing only a single paragraph of text, this should be a ``<p>`` tag.
   * If showing multiple paragraphs, or other HTML content, use a ``<div>``
   * with the content inside.
   *
   * Structure:
   *     <p class="rb-c-alert__content">...</p>
   *
   *     <div class="rb-c-alert__content">
   *      <h3 class="rb-c-alert__heading">...</h3>
   *      <p>...</p>
   *      ...
   *     </div>
   */
  &__content {
    margin: 0;
    padding: 0;
    overflow: hidden;

    > :first-child {
      margin-top: 0;
      padding-top: 0;
    }

    > :last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }

  /**
   * A close button for the alert.
   *
   * DOM Attributes:
   *     aria-label (string):
   *          The accessibility label for the button.
   *
   *     role (string):
   *         This must be set to ``button``.
   *
   *     tabindex (number):
   *         The tab index. This should be set to ``0`` in most cases.
   *
   *     title (string):
   *          The tooltip label for the button.
   *
   * Structure:
   *     <span class="rb-c-alert__close"
   *           aria-label="Close"
   *           role="button"
   *           tabindex="0"
   *           title="Close"></span>
   */
  &__close {
    cursor: pointer;
    float: right;
    padding: 6px;
    margin: -10px -6px -6px -6px;

    &:before {
      .fa-icon();
      content: @fa-var-close;
    }
  }

  /**
   * An optional header above content in the alert.
   *
   * This may be used anywhere within an ``.rb-c-alert__content`` to provide
   * a heading above some part of the content. A common usage would be to
   * provide it as the first element to create a prominent heading for the
   * alert.
   *
   * Structure:
   *     <h3 class="rb-c-alert__heading">
   *      text...
   *     </h3>
   */
  &__heading {
    font-size: 100%;
    font-weight: bold;
    margin: 2em 0 1em 0;
    padding: 0;
  }
}
