:host {
  align-items: center;
  background-color: var(--default-bg);
  box-shadow: 1px 2px 4px rgba(3, 3, 3, 0.2);
  box-sizing: border-box;
  display: flex;
  min-height: 64px;
  padding: 0 1.5em;
  width: 100%;
}

:host(.no-shadow) {
  box-shadow: 0 0 0 transparent;
}

:host(.primary) {
  background-color: var(--primary-color);
  color: var(--primary-text-color);
}

:host(.secondary) {
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

:host(.success) {
  background-color: var(--success-color);
  color: var(--success-text-color);
}

:host(.warning) {
  background-color: var(--warning-color);
  color: var(--warning-text-color);
}

:host(.danger) {
  background-color: var(--danger-color);
  color: var(--danger-text-color);
}

:host(.dark) {
  background-color: var(--dark-color);
  color: var(--dark-text-color);
}

:host(.light) {
  background-color: var(--light-color);
  color: var(--light-text-color);
}

:host(.sticky) {
  position: sticky;
}

:host(.fixed) {
  position: fixed;
}

:host(.absolute) {
  position: absolute;
}

:host(.relative) {
  position: relative;
}