.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-default {
  --hs-indicator-color: var(--hs-palette-highlight-default-main);
  --hs-indicator-color-contrast: var(--hs-palette-highlight-default-contrast);
}

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

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

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

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