/** @component alert-banner */

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

    &.#{$prefix}-alert-banner {
      &--info {
        color: $alert-banner-info__color;
        color: var(--mdl-alert-text-theme, $alert-banner-info__color);
        background-color: $alert-banner-info__background;
        background-color: var(--mdl-alert-background-theme, $alert-banner-info__background);
      }

      &--warning {
        color: $alert-banner-warning__color;
        color: var(--mdl-alert-text-warning, $alert-banner-warning__color);
        background-color: $alert-banner-warning__background;
        background-color: var(--mdl-alert-background-warning, $alert-banner-warning__background);
      }

      &--error {
        color: $alert-banner-error__color;
        color: var(--mdl-alert-text-error, $alert-banner-error__color);
        background-color: $alert-banner-error__background;
        background-color: var(--mdl-alert-background-error, $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: $md-black-100;
      color: var(--mdl-textColor-secondary, $md-black-100);
      cursor: pointer;
    }
  }
}