/**
 * Button
 * @see /bitrix/js/ui/buttons/dist/ui.buttons.bundle.css
 * @memo fix --ui-btn-title-comensation > --ui-btn-title-compensation
 * @memo use in src/runtime/air-design-tokens/008_ui_global.css
 */

@theme inline {
  --button-link-light-bg-hover: color-mix(in srgb,transparent 100%,var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
  --button-link-light-bg-active: color-mix(in srgb,transparent 100%,var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));

  --button-link-dark-bg-hover: color-mix(in srgb, transparent 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
  --button-link-dark-bg-active: color-mix(in srgb, transparent 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));
}

@layer base {
  /* region Old */
  .ui-btn {
    /* size */
    --ui-btn-size-xss: 20px;
    --ui-btn-size-xs: 24px;
    --ui-btn-size-sm: 28px;
    --ui-btn-size-md: 34px;
    --ui-btn-size-lg: 38px;
    --ui-btn-size-xl: 46px;

    --ui-btn-letter-spacing: -0.05;

    /* default param */
    --ui-btn-icon-size: 20px;

    --ui-btn-title-compensation: -1px;
    --ui-btn-padding: 0 var(--ui-btn-padding-right) 0 var(--ui-btn-padding-left);
    --ui-btn-min-width: 80px;
    --ui-btn-background: #868d95;
    --ui-btn-background-hover: color-mix(in srgb, var(--ui-btn-background) 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
    --ui-btn-background-active: color-mix(in srgb, var(--ui-btn-background) 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));
    --ui-btn-border-color: var(--ui-btn-background);
    --ui-btn-border-color-hover: color-mix(in srgb, var(--ui-btn-border-color) 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
    --ui-btn-border-color-active: color-mix(in srgb, var(--ui-btn-border-color) 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));
    --ui-btn-border-width: 0px;
    --ui-btn-border: var(--ui-btn-border-width) solid var(--ui-btn-border-color);
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-on-primary);
    --ui-btn-colors-before-bg: var(--ui-color-on-primary);
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-btn-color);
    --ui-btn-color-active: var(--ui-btn-color);
    --ui-btn-box-shadow: none;
    --ui-btn-box-shadow-hover: none;
    --ui-btn-box-shadow-active: none;
    --ui-btn-text-shadow: none;
    --ui-btn-text-shadow-hover: none;
    --ui-btn-text-shadow-active: none;
    --ui-btn-margin-left: 12px;
  }

  /* region Size */
  .ui-btn.ui-btn-xl {
    --ui-btn-padding: 0 26px;
    --ui-btn-padding-right: 12px;
    --ui-btn-min-width: 90px;
    --ui-btn-height: var(--ui-btn-size-lg);
    --ui-btn-font-size: var(--ui-font-size-xs);
  }

  .ui-btn.ui-btn-lg {
    --ui-btn-padding: 0 26px;
    --ui-btn-padding-right: 12px;
    --ui-btn-min-width: 90px;
    --ui-btn-height: var(--ui-btn-size-lg);
    --ui-btn-font-size: var(--ui-font-size-xs);
  }

  /* default */
  .ui-btn.ui-btn-md {
    --ui-btn-padding: 0 19px;
    --ui-btn-padding-right: 12px;
    --ui-btn-min-width: 80px;
    --ui-btn-height: var(--ui-btn-size-md);
    --ui-btn-font-size: var(--ui-font-size-xs);
  }

  .ui-btn.ui-btn-sm {
    --ui-btn-padding: 0 17px;
    --ui-btn-padding-right: 10px;
    --ui-btn-min-width: 70px;
    --ui-btn-height: var(--ui-btn-size-sm);
    --ui-btn-font-size: var(--ui-font-size-xs);
  }

  .ui-btn.ui-btn-xs {
    --ui-btn-padding: 0 15px;
    --ui-btn-padding-right: 9px;
    --ui-btn-min-width: 66px;
    --ui-btn-height: var(--ui-btn-size-xs);
    --ui-btn-font-size: var(--ui-font-size-3xs);
  }

  .ui-btn.ui-btn-xss {
    --ui-btn-padding: 0 15px;
    --ui-btn-padding-right: 9px;
    --ui-btn-min-width: 66px;
    --ui-btn-height: var(--ui-btn-size-xss);
    --ui-btn-font-size: var(--ui-font-size-3xs);
  }
  /* endregion */

  /* region default button color */

  /* default */
  .ui-btn.--style-default,
  .ui-btn.--style-default-light,
  .ui-btn.--style-default-dark,
  .ui-btn.--air.--style-default,
  .ui-btn.--air.--style-default-light,
  .ui-btn.--air.--style-default-dark {
    --ui-btn-background: var(--ui-color-base-20);
    --ui-btn-background-hover: #cfd4d8;
    --ui-btn-background-active: #dde2e5;
    --ui-btn-border-color: var(--ui-color-base-20);
    --ui-btn-border-color-hover: #c6cdd3;
    --ui-btn-border-color-active: #9fa4ab;
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-base-80);
    --ui-btn-colors-before-bg: var(--ui-color-base-80);
    --ui-btn-color: var(--ui-color-base-80);
    --ui-btn-color-hover: var(--ui-color-base-80);
    --ui-btn-color-active: var(--ui-color-base-80);
  }

  .ui-btn.--style-success,
  .ui-btn.--air.--style-success {
    --ui-btn-background: #bbed21;
    --ui-btn-background-hover: #d2f95f;
    --ui-btn-background-active: #b2e232;
    --ui-btn-border-color: #bbed21;
    --ui-btn-border-color-hover: #d2f95f;
    --ui-btn-border-color-active: #b2e232;
    --ui-btn-opacity-after: var(--ui-opacity-20);
    --ui-btn-colors-after-bg: var(--ui-color-base-90);
    --ui-btn-colors-before-bg: var(--ui-color-base-90);
    --ui-btn-color: var(--ui-color-base-90);
    --ui-btn-color-hover: var(--ui-color-base-90);
    --ui-btn-color-active: var(--ui-color-base-90);
  }

  .ui-btn.--style-success-light,
  .ui-btn.--air.--style-success-light {
    --ui-btn-background: rgba(223, 238, 175, var(--ui-opacity-80));
    --ui-btn-background-hover: #eaf5c5;
    --ui-btn-background-active: #d3e59a;
    --ui-btn-border-color: rgba(223, 238, 175, var(--ui-opacity-80));
    --ui-btn-border-color-hover: #eaf5c5;
    --ui-btn-border-color-active: #d3e59a;
    --ui-btn-opacity-after: var(--ui-opacity-20);
    --ui-btn-colors-after-bg: var(--ui-color-text-primary);
    --ui-btn-colors-before-bg: #a3bf63;
    --ui-btn-color: #668d13;
    --ui-btn-color-hover: #668d13;
    --ui-btn-color-active: #668d13;
  }

  .ui-btn.--style-success-dark,
  .ui-btn.--air.--style-success-dark {
    --ui-btn-background: #86a732;
    --ui-btn-background-hover: #a2bf54;
    --ui-btn-background-active: #a2bf54;
    --ui-btn-border-color: #86a732;
    --ui-btn-border-color-hover: #a2bf54;
    --ui-btn-border-color-active: #a2bf54;
    --ui-btn-opacity-after: var(--ui-opacity-20);
    --ui-btn-colors-after-bg: var(--ui-color-on-primary);
    --ui-btn-colors-before-bg: #a3bf63;
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-color-on-primary);
    --ui-btn-color-active: var(--ui-color-on-primary);
  }

  .ui-btn.--style-danger,
  .ui-btn.--air.--style-danger {
    --ui-btn-background: #f1361a;
    --ui-btn-background-hover: #cc1c00;
    --ui-btn-background-active: #d24430;
    --ui-btn-border-color: #f1361a;
    --ui-btn-border-color-hover: #cc1c00;
    --ui-btn-border-color-active: #d24430;
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-color-on-primary);
    --ui-btn-color-active: var(--ui-color-on-primary);
  }

  .ui-btn.--style-danger-dark,
  .ui-btn.--air.--style-danger-dark {
    --ui-btn-background: #a21429;
    --ui-btn-background-hover: #c43d51;
    --ui-btn-background-active: #851021;
    --ui-btn-border-color: #a21429;
    --ui-btn-border-color-hover: #c43d51;
    --ui-btn-border-color-active: #851021;
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-color-on-primary);
    --ui-btn-color-active: var(--ui-color-on-primary);
  }

  .ui-btn.--style-danger-light,
  .ui-btn.--air.--style-danger-light {
    --ui-btn-background: rgba(253, 202, 200, var(--ui-opacity-80));
    --ui-btn-background-hover: #ffdcdb;
    --ui-btn-background-active: #f2b6b3;
    --ui-btn-border-color: rgba(253, 202, 200, var(--ui-opacity-80));
    --ui-btn-border-color-hover: #ffdcdb;
    --ui-btn-border-color-active: #f2b6b3;
    --ui-btn-opacity-after: var(--ui-opacity-20);
    --ui-btn-colors-after-bg: var(--ui-color-text-primary);
    --ui-btn-colors-before-bg: #eb8783;
    --ui-btn-color: #d7413c;
    --ui-btn-color-hover: #d7413c;
    --ui-btn-color-active: #d7413c;
  }

  .ui-btn.--style-primary,
  .ui-btn.--style-primary-light,
  .ui-btn.--air.--style-primary,
  .ui-btn.--air.--style-primary-light {
    --ui-btn-background: #3bc8f5;
    --ui-btn-background-hover: #3eddff;
    --ui-btn-background-active: #12b1e3;
    --ui-btn-border-color: #3bc8f5;
    --ui-btn-border-color-hover: #3eddff;
    --ui-btn-border-color-active: #12b1e3;
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-color-on-primary);
    --ui-btn-color-active: var(--ui-color-on-primary);
  }

  .ui-btn.--style-primary-dark,
  .ui-btn.--air.--style-primary-dark {
    --ui-btn-background: #399fc2;
    --ui-btn-background-hover: #37aed4;
    --ui-btn-background-active: #328ba9;
    --ui-btn-border-color: #399fc2;
    --ui-btn-border-color-hover: #37aed4;
    --ui-btn-border-color-active: #328ba9;
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-color-on-primary);
    --ui-btn-color-active: var(--ui-color-on-primary);
  }

  .ui-btn.--style-secondary,
  .ui-btn.--style-secondary-dark,
  .ui-btn.--air.--style-secondary,
  .ui-btn.--air.--style-secondary-dark {
    --ui-btn-background: #c5e7f4;
    --ui-btn-background-hover: #d1eef9;
    --ui-btn-background-active: #aee0f2;
    --ui-btn-border-color: #aee0f2;
    --ui-btn-border-color-hover: #aee0f2;
    --ui-btn-border-color-active: #aee0f2;
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-base-90);
    --ui-btn-colors-before-bg: var(--ui-color-base-90);
    --ui-btn-color: var(--ui-color-base-90);
    --ui-btn-color-hover: var(--ui-color-base-90);
    --ui-btn-color-active: var(--ui-color-base-90);
  }

  .ui-btn.--style-secondary-light,
  .ui-btn.--air.--style-secondary-light {
    --ui-btn-background: rgba(182, 237, 255, var(--ui-opacity-80));
    --ui-btn-background-hover: #d1eef9;
    --ui-btn-background-active: #aee0f2;
    --ui-btn-border-color: rgba(182, 237, 255, var(--ui-opacity-80));
    --ui-btn-border-color-hover: rgba(182, 237, 255, var(--ui-opacity-80));
    --ui-btn-border-color-active: rgba(182, 237, 255, var(--ui-opacity-80));
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-base-90);
    --ui-btn-colors-before-bg: var(--ui-color-base-90);
    --ui-btn-color: #0aa0d0;
    --ui-btn-color-hover: #0aa0d0;
    --ui-btn-color-active: #0aa0d0;
  }

  .ui-btn.--style-warning,
  .ui-btn.--style-warning-light,
  .ui-btn.--style-warning-dark,
  .ui-btn.--air.--style-warning,
  .ui-btn.--air.--style-warning-light,
  .ui-btn.--air.--style-warning-dark {
    --ui-btn-background: rgba(237, 218, 123, var(--ui-opacity-80));
    --ui-btn-background-hover: rgba(255, 169, 0, .65);
    --ui-btn-background-active: #eba51c;
    --ui-btn-border-color: rgba(237, 218, 123, var(--ui-opacity-80));
    --ui-btn-border-color-hover: rgba(237, 218, 123, var(--ui-opacity-80));
    --ui-btn-border-color-active: rgba(237, 218, 123, var(--ui-opacity-80));
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-base-90);
    --ui-btn-colors-before-bg: var(--ui-color-base-90);
    --ui-btn-color: #a07f27;
    --ui-btn-color-hover: #a07f27;
    --ui-btn-color-active: #a07f27;
  }

  .ui-btn.--style-link,
  .ui-btn.--air.--style-link {
    --ui-btn-background: var(--ui-color-background-transparent);
    --ui-btn-background-hover: var(--ui-color-background-transparent);
    --ui-btn-background-active: var(--ui-color-background-transparent);
    --ui-btn-border-color: var(--ui-color-background-transparent);
    --ui-btn-border-color-hover: var(--ui-color-background-transparent);
    --ui-btn-border-color-active: var(--ui-color-background-transparent);
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-base-90);
    --ui-btn-colors-before-bg: var(--ui-color-base-90);
    --ui-btn-color: var(--ui-color-base-90);
    --ui-btn-color-hover: #80868e;
    --ui-btn-color-active: var(--ui-color-base-90);
  }

  .ui-btn.--style-link-light,
  .ui-btn.--air.--style-link-light {
    --ui-btn-background: var(--ui-color-background-transparent);
    --ui-btn-background-hover: #f6f8f9;
    --ui-btn-background-active: #d6f1fb;
    --ui-btn-border-color: var(--ui-color-background-transparent);
    --ui-btn-border-color-hover: #f6f8f9;
    --ui-btn-border-color-active: #d6f1fb;
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-base-90);
    --ui-btn-colors-before-bg: var(--ui-color-base-90);
    --ui-btn-color: var(--ui-color-base-90);
    --ui-btn-color-hover: var(--ui-color-text-primary);
    --ui-btn-color-active: var(--ui-color-base-solid);
    --ui-btn-padding: 0 6px;
  }

  .ui-btn.--style-link-dark,
  .ui-btn.--air.--style-link-dark {
    --ui-btn-background: var(--ui-color-background-transparent);
    --ui-btn-background-hover: #cfd4d8;
    --ui-btn-background-active: #dde2e5;
    --ui-btn-border-color: #c6cdd3;
    --ui-btn-border-color-hover: #c6cdd3;
    --ui-btn-border-color-active: #9fa4ab;
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-base-90);
    --ui-btn-colors-before-bg: var(--ui-color-base-90);
    --ui-btn-color: var(--ui-color-base-90);
    --ui-btn-color-hover: var(--ui-color-base-90);
    --ui-btn-color-active: var(--ui-color-base-90);
  }

  .ui-btn.--style-ai,
  .ui-btn.--style-ai-light,
  .ui-btn.--style-ai-dark,
  .ui-btn.--air.--style-ai,
  .ui-btn.--air.--style-ai-light,
  .ui-btn.--air.--style-ai-dark {
    --ui-btn-backgroud-color-ai: #935BEC;
    --ui-btn-backgroud-color-ai-hover: #A977FA;
    --ui-btn-backgroud-color-ai-active: #8447E4;
    --ui-btn-background: var(--ui-btn-backgroud-color-ai);
    --ui-btn-background-hover: var(--ui-btn-backgroud-color-ai-hover);
    --ui-btn-background-active: var(--ui-btn-backgroud-color-ai-active);
    --ui-btn-border-color: var(--ui-btn-backgroud-color-ai);
    --ui-btn-border-color-hover: var(--ui-btn-backgroud-color-ai-hover);
    --ui-btn-border-color-active: var(--ui-btn-backgroud-color-ai-active);
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-on-primary);
    --ui-btn-colors-before-bg: var(--ui-color-on-primary);
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-color-on-primary);
    --ui-btn-color-active: var(--ui-color-on-primary);
  }

  .ui-btn.--style-collab,
  .ui-btn.--style-collab-light,
  .ui-btn.--style-collab-dark,
  .ui-btn.--air.--style-collab,
  .ui-btn.--air.--style-collab-light,
  .ui-btn.--air.--style-collab-dark {
    --ui-btn-background: #19CC45;
    --ui-btn-background-hover: #6BE860;
    --ui-btn-background-active: #00A94E;
    --ui-btn-border-color: var(--ui-color-background-transparent);
    --ui-btn-border-color-hover: var(--ui-color-background-transparent);
    --ui-btn-border-color-active: var(--ui-color-background-transparent);
    --ui-btn-color: var(--ui-color-palette-white-base);
    --ui-btn-color-hover: var(--ui-color-palette-white-base);
    --ui-btn-color-active: var(--ui-color-palette-white-base);
  }
  /* endregion */
  /* endregion */

  /* region Air */
  .ui-btn.--air {
    /* size */
    --ui-btn-size-xss: 20px;
    --ui-btn-size-xs: 24px;
    --ui-btn-size-sm: 28px;
    --ui-btn-size-md: 34px;
    --ui-btn-size-lg: 38px;
    --ui-btn-size-xl: 46px;

    --ui-btn-letter-spacing: -0.05;

    /* default param */
    --ui-btn-icon-size: 20px;

    --ui-btn-title-compensation: -1px;
    --ui-btn-padding: 0 var(--ui-btn-padding-right) 0 var(--ui-btn-padding-left);
    --ui-btn-min-width: 80px;

    --ui-btn-background: #868d95;
    --ui-btn-background-hover: color-mix(in srgb, var(--ui-btn-background) 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
    --ui-btn-background-active: color-mix(in srgb, var(--ui-btn-background) 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));
    --ui-btn-background-gradient: linear-gradient(180deg, var(--ui-btn-background) 0%, var(--ui-btn-background) 100%);
    --ui-btn-background-gradient-hover: linear-gradient(180deg, var(--ui-btn-background-hover) 0%, var(--ui-btn-background-hover) 100%);
    --ui-btn-background-gradient-active: linear-gradient(180deg, var(--ui-btn-background-active) 0%, var(--ui-btn-background-active) 100%);

    --ui-btn-border-color: var(--ui-btn-background);
    --ui-btn-border-color-hover: color-mix(in srgb, var(--ui-btn-border-color) 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
    --ui-btn-border-color-active: color-mix(in srgb, var(--ui-btn-border-color) 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));
    --ui-btn-border-width: 0px;
    --ui-btn-border: var(--ui-btn-border-width) solid var(--ui-btn-border-color);
    --ui-btn-opacity-after: var(--ui-opacity-30);
    --ui-btn-colors-after-bg: var(--ui-color-on-primary);
    --ui-btn-colors-before-bg: var(--ui-color-on-primary);
    --ui-btn-color: var(--ui-color-on-primary);
    --ui-btn-color-hover: var(--ui-btn-color);
    --ui-btn-color-active: var(--ui-btn-color);
    --ui-btn-box-shadow: none;
    --ui-btn-box-shadow-hover: none;
    --ui-btn-box-shadow-active: none;
    --ui-btn-text-shadow: none;
    --ui-btn-text-shadow-hover: none;
    --ui-btn-text-shadow-active: none;
    --ui-btn-margin-left: 12px;
  }

  /* region Size */
  .ui-btn.--air.ui-btn-xl {
    --ui-btn-padding-right: 23px;
    --ui-btn-padding-left: 23px;
    --ui-btn-icon-compensation: 8px;
    --ui-btn-radius: var(--ui-border-radius-md);
    --ui-btn-font-size: var(--ui-font-size-xl);
    --ui-btn-icon-size: 28px;
    --ui-btn-icon-space: 4px;
    --ui-btn-dropdown-icon-size: 22px;
    --ui-btn-dropdown-icon-inline-space: 6px;
    --ui-btn-dropdown-icon-compensation: 6px;
    --ui-btn-height: var(--ui-btn-size-xl);
    --ui-btn-wait-icon-size: 24px;
    --ui-btn-split-divider-height: 26px;
    --ui--btn-width-with-only-icon: var(--ui-btn-height);
    --ui-btn-corner-counter-inline-shift: 13px;
    --ui-btn-counter-inline-space: 8px;
  }

  .ui-btn.--air.ui-btn-lg {
    --ui-btn-padding-right: 17px;
    --ui-btn-padding-left: 17px;
    --ui-btn-icon-compensation: 10px;
    --ui-btn-radius: var(--ui-border-radius-md);
    --ui-btn-font-size: var(--ui-font-size-lg);
    --ui-btn-icon-size: 28px;
    --ui-btn-icon-space: 4px;
    --ui-btn-dropdown-icon-size: 20px;
    --ui-btn-dropdown-icon-inline-space: 6px;
    --ui-btn-dropdown-icon-compensation: 6px;
    --ui-btn-height: var(--ui-btn-size-lg);
    --ui-btn-wait-icon-size: 22px;
    --ui-btn-split-divider-height: 22px;
    --ui-btn-letter-spacing: -0.1px;
    --ui--btn-width-with-only-icon: var(--ui-btn-height);
    --ui-btn-corner-counter-inline-shift: 12px;
    --ui-btn-counter-inline-space: 8px;
  }

  /* default */
  .ui-btn.--air.ui-btn-md {
    --ui-btn-padding-right: 13px;
    --ui-btn-padding-left: 13px;
    --ui-btn-icon-compensation: 6px;
    --ui-btn-radius: var(--ui-border-radius-md);
    --ui-btn-font-size: var(--ui-font-size-md);
    --ui-btn-font-weight: var(--ui-font-weight-medium);
    --ui-btn-icon-size: 24px;
    --ui-btn-icon-space: 2px;
    --ui-btn-dropdown-icon-size: 18px;
    --ui-btn-dropdown-icon-inline-space: 4px;
    --ui-btn-dropdown-icon-compensation: 4px;
    --ui-btn-height: var(--ui-btn-size-md);
    --ui-btn-wait-icon-size: 20px;
    --ui-btn-split-divider-height: 18px;
    --ui--btn-width-with-only-icon: var(--ui-btn-height);
    --ui-btn-corner-counter-inline-shift: 13px;
    --ui-btn-counter-inline-space: 6px;
  }

  .ui-btn.--air.ui-btn-sm {
    --ui-btn-padding-right: 9px;
    --ui-btn-padding-left: 9px;
    --ui-btn-icon-compensation: 4px;
    --ui-btn-radius: var(--ui-border-radius-sm);
    --ui-btn-font-size: var(--ui-font-size-sm);
    --ui-btn-font-weight: var(--ui-font-weight-normal);
    --ui-btn-icon-size: 20px;
    --ui-btn-icon-space: 4px;
    --ui-btn-dropdown-icon-size: 16px;
    --ui-btn-dropdown-icon-inline-space: 3px;
    --ui-btn-dropdown-icon-compensation: 3px;
    --ui-btn-height: var(--ui-btn-size-sm);
    --ui-btn-wait-icon-size: 16px;
    --ui-btn-letter-spacing: -0.15px;
    --ui-btn-split-divider-height: 14px;
    --ui--btn-width-with-only-icon: 34px;
    --ui-btn-corner-counter-inline-shift: 13px;
    --ui-btn-counter-inline-space: 6px;
  }

  .ui-btn.--air.ui-btn-xs {
    --ui-btn-padding-right: 7px;
    --ui-btn-padding-left: 7px;
    --ui-btn-icon-compensation: 2px;
    --ui-btn-radius: var(--ui-border-radius-xs);
    --ui-btn-font-size: var(--ui-font-size-xs);
    --ui-btn-font-weight: var(--ui-font-weight-normal);
    --ui-btn-icon-size: 14px;
    --ui-btn-icon-space: 4px;
    --ui-btn-dropdown-icon-size: 14px;
    --ui-btn-dropdown-icon-inline-space: 4px;
    --ui-btn-dropdown-icon-compensation: 2px;
    --ui-btn-height: var(--ui-btn-size-xs);
    --ui-btn-wait-icon-size: 14px;
    --ui-btn-letter-spacing: -0.1px;
    --ui-btn-split-divider-height: 12px;
    --ui--btn-width-with-only-icon: 28px;
    --ui-btn-corner-counter-inline-shift: 11px;
    --ui-btn-counter-inline-space: 6px;
  }

  .ui-btn.--air.ui-btn-xss {
    --ui-btn-padding-right: 7px;
    --ui-btn-padding-left: 8px;
    --ui-btn-icon-compensation: 5px;
    --ui-btn-radius: 5px;
    --ui-btn-font-size: var(--ui-font-size-4xs);
    --ui-btn-font-weight: var(--ui-font-weight-normal);
    --ui-btn-icon-size: 14px;
    --ui-btn-icon-space: 4px;
    --ui-btn-dropdown-icon-size: 12px;
    --ui-btn-dropdown-icon-inline-space: 2px;
    --ui-btn-dropdown-icon-compensation: 2px;
    --ui-btn-height: var(--ui-btn-size-xss);
    --ui-btn-wait-icon-size: 12px;
    --ui--btn-width-with-only-icon: 24px;
    --ui-btn-corner-counter-inline-shift: 10px;
    --ui-btn-letter-spacing: 0.1px;
    --ui-btn-split-divider-height: 10px;
    --ui-btn-counter-inline-space: 6px;
  }
  /* endregion */

  /* region default button color */
  .ui-btn.--air.--style-filled {
    --ui-btn-background: var(--ui-color-design-filled-bg);
    --ui-btn-border-color: var(--ui-color-design-filled-stroke);
    --ui-btn-border-width: var(--ui-design-filled-stroke-weight);
    --ui-btn-color: var(--ui-color-design-filled-content);
    --ui-btn-split-divider-color: var(--ui-color-design-filled-content-divider);
  }

  .ui-btn.--air.--style-tinted {
    --ui-btn-background: var(--ui-color-design-tinted-bg);
    --ui-btn-border-color: var(--ui-color-design-tinted-stroke);
    --ui-btn-border-width: var(--ui-design-tinted-stroke-weight);
    --ui-btn-color: var(--ui-color-design-tinted-content);
    --ui-btn-split-divider-color: var(--ui-color-design-tinted-content-divider);
  }

  .ui-btn.--air.--style-tinted-alert {
    --ui-btn-background: var(--ui-color-design-tinted-alert-bg);
    --ui-btn-border-color: var(--ui-color-design-tinted-alert-stroke);
    --ui-btn-border-width: var(--ui-design-tinted-alert-stroke-weight);
    --ui-btn-color: var(--ui-color-design-tinted-alert-content);
    --ui-btn-split-divider-color: var(--ui-color-design-tinted-alert-content-divider);
  }

  .ui-btn.--air.--style-outline-accent-1 {
    --ui-btn-background: var(--ui-color-design-outline-a1-bg);
    --ui-btn-border-color: var(--ui-color-design-outline-a1-stroke);
    --ui-btn-border-width: var(--ui-design-outline-a1-stroke-weight);
    --ui-btn-color: var(--ui-color-design-outline-a1-content);
    --ui-btn-split-divider-color: var(--ui-color-design-outline-a1-content-divider);
  }

  .ui-btn.--air.--style-outline-accent-2 {
    --ui-btn-background: var(--ui-color-design-outline-a2-bg);
    --ui-btn-border-color: var(--ui-color-design-outline-a2-stroke);
    --ui-btn-border-width: var(--ui-design-outline-a2-stroke-weight);
    --ui-btn-color: var(--ui-color-design-outline-a2-content);
    --ui-btn-split-divider-color: var(--ui-color-design-outline-a2-content-divider);
  }

  .ui-btn.--air.--style-outline {
    --ui-btn-background: var(--ui-color-design-outline-bg);
    --ui-btn-border-color: var(--ui-color-design-outline-stroke);
    --ui-btn-border-width: var(--ui-design-outline-stroke-weight);
    --ui-btn-color: var(--ui-color-design-outline-content);
    --ui-btn-split-divider-color: var(--ui-color-design-outline-content-divider);
  }

  /* default */
  .ui-btn.--air,
  .ui-btn.--air.--style-outline-no-accent {
    --ui-btn-background: var(--ui-color-design-outline-na-bg);
    --ui-btn-border-color: var(--ui-color-design-outline-na-stroke);
    --ui-btn-border-width: var(--ui-design-outline-na-stroke-weight);
    --ui-btn-color: var(--ui-color-design-outline-na-content);
    --ui-btn-split-divider-color: var(--ui-color-design-outline-na-content-divider);
  }

  .ui-btn.--air.--style-plain-accent {
    --ui-btn-background: var(--ui-color-design-plain-a-bg);
    --ui-btn-border-color: var(--ui-color-design-plain-a-stroke);
    --ui-btn-border-width: var(--ui-design-plain-a-stroke-weight);
    --ui-btn-color: var(--ui-color-design-plain-a-content);
    --ui-btn-split-divider-color: var(--ui-color-design-plain-a-content-divider);
  }

  .ui-btn.--air.--style-plain {
    --ui-btn-background: var(--ui-color-design-plain-bg);
    --ui-btn-border-color: var(--ui-color-design-plain-stroke);
    --ui-btn-border-width: var(--ui-design-plain-stroke-weight);
    --ui-btn-color: var(--ui-color-design-plain-content);
    --ui-btn-split-divider-color: var(--ui-color-design-plain-content-divider);
  }

  .ui-btn.--air.--style-plain-no-accent {
    --ui-btn-background: var(--ui-color-design-plain-na-bg);
    --ui-btn-border-color: var(--ui-color-design-plain-na-stroke);
    --ui-btn-border-width: var(--ui-design-plain-na-stroke-weight);
    --ui-btn-color: var(--ui-color-design-plain-na-content);
    --ui-btn-split-divider-color: var(--ui-color-design-plain-na-content-divider);
  }

  .ui-btn.--air.--style-selection {
    --ui-btn-background: var(--ui-color-design-selection-bg);
    --ui-btn-border-color: var(--ui-color-design-selection-stroke);
    --ui-btn-border-width: var(--ui-design-selection-stroke-weight);
    --ui-btn-color: var(--ui-color-design-selection-content);
    --ui-btn-split-divider-color: var(--ui-color-design-selection-content-divider);
  }

  .ui-btn.--air.--style-filled-copilot {
    --ui-btn-background: var(--ui-color-design-filled-copilot-bg);
    --ui-btn-border-color: var(--ui-color-design-filled-copilot-stroke);
    --ui-btn-border-width: var(--ui-design-filled-copilot-stroke-weight);
    --ui-btn-color: var(--ui-color-design-filled-copilot-content);
    --ui-btn-split-divider-color: var(--ui-color-design-filled-copilot-content-divider);
  }

  .ui-btn.--air.--style-filled-success {
    --ui-btn-background: var(--ui-color-design-filled-success-bg);
    --ui-btn-border-color: var(--ui-color-design-filled-success-stroke);
    --ui-btn-border-width: var(--ui-design-filled-success-stroke-weight);
    --ui-btn-color: var(--ui-color-design-filled-success-content);
    --ui-btn-split-divider-color: var(--ui-color-design-filled-success-content-divider);
  }

  .ui-btn.--air.--style-filled-alert {
    --ui-btn-background: var(--ui-color-design-filled-alert-bg);
    --ui-btn-border-color: var(--ui-color-design-filled-alert-stroke);
    --ui-btn-border-width: var(--ui-design-filled-success-stroke-weight);
    --ui-btn-color: var(--ui-color-design-filled-alert-content);
    --ui-btn-split-divider-color: var(--ui-color-design-filled-alert-content-divider);
  }

  .ui-btn.--air.--style-filled-boost {
    --ui-btn-border-color: var(--ui-color-design-filled-boost-stroke);
    --ui-btn-border-width: var(--ui-design-filled-boost-stroke-weight);
    --ui-btn-color: var(--ui-color-design-filled-boost-content);
    --ui-btn-split-divider-color: var(--ui-color-design-filled-boost-content-divider);

    --hover-color-1: color-mix(in srgb, var(--ui-color-design-filled-boost-bg-gradient-1) 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
    --hover-color-2: color-mix(in srgb, var(--ui-color-design-filled-boost-bg-gradient-2) 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));
    --hover-color-3: color-mix(in srgb, var(--ui-color-design-filled-boost-bg-gradient-3) 100%, var(--ui-color-bg-state-hover-default-hex) var(--ui-color-bg-state-hover-default-opacity));

    --active-color-1: color-mix(in srgb, var(--ui-color-design-filled-boost-bg-gradient-1) 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));
    --active-color-2: color-mix(in srgb, var(--ui-color-design-filled-boost-bg-gradient-2) 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));
    --active-color-3: color-mix(in srgb, var(--ui-color-design-filled-boost-bg-gradient-3) 100%, var(--ui-color-bg-state-click-default-hex) var(--ui-color-bg-state-click-default-opacity));

    /* @see src/theme/button.ts */
    /*--ui-btn-background-gradient: radial-gradient(110.42% 110.42% at -10.42% 31.25%, var(--ui-color-design-filled-boost-bg-gradient-1) 0%, var(--ui-color-design-filled-boost-bg-gradient-2) 58.65%, var(--ui-color-design-filled-boost-bg-gradient-3) 100%);*/
    /*--ui-btn-background-gradient-hover:  radial-gradient(110.42% 110.42% at -10.42% 31.25%, var(--hover-color-1) 0%, var(--hover-color-2) 58.65%, var(--hover-color-3) 100%);*/
    /*--ui-btn-background-gradient-active: radial-gradient(110.42% 110.42% at -10.42% 31.25%, var(--active-color-1) 0%, var(--active-color-2) 58.65%, var(--active-color-3) 100%);*/
  }
  /* endregion */
  /* endregion */
}
