@import url("./x-message.css");

/* FAQ: Wrapped to deter clients from using `.x-message` */
/* HACK: Not in `x-message/demo.css` because it is not processed */
#demo {
  .x-message {
    @mixin message;
  }

  .x-message--scope-inline {
    @mixin message--scope-inline;
  }
  .x-message--scope-inline.x-message--type-info {
    @mixin message--type-info---message--scope-inline;
  }
  .x-message--scope-inline.x-message--type-success {
    @mixin message--type-success---message--scope-inline;
  }
  .x-message--scope-inline.x-message--type-warning {
    @mixin message--type-warning---message--scope-inline;
  }
  .x-message--scope-inline.x-message--type-error {
    @mixin message--type-error---message--scope-inline;
  }
  .x-message--scope-inline.x-message--type-extra {
    @mixin message--type-extra---message--scope-inline;
  }

  .x-message--scope-section {
    @mixin message--scope-section;
  }
  .x-message--scope-section.x-message--type-info {
    @mixin message--type-info---message--scope-section;
  }
  .x-message--scope-section.x-message--type-success {
    @mixin message--type-success---message--scope-section;
  }
  .x-message--scope-section.x-message--type-warning {
    @mixin message--type-warning---message--scope-section;
  }
  .x-message--scope-section.x-message--type-error {
    @mixin message--type-error---message--scope-section;
  }
  .x-message--scope-section.x-message--type-extra {
    @mixin message--type-extra---message--scope-section;
  }

  .x-message--scope-global {
    @mixin message--scope-global;
  }

  .x-message--has-icon.x-message--scope-section {
    @mixin message--has-icon;
    @mixin message--has-icon---message--scope-section;
  }
  .x-message--has-icon.x-message--type-info,
  .x-message--scope-inline.x-message--type-info {
    @mixin message--has-icon---message--type-info;
  }
  .x-message--has-icon.x-message--type-success,
  .x-message--scope-inline.x-message--type-success {
    @mixin message--has-icon---message--type-success;
  }
  .x-message--has-icon.x-message--type-warning,
  .x-message--scope-inline.x-message--type-warning {
    @mixin message--has-icon---message--type-warning;
  }
  .x-message--has-icon.x-message--type-error,
  .x-message--scope-inline.x-message--type-error {
    @mixin message--has-icon---message--type-error;
  }
  .x-message--has-icon.x-message--type-extra,
  .x-message--scope-inline.x-message--type-extra {
    @mixin message--has-icon---message--type-extra;
  }
}