:host {
  --title-bg: var(--default-bg);
  --title-bg-hover: var(--default-highlight);
  --title-color: var(--font-color);

  background-color: var(--default-bg);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

:host(.primary) {
  --title-bg: var(--primary-color);
  --title-bg-hover: var(--primary-highlight);
  --title-color: var(--primary-text-color);
}

:host(.secondary) {
  --title-bg: var(--secondary-color);
  --title-bg-hover: var(--secondary-highlight);
  --title-color: var(--secondary-text-color);
}

:host(.success) {
  --title-bg: var(--success-color);
  --title-bg-hover: var(--success-highlight);
  --title-color: var(--success-text-color);
}

:host(.warning) {
  --title-bg: var(--warning-color);
  --title-bg-hover: var(--warning-highlight);
  --title-color: var(--warning-text-color);
}

:host(.danger) {
  --title-bg: var(--danger-color);
  --title-bg-hover: var(--danger-highlight);
  --title-color: var(--danger-text-color);
}