@use 'sass:color';

@mixin component-size {
  --aui-inline-height-l: 40px;
  --aui-inline-height-m: 32px;
  --aui-inline-height-s: 28px;
  --aui-inline-height-xs: 24px;
  --aui-inline-padding-l: 19px;
  --aui-inline-padding-m: 15px;
  --aui-inline-padding-s: 11px;
  --aui-inline-padding-xs: 7px;
  --aui-inline-padding-xxs: 5px;
  --aui-spacing-xxxxxl: 40px;
  --aui-spacing-xxxxl: 32px;
  --aui-spacing-xxxl: 24px;
  --aui-spacing-xxl: 20px;
  --aui-spacing-xl: 16px;
  --aui-spacing-l: 12px;
  --aui-spacing-m: 8px;
  --aui-spacing-s: 4px;
  --aui-spacing-xs: 2px;
  --aui-font-weight-bold: 500;
  --aui-font-weight-bolder: 600;
  --aui-font-weight-normal: 400;
  --aui-font-size-xxl: 20px;
  --aui-font-size-xl: 18px;
  --aui-font-size-l: 16px;
  --aui-font-size-m: 14px;
  --aui-font-size-s: 12px;
  --aui-line-height-xxxl: 32px;
  --aui-line-height-xxl: 28px;
  --aui-line-height-xl: 24px;
  --aui-line-height-l: 22px;
  --aui-line-height-m: 20px;
  --aui-line-height-s: 16px;
  --aui-icon-size-xxl: 24px;
  --aui-icon-size-xl: 24px;
  --aui-icon-size-l: 16px;
  --aui-icon-size-m: 16px;
  --aui-icon-size-s: 12px;
  --aui-border-radius-l: 4px;
  --aui-border-radius-m: 2px;
  --aui-form-item-width-l: 732px;
  --aui-form-item-width-m: 732px;
  --aui-form-item-width-s: 140px;
}

@function rgb-string($color) {
  @return color.red($color), color.green($color), color.blue($color);
}

@mixin light-mode {
  color-scheme: light;

  --aui-color-blue: #{rgb-string(#007af5)};
  --aui-color-b-0: #{rgb-string(#0067d0)};
  --aui-color-b-1: #{rgb-string(#268df6)};
  --aui-color-b-2: #{rgb-string(#4da2f8)};
  --aui-color-b-3: #{rgb-string(#66aff9)};
  --aui-color-b-4: #{rgb-string(#b3d7fc)};
  --aui-color-b-5: #{rgb-string(#cce4fd)};
  --aui-color-b-6: #{rgb-string(#e5f1fe)};
  --aui-color-b-7: #{rgb-string(#f2f8fe)};
  --aui-color-primary: var(--aui-color-blue);
  --aui-color-p-0: var(--aui-color-b-0);
  --aui-color-p-1: var(--aui-color-b-1);
  --aui-color-p-2: var(--aui-color-b-2);
  --aui-color-p-3: var(--aui-color-b-3);
  --aui-color-p-4: var(--aui-color-b-4);
  --aui-color-p-5: var(--aui-color-b-5);
  --aui-color-p-6: var(--aui-color-b-6);
  --aui-color-p-7: var(--aui-color-b-7);
  --aui-color-green: #{rgb-string(#00c261)};
  --aui-color-g-0: #{rgb-string(#00a552)};
  --aui-color-g-1: #{rgb-string(#26cb78)};
  --aui-color-g-2: #{rgb-string(#4cd490)};
  --aui-color-g-4: #{rgb-string(#b3eccf)};
  --aui-color-g-6: #{rgb-string(#e6f9ef)};
  --aui-color-g-7: #{rgb-string(#f2fbf6)};
  --aui-color-yellow: #{rgb-string(#f5a300)};
  --aui-color-y-0: #{rgb-string(#dc9200)};
  --aui-color-y-1: #{rgb-string(#f6b026)};
  --aui-color-y-2: #{rgb-string(#f8be4d)};
  --aui-color-y-4: #{rgb-string(#fce3b3)};
  --aui-color-y-6: #{rgb-string(#fef5e6)};
  --aui-color-y-7: #{rgb-string(#fefaf3)};
  --aui-color-red: #{rgb-string(#eb0027)};
  --aui-color-r-0: #{rgb-string(#c70021)};
  --aui-color-r-1: #{rgb-string(#ed2647)};
  --aui-color-r-2: #{rgb-string(#f14c67)};
  --aui-color-r-4: #{rgb-string(#f9b3be)};
  --aui-color-r-6: #{rgb-string(#fde6e9)};
  --aui-color-r-7: #{rgb-string(#fef3f4)};
  --aui-color-n-1: #{rgb-string(#323437)};
  --aui-color-n-2: #{rgb-string(#646669)};
  --aui-color-n-3: #{rgb-string(#7c7e81)};
  --aui-color-n-4: #{rgb-string(#96989b)};
  --aui-color-n-5: #{rgb-string(#aeb0b3)};
  --aui-color-n-6: #{rgb-string(#c8cacd)};
  --aui-color-n-7: #{rgb-string(#d4d6d9)};
  --aui-color-n-8: #{rgb-string(#edeff2)};
  --aui-color-n-9: #{rgb-string(#f7f9fc)};
  --aui-color-n-10: #{rgb-string(#fff)};
  --aui-color-origin-shadow: var(--aui-color-n-1);
  --aui-color-popper-bg: var(--aui-color-n-10);
  --aui-color-button-bg: var(--aui-color-n-9);
  --aui-color-main-bg: var(--aui-color-n-9);
  --aui-color-divider: var(--aui-color-n-8);
  --aui-color-border: var(--aui-color-n-7);
  --aui-color-main-text: var(--aui-color-n-1);
  --aui-color-secondary-text: var(--aui-color-n-2);
  --aui-color-help-text: var(--aui-color-n-4);
  --aui-color-disabled-text: var(--aui-color-n-6);
  --aui-color-placeholder-text: var(--aui-color-n-6);
}

@mixin dark-mode {
  color-scheme: dark;

  --aui-color-blue: #{rgb-string(#3d8eff)};
  --aui-color-b-0: #{rgb-string(#3674cc)};
  --aui-color-b-1: #{rgb-string(#6daaff)};
  --aui-color-b-2: #{rgb-string(#356fc1)};
  --aui-color-b-3: #{rgb-string(#3265ad)};
  --aui-color-b-4: #{rgb-string(#2f558f)};
  --aui-color-b-5: #{rgb-string(#283651)};
  --aui-color-b-6: #{rgb-string(#2a4066)};
  --aui-color-b-7: #{rgb-string(#2c4a7a)};
  --aui-color-primary: var(--aui-color-blue);
  --aui-color-p-0: var(--aui-color-b-0);
  --aui-color-p-1: var(--aui-color-b-1);
  --aui-color-p-2: var(--aui-color-b-2);
  --aui-color-p-3: var(--aui-color-b-3);
  --aui-color-p-4: var(--aui-color-b-4);
  --aui-color-p-5: var(--aui-color-b-5);
  --aui-color-p-6: var(--aui-color-b-6);
  --aui-color-p-7: var(--aui-color-b-7);
  --aui-color-green: #{rgb-string(#11b671)};
  --aui-color-g-0: #{rgb-string(#159261)};
  --aui-color-g-1: #{rgb-string(#4cc894)};
  --aui-color-g-2: #{rgb-string(#168b5d)};
  --aui-color-g-4: #{rgb-string(#1b674e)};
  --aui-color-g-6: #{rgb-string(#1f4a42)};
  --aui-color-g-7: #{rgb-string(#1c5848)};
  --aui-color-yellow: #{rgb-string(#edac2c)};
  --aui-color-y-0: #{rgb-string(#ba8a2d)};
  --aui-color-y-1: #{rgb-string(#f1c060)};
  --aui-color-y-2: #{rgb-string(#b0842d)};
  --aui-color-y-4: #{rgb-string(#7e622f)};
  --aui-color-y-6: #{rgb-string(#564831)};
  --aui-color-y-7: #{rgb-string(#695530)};
  --aui-color-red: #{rgb-string(#e2324f)};
  --aui-color-r-0: #{rgb-string(#b22f48)};
  --aui-color-r-1: #{rgb-string(#e9657b)};
  --aui-color-r-2: #{rgb-string(#a82e46)};
  --aui-color-r-4: #{rgb-string(#792b3f)};
  --aui-color-r-6: #{rgb-string(#532939)};
  --aui-color-r-7: #{rgb-string(#652a3c)};
  --aui-color-n-1: #{rgb-string(#eeeff3)};
  --aui-color-n-2: #{rgb-string(#c8c9cd)};
  --aui-color-n-3: #{rgb-string(#b8bac2)};
  --aui-color-n-4: #{rgb-string(#989aa2)};
  --aui-color-n-5: #{rgb-string(#90939f)};
  --aui-color-n-6: #{rgb-string(#787b87)};
  --aui-color-n-7: #{rgb-string(#5c5f6b)};
  --aui-color-n-8: #{rgb-string(#434652)};
  --aui-color-n-9: #{rgb-string(#181b27)};
  --aui-color-n-10: #{rgb-string(#242733)};
  --aui-color-origin-shadow: var(--aui-color-n-9);
  --aui-color-popper-bg: #{rgb-string(#383b47)};
  --aui-color-button-bg: #{rgb-string(#383b47)};
  --aui-color-main-bg: var(--aui-color-n-9);
  --aui-color-divider: var(--aui-color-n-8);
  --aui-color-border: var(--aui-color-n-7);
  --aui-color-main-text: var(--aui-color-n-1);
  --aui-color-secondary-text: var(--aui-color-n-2);
  --aui-color-help-text: var(--aui-color-n-4);
  --aui-color-disabled-text: var(--aui-color-n-6);
  --aui-color-placeholder-text: var(--aui-color-n-6);
}