@use '@acorex/styles/mixins' as mixin;



:root,
.ax-light {
  /* Sizing and Typography */
  --ax-sys-body-font-size: 1rem;
  --ax-sys-size-base: 2.5rem;
  --ax-sys-transition-duration: 150ms;
  --ax-sys-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --ax-sys-border-radius: 0.5rem;

  --ax-sys-color-body-text: 0, 0, 0;
  --ax-sys-color-input-text: 0, 0, 0;

  // Brand Colors
  --axp-brand-color: var(--ax-sys-color-primary-surface);
  --axp-on-brand-color: var(--ax-sys-color-on-primary-surface);

  //
  .cdk-overlay-dark-backdrop {
    background: rgba(var(--ax-sys-color-dark), 0.5);
  }

  @include mixin.scroll-bar();
}

.ax-dark {
  --ax-sys-color-body-text: 255, 255, 255;

  .cdk-overlay-dark-backdrop {
    background: rgba(var(--ax-sys-color-light), 0.2);
  }

  @include mixin.scroll-bar();
}