:host {
  --background: var(--bp-status-neutral-background-200);
  --color: var(--bp-status-neutral-color-100);
  --font-size: var(--bp-text-size-100);
  --width: initial;
  --height: initial;
  --min-width: var(--bp-size-400);
  --min-height: var(--bp-size-400);
  --border-radius: var(--bp-object-border-radius-200);
  --padding: var(--bp-size-200);
  display: inline-flex;
}

[part='internal'] {
  background: var(--background);
  color: var(--color);
  width: var(--width);
  height: var(--height);
  min-width: var(--min-width);
  min-height: var(--min-height);
  font-size: var(--font-size);
  border-radius: var(--border-radius);
  padding: var(--padding);
  place-items: center;
  place-content: center;
  display: flex;
  line-height: 0;
}

:host(:state(text-content)) {
  --min-width: calc(var(--bp-size-600) + var(--bp-size-200));
  --min-height: calc(var(--bp-size-600) + var(--bp-size-200));
  --padding: var(--bp-size-300) var(--bp-size-400);
}

:host(:state(text-content-1)),
:host(:state(text-content-2)) {
  --padding: var(--bp-size-200);
}

:host([status='accent']) {
  --background: var(--bp-status-accent-background-200);
  --color: var(--bp-status-accent-color-100);
}

:host([status='success']) {
  --background: var(--bp-status-success-background-200);
  --color: var(--bp-status-success-color-100);
}

:host([status='warning']) {
  --background: var(--bp-status-warning-background-200);
  --color: var(--bp-status-warning-color-100);
}

:host([status='danger']) {
  --background: var(--bp-status-danger-background-200);
  --color: var(--bp-status-danger-color-100);
}
