.indicator {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  flex-shrink: 0;
}

.indicator-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  min-width: 16px;
  min-height: 16px;
  font-weight: 600;
  font-size: var(--hs-typography-extrasmall-size);
  line-height: 1;
  border-radius: 10px;
  top: 0;
  right: 0;
  transform: scale(1) translate(50%, -50%);
  transform-origin: 100% 0% 0;
  color: var(--hs-indicator-color-contrast);
  background: var(--hs-indicator-color);
  transition-property: transform;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
}

.indicator--color-primary {
  --hs-indicator-color: var(--hs-palette-primary-main);
  --hs-indicator-color-contrast: var(--hs-palette-primary-contrast);
}

.indicator--color-secondary {
  --hs-indicator-color: var(--hs-palette-secondary-main);
  --hs-indicator-color-contrast: var(--hs-palette-secondary-contrast);
}

.indicator--color-error {
  --hs-indicator-color: var(--hs-palette-error-main);
  --hs-indicator-color-contrast: var(--hs-palette-error-contrast);
}

.indicator--color-success {
  --hs-indicator-color: var(--hs-palette-success-main);
  --hs-indicator-color-contrast: var(--hs-palette-success-contrast);
}

.indicator--color-action {
  --hs-indicator-color: var(--hs-palette-action-main);
  --hs-indicator-color-contrast: var(--hs-palette-action-contrast);
}

.indicator--color-warning {
  --hs-indicator-color: var(--hs-palette-warning-main);
  --hs-indicator-color-contrast: var(--hs-palette-warning-contrast);
}