:host {
  display: block;
}

  :host * {
    box-sizing: border-box;
  }

.inline-notification {
  display: flex;
  max-width: 100%;
  padding: var(--s-space-12);
  gap: var(--s-space-8);
}

@media (min-width: 768px) {

.inline-notification {
    padding: var(--s-space-16)
}
  }

.inline-notification--border-radius-xs {
  border-radius: var(--s-border-radius-xs);
}

.inline-notification--border-radius-sm {
  border-radius: var(--s-border-radius-sm);
}

.inline-notification--intent-info {
  background-color: var(--s-surface-info-subdued);
}

.inline-notification--intent-info .inline-notification__icon {
    color: var(--s-icon-info);
  }

.inline-notification--intent-critical {
  background-color: var(--s-surface-critical-subdued);
}

.inline-notification--intent-critical .inline-notification__icon {
    color: var(--s-icon-critical);
  }

.inline-notification--intent-warning {
  background-color: var(--s-surface-warning-subdued);
}

.inline-notification--intent-warning .inline-notification__icon {
    color: var(--s-icon-warning);
  }

.inline-notification--intent-success {
  background-color: var(--s-surface-success-subdued);
}

.inline-notification--intent-success .inline-notification__icon {
    color: var(--s-icon-success);
  }

.inline-notification__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.inline-notification__content {
  position: relative;
  top: 0.0625rem;
  font-size: var(--s-font-size-sm);
  line-height: var(--s-line-height-sm);
}