.ui-counter {
  height: var(--kt-ui-counter-height);
  border-radius: var(--kt-ui-counter-border-radius);
}

.ui-counter-inner {
  min-width: var(--ui-counter-current-size);
  padding-inline: 6px;
  font-weight: var(--ui-counter-font-weight);
  color: var(--kt-ui-counter-color);
}

/* Region sizes */
.ui-counter-sm {
  --kt-ui-counter-border-radius: var(--kt-ui-counter-border-radius-sm);
}

.ui-counter-md {
  --kt-ui-counter-border-radius: var(--kt-ui-counter-border-radius-md);
}

.ui-counter-lg {
  --kt-ui-counter-border-radius: var(--kt-ui-counter-border-radius-lg);
}

/* Endregion */
/* Region themes */
.ui-counter-blue {
  --ui-counter-current-bg-color: var(--ui-counter-bg-color-blue);
}

.ui-counter-purple {
  --ui-counter-current-bg-color: var(--ui-counter-bg-color-purple);
}

.ui-counter-pink {
  --ui-counter-current-bg-color: var(--ui-counter-bg-color-pink);
}

.ui-counter-red {
  --ui-counter-current-bg-color: var(--ui-counter-bg-color-red);
}

.ui-counter-green {
  --ui-counter-current-bg-color: var(--ui-counter-bg-color-green);
}

.ui-counter-yellow {
  --ui-counter-current-bg-color: var(--ui-counter-bg-color-yellow);
}

.ui-counter-gray {
  --kt-ui-counter-color: var(--kt-ui-counter-color-gray);
  --ui-counter-current-bg-color: var(--ui-counter-bg-color-gray);
}

/* Endregion */