@shopware-ag/meteor-component-library/dist/mt-banner.css

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

.mt-banner {
&[data-v-3cdb0c0e] {
  --mt-banner-close-button-size: var(--scale-size-40);

  border-width: 1px;
  padding: var(--scale-size-24);
  border-style: solid;
  border-radius: var(--border-radius-xs);
  margin: 0 auto var(--scale-size-20);
  display: flex;
  flex-direction: row;
  gap: var(--scale-size-16);
}
& ul[data-v-3cdb0c0e] {
    padding: var(--scale-size-8) 0 var(--scale-size-8) var(--scale-size-20);
}
}
.mt-banner--future-remove-default-margin[data-v-3cdb0c0e] {
  margin-block-end: 0;
}
.mt-banner__title[data-v-3cdb0c0e] {
  margin-block-end: 0;
}
.mt-banner__body[data-v-3cdb0c0e] {
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  line-height: var(--font-line-height-xs);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  gap: var(--scale-size-4);
}
.mt-banner__message[data-v-3cdb0c0e] {
  color: var(--color-text-primary-default);
}
.mt-banner__icon[data-v-3cdb0c0e] {
  width: var(--scale-size-20);
  height: var(--scale-size-20);
}
.mt-banner__close {
&[data-v-3cdb0c0e] {
  width: var(--mt-banner-close-button-size);
  height: var(--mt-banner-close-button-size);
  border-radius: var(--border-radius-xs);
  margin-top: calc(var(--scale-size-8) * -1);
  margin-right: calc(var(--scale-size-8) * -1);
}
&[data-v-3cdb0c0e]:focus-visible {
    outline: 2px solid var(--color-border-brand-default);
}
}
.mt-banner--info {
&[data-v-3cdb0c0e] {
  border-color: var(--color-border-brand-default);
  background-color: var(--color-background-brand-default);
}
&[data-v-3cdb0c0e] :is(.mt-banner__icon, .mt-banner__close) {
    color: var(--color-icon-brand-default);
}
}
.mt-banner--attention {
&[data-v-3cdb0c0e] {
  border-color: var(--color-border-attention-default);
  background-color: var(--color-background-attention-default);
}
&[data-v-3cdb0c0e] :is(.mt-banner__icon, .mt-banner__close) {
    color: var(--color-icon-attention-default);
}
}
.mt-banner--critical {
&[data-v-3cdb0c0e] {
  border-color: var(--color-border-critical-default);
  background-color: var(--color-background-critical-default);
}
&[data-v-3cdb0c0e] :is(.mt-banner__icon, .mt-banner__close) {
    color: var(--color-icon-critical-default);
}
}
.mt-banner--positive {
&[data-v-3cdb0c0e] {
  border-color: var(--color-border-positive-default);
  background-color: var(--color-background-positive-default);
}
&[data-v-3cdb0c0e] :is(.mt-banner__icon, .mt-banner__close) {
    color: var(--color-icon-positive-default);
}
}
.mt-banner--inherited {
&[data-v-3cdb0c0e] {
  border-color: var(--color-border-accent-default);
  background-color: var(--color-background-accent-default);
}
&[data-v-3cdb0c0e] :is(.mt-banner__icon, .mt-banner__close) {
    color: var(--color-icon-accent-default);
}
}
.mt-banner--neutral {
&[data-v-3cdb0c0e] {
  border-color: var(--color-border-primary-default);
  background-color: var(--color-background-secondary-default);
}
&[data-v-3cdb0c0e] :is(.mt-banner__icon, .mt-banner__close) {
    color: var(--color-icon-primary-default);
}
}