.mykn-banner {
  --mykn-banner-icon-color: var(--banner-background);
  --mykn-banner-border-color: var(--banner-border);

  border: 1px solid;
  border-color: var(--mykn-banner-border-color);
  border-radius: var(--sizes-border-radius-s);
  display: flex;
  align-items: center;
  padding: var(--sizes-spacing-xs-v);
  background-color: var(--banner-background);
  color: var(--mykn-banner-color);
  position: relative;
  min-height: 60px;

  &--variant-info {
    --mykn-banner-color: var(--banner-info-background);
    --mykn-banner-border-color: var(--banner-info-border);
  }

  &--variant-success {
    --mykn-banner-color: var(--banner-success-background);
    --mykn-banner-border-color: var(--banner-success-border);
  }

  &--variant-warning {
    --mykn-banner-color: var(--banner-warning-background);
    --mykn-banner-border-color: var(--banner-warning-border);
  }

  &--variant-danger {
    --mykn-banner-color: var(--banner-danger-background);
    --mykn-banner-border-color: var(--banner-danger-border);
  }

  &__icon {
    flex-shrink: 0;
    margin-inline-end: var(--sizes-spacing-xs-v);
    width: 36px;
    height: 36px;
  }

  &__content {
    flex: 1;
  }

  &__title {
    margin-bottom: var(--sizes-spacing-xs-xs);
  }
}