/* general */
:host {
  border-radius: 3px;
  font-weight: 500;
  font-size: 14px;
  padding: 20px;
  line-height: 1.5;
  background-color: var(--color-banner-bg);
  color: var(--color-banner-text);
  border: 1px solid var(--color-banner-border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

:host .title {
  color: var(--color-banner-title);
  font-weight: 600;
  font-size: 16px;
}

:host .description {
  color: var(--color-banner-desc);
  font-weight: 400;
  font-size: 14px;
}

/* type */
:host(.primary) {
  background-color: var(--color-banner-primary-bg);
  border: 1px solid var(--color-banner-primary-border);
}

:host(.success) {
  background-color: var(--color-banner-success-bg);
  border: 1px solid var(--color-banner-success-border);
}

:host(.danger) {
  background-color: var(--color-banner-danger-bg);
  border: 1px solid var(--color-banner-danger-border);
}

:host(.warning) {
  background-color: var(--color-banner-warning-bg);
  border: 1px solid var(--color-banner-warning-border);
}

/* fill */
/* 
:host(.banner-solid) {
  background-color: var(--color-scale-2);
  color: var(--color-fg-default);
  outline: 1px solid var(--color-scale-8);
}

:host(.banner-outline) {
  background-color: var(--color-scale-1);
  color: var(--color-base);
  border: solid 1px var(--color-scale-3);
} */
/* size */
/* :host(.banner-small) {
  border-radius: 2px;
  font-weight: 600;
  font-size: 10px;
  padding: 2px 4px;
}

:host(.banner-middle) {
  border-radius: 3px;
  font-weight: 500;
  font-size: 14px;
  padding: 20px;
}

:host(.banner-large) {
  border-radius: 5px;
  font-weight: 600;
  font-size: 14px;
  padding: 4px 8px;
} */