/**
* @name Alert Banners
* @category communication
* @component alert-banner
*/
@import '../settings/alert-banner';

@include exports('cui-alert-banner') {
  .#{$prefix}-alert-banner {
    position: relative;
    padding: $alert-banner__padding;
    text-align: center;

    &.#{$prefix}-alert-banner {
      &--info {
        color: $alert-banner-info__color;
        background-color: $alert-banner-info__background;
      }

      &--warning {
        color: $alert-banner-warning__color;
        background-color: $alert-banner-warning__background;
      }

      &--error {
        color: $alert-banner-error__color;
        background-color: $alert-banner-error__background;
      }
    }

    &__text {
      padding: 0 10% 0 10%;
      font-size: $alert-banner__font-size;
      text-align: center;
      a {
        color: inherit;
        text-decoration: underline;
      }
    }

    &__close {
      position: absolute;
      top: 12px;
      right: 16px;
      width: 16px;
      height: 16px;
      color: $black;
      cursor: pointer;
    }
  }
}

/**
* @component alert-banner
* @section default
* @html
  <div class="cui-alert-banner cui-alert-banner--info">
    <div class="cui-alert-banner__text">Default Alert Banner</div>
    <div class="cui-alert-banner__close" tabindex="0" role="button" aria-label="Close">
      <i class="icon icon-cancel_16"></i>
    </div>
  </div>
*/

/**
* @component alert-banner
* @section warning
* @html
  <div class="cui-alert-banner cui-alert-banner--warning">
    <div class="cui-alert-banner__text">Warning Alert Banner</div>
    <div class="cui-alert-banner__close" tabindex="0" role="button" aria-label="Close">
      <i class="icon icon-cancel_16"></i>
    </div>
  </div>
*/

/**
* @component alert-banner
* @section error
* @html
  <div class="cui-alert-banner cui-alert-banner--error">
    <div class="cui-alert-banner__text">Error Alert Banner</div>
    <div class="cui-alert-banner__close" tabindex="0" role="button" aria-label="Close">
      <i class="icon icon-cancel_16"></i>
    </div>
  </div>
*/