// --s = user setting with default fallback
:root {
  // main accent color
  @include fallback(accentColor--h, systemBlue--h);
  @include fallback(accentColor--s, systemBlue--s);
  @include fallback(accentColor--l, systemBlue--l);
  --s-accentColor--s: var(--u-accentColor--s, var(--g-systemBlue--s));
  --s-accentColor--l: var(--u-accentColor--l, var(--g-systemBlue--l));

  --s-accentColor--hs: var(--s-accentColor--h), var(--s-accentColor--s);
  --s-accentColor--hsl: var(--s-accentColor--hs), var(--s-accentColor--l);
  --s-accentColor: hsl(var(--s-accentColor--hsl));

  // fonts
  @include fallback(font-family-system);
  @include fallback(font-family-system-rounded);

  // selected accent color
  --s-selectedContentBackgroundColor--h: var(
    --u-accentColor--h,
    var(--g-selectedContentBackgroundColor--h)
  );
  --s-selectedContentBackgroundColor--s: var(
    --u-accentColor--s,
    var(--g-selectedContentBackgroundColor--s)
  );
  --s-selectedContentBackgroundColor--l: var(
    --u-accentColor--l,
    var(--g-selectedContentBackgroundColor--l)
  );
  --s-selectedContentBackgroundColor: hsl(
    var(--s-selectedContentBackgroundColor--h),
    var(--s-selectedContentBackgroundColor--s),
    var(--s-selectedContentBackgroundColor--l)
  );
  --s-accentColor--selected: var(--s-selectedContentBackgroundColor);

  // control accent color
  --s-controlAccentColor--h: var(
    --u-accentColor--h,
    var(--g-controlAccentColor--h)
  );
  --s-controlAccentColor--s: var(
    --u-accentColor--s,
    var(--g-controlAccentColor--s)
  );
  --s-controlAccentColor--l: var(
    --u-accentColor--l,
    var(--g-controlAccentColor--l)
  );
  --s-controlAccentColor--hsl: var(--s-controlAccentColor--h),
    var(--s-controlAccentColor--s), var(--s-controlAccentColor--l);
  --s-controlAccentColor: hsl(var(--s-controlAccentColor--hsl));
  --s-controlAccentColor--selected: var(--s-controlAccentColor);

  // sidebar
  --s-sidebar__BackgroundColor: var(
    --u-sidebar-background-color,
    var(--g-windowBackgroundColor)
  );
  --s-sidebar__label-FontSize: var(
    --u-sidebar-label-font-size,
    var(--g-font-size--1)
  );
  --s-sidebar__label-Color: var(
    --u-sidebar-label-color,
    var(--g-tertiaryLabelColor)
  );
  --s-sidebar__item-Color: var(--u-sidebar-item-color, var(--g-labelColor));
  --s-sidebar__item--selected-BackgroundColor: var(
    --u-sidebar-selected-item-color,
    var(var(--g-unemphasizedSelectedTextBackgroundColor))
  );
  --s-sidebar__icon-Color: var(--u-sidebar-icon-color, var(--s-accentColor));
  --s-sidebar__chevron-Color: var(
    --u-sidebar-chevron-color,
    var(--g-labelColor)
  );
  --s-sidebar__synchronise-Color: var(
    --u-sidebar-synchronise-color,
    var(--g-secondaryLabelColor)
  );
  --s-sidebar__synchronise-label-Color: var(
    --u-sidebar-synchronise-label-color,
    var(--g-secondaryLabelColor)
  );

  // icons
  @include fallback(font-family-icons);
  @include fallback(icon-size-factor);

  @include createSfSymbol("alarm", "􀐭");
  @include createSfSymbol("arrow-down-circle-fill", "􀁹");
  @include createSfSymbol("arrow-triangle-2-circlepath", "􀊯");
  @include createSfSymbol("arrow-up-arrow-down", "􀄬");
  @include createSfSymbol("arrow-up-circle-fill", "􀁷");
  @include createSfSymbol("arrow-up-forward-app", "􀮵");
  @include createSfSymbol("arrow-up-right-square-fill", "􀄕");
  @include createSfSymbol("bold", "􀅓");
  @include createSfSymbol("calendar", "􀉉");
  @include createSfSymbol("character", "􀀄");
  @include createSfSymbol("checkmark", "􀆅");
  @include createSfSymbol("checkmark-circle", "􀁢");
  @include createSfSymbol("checkmark-diamond", "􁁚");
  @include createSfSymbol("checkmark-square", "􀃲");
  @include createSfSymbol("chevron-backward", "􀯶");
  @include createSfSymbol("chevron-down", "􀆈");
  @include createSfSymbol("chevron-forward", "􀯻");
  @include createSfSymbol("chevron-left-slash-chevron-right", "􀙚");
  @include createSfSymbol("chevron-right", "􀆊");
  @include createSfSymbol("chevron-up-chevron-down", "􀆏");
  @include createSfSymbol("chevron-up", "􀆇");
  @include createSfSymbol("clock", "􀐫");
  @include createSfSymbol("curlybraces", "􀡅");
  @include createSfSymbol("doc-on-clipboard", "􀉃");
  @include createSfSymbol("doc-richtext", "􀉅");
  @include createSfSymbol("ellipsis", "􀍠");
  @include createSfSymbol("folder", "􀈕");
  @include createSfSymbol("highlighter", "􀦇");
  @include createSfSymbol("info-circle", "􀅴");
  @include createSfSymbol("italic", "􀅔");
  @include createSfSymbol("link", "􀉣");
  @include createSfSymbol("link-circle", "􀒠");
  @include createSfSymbol("list-bullet-indent", "􀋳");
  @include createSfSymbol("list-bullet-rectangle", "􀹆");
  @include createSfSymbol("list-bullet", "􀋲");
  @include createSfSymbol("list-number", "􀋴");
  @include createSfSymbol("magnifyingglass", "􀊫");
  @include createSfSymbol("minus", "􀅽");
  @include createSfSymbol("palette", "􀝥");
  @include createSfSymbol("paperclip", "􀉢");
  @include createSfSymbol("person-2", "􀉫");
  @include createSfSymbol("plus-circle", "􀁌");
  @include createSfSymbol("sidebar-left", "􀏚");
  @include createSfSymbol("square-and-arrow-down", "􀈄");
  @include createSfSymbol("square-and-pencil", "􀈎");
  @include createSfSymbol("square-split-2x1", "􀏠");
  @include createSfSymbol("strikethrough", "􀅖");
  @include createSfSymbol("tablecells-badge-ellipsis", "􀏥");
  @include createSfSymbol("tag", "􀋡");
  @include createSfSymbol("text-badge-checkmark", "􀋺");
  @include createSfSymbol("text-below-photo", "􀲱");
  @include createSfSymbol("text-quote", "􀋿");
  @include createSfSymbol("textformat-abc-dottedunderline", "􀅰");
  @include createSfSymbol("textformat-subscript", "􀓡");
  @include createSfSymbol("textformat-superscript", "􀓢");
  @include createSfSymbol("trash", "􀈑");
  @include createSfSymbol("underline", "􀅕");
  @include createSfSymbol("xmark-circle-fill", "􀁡");
  @include createSfSymbol("xmark", "􀆄");
}
