/**
 * Badge
 * @see /bitrix/js/ui/cnt/dist/cnt.bundle.css
 * @see /bitrix/js/ui/cnt/ui.cnt.css
 * @see /bitrix/js/ui/label/dist/label.bundle.css
 * @todo fix use @layer components
 * @memo fix compensation >> compensation
 */

@layer base {
  .ui-counter__scope {
    /* @memo /bitrix/js/ui/cnt/ui.cnt.css */
    --ui-counter-current-size: 16px;

    --ui-counter-size: var(--ui-counter-size-md);
    --ui-counter-bg-color: var(--ui-color-design-filled-alert-bg);
    --ui-counter-color: var(--ui-color-design-filled-alert-bg);
    --ui-counter-size-lg: 18px;
    --ui-counter-size-md: 16px;
    --ui-counter-size-sm: 14px;
    --ui-counter-font-size: 11px;
    --ui-counter-symbol-font-size: 11px;
    --ui-counter-inline-space: 6px;
    --ui-counter-symbol-compensation: 0px;
    --ui-counter-border-color: transparent;
    --ui-counter-border-width: 0;
  }

  .ui-label__scope {
    --ui-label-height: var(--ui-size-lg);
    --ui-label-background-color: #c2c5ca;
    --ui-label-background-color-hover: var(--ui-label-background-color);
    --ui-label-color: var(--ui-color-palette-white-base-rgb);
    --ui-label-link-dashed-color: rgba(255, 255, 255, 0.51);
    --ui-label-font-weight: var(--ui-font-weight-bold);
    --ui-label-font: var(--ui-font-family-secondary);
    --ui-label-font-size: var(--ui-font-size-xs);

    --ui-label-inline-space: 6px;
  }
}

/*region Counter size*/
.ui-counter-sm.--air {
  --ui-counter-size: var(--ui-counter-size-sm);
  --ui-counter-font-size: var(--ui-font-size-4xs);
  --ui-counter-symbol-font-size: var(--ui-font-size-5xs);
  --ui-counter-inline-space: 4px;
  --ui-counter-symbol-compensation: -2px;
}

.ui-counter-md.--air {
  --ui-counter-size: var(--ui-counter-size-md);
  --ui-counter-font-size: var(--ui-font-size-xs);
  --ui-counter-symbol-font-size: var(--ui-font-size-4xs);
  --ui-counter-inline-space: 4px;
  --ui-counter-symbol-compensation: -2px;
}

.ui-counter-lg.--air {
  --ui-counter-size: var(--ui-counter-size-lg);
  --ui-counter-font-size: var(--ui-font-size-sm);
  --ui-counter-symbol-font-size: var(--ui-font-size-4xs);
  --ui-counter-inline-space: 6px;
  --ui-counter-symbol-compensation: -4px;
}
/*endregion*/

.ui-counter.--air.ui-counter-border {
  --ui-counter-border-width: var(--ui-border-width-thin);
  --ui-counter-border-color: var(--ui-color-base-white-fixed);
}

/*region Label size*/
.ui-label-xss {
  --ui-label-height: 10px;
  --ui-label-inline-space: 3px;
  --ui-label-font-size: var(--ui-font-size-6xs);
  --ui-label-font-weight: var(--ui-font-weight-regular);
}

.ui-label-xs {
  --ui-label-height: 14px;
  --ui-label-inline-space: 5px;
  --ui-label-font-size: var(--ui-font-size-5xs);
  --ui-label-font-weight: var(--ui-font-weight-regular);
}

.ui-label-sm {
  --ui-label-height: 18px;
  --ui-label-inline-space: 6px;
}

.ui-label-md {
  --ui-label-height: var(--ui-size-lg);
  --ui-label-inline-space: 8px;
}

.ui-label-lg {
  --ui-label-height: 25px;
  --ui-label-inline-space: 9px;
  --ui-label-font-size: var(--ui-font-size-sm);
}

.ui-label-xl {
  --ui-label-height: 30px;
  --ui-label-inline-space: 11px;
  --ui-label-font-size: var(--ui-font-size-md);
}
/*endregion*/
