:host(.dot) div {
  height: 100%;
  width: 100%;
  border: 1px solid var(--jp-inverse-layout-color0, black) !important;
  background-color: #fff;
  border-radius: 50%;
  display: inline-block;
}

:host(.dot-filled) div {
  height: 100%;
  width: 100%;
  border: 1px solid var(--jp-inverse-layout-color0, black) !important;
  border-radius: 50%;
  display: inline-block;
}

:host(.dot-filled.primary) div {
  background-color: var(--primary-bg-color);
}

:host(.dot-filled.secondary) div {
  background-color: var(--secondary-bg-color);
}

:host(.dot-filled.success) div {
  background-color: var(--success-bg-color);
}

:host(.dot-filled.danger) div {
  background-color: var(--danger-bg-color);
}

:host(.dot-filled.warning) div {
  background-color: var(--warning-bg-color);
}

:host(.dot-filled.info) div {
  background-color: var(--info-bg-color);
}

:host(.dot-filled.dark) div {
  background-color: var(--dark-bg-color);
}

:host(.dot-filled.light) div {
  background-color: var(--light-bg-color);
}