:root[data-theme=fluent2] {
  --neutral-s: 0%;
}
:root[data-theme=fluent2] .secondary {
  --palette-saturation: 0%;
}

:root[data-theme=fluent2],
:root[data-theme=fluent2][data-color-scheme=light] {
  --text-color: var(--neutral-color-10);
  --text-color-subtle: var(--neutral-color-8);
  --text-color-strong: var(--neutral-color-10);
  --surface-color-overlay: var(--neutral-color-0);
  --surface-color-raised: var(--neutral-color-0);
  --surface-color: var(--neutral-color-1);
  --surface-color-sunken: var(--neutral-color-2);
  --surface-color-deep: var(--neutral-color-3);
}

:root[data-theme=fluent2][data-color-scheme=dark] {
  --text-color: var(--neutral-color-0);
  --text-color-subtle: var(--neutral-color-0);
  --text-color-strong: var(--neutral-color-1);
  --surface-color-overlay: var(
    --neutral-color-9
  );
  --surface-color-raised: var(
    --neutral-color-9
  );
  --surface-color: var(--neutral-color-10);
  --surface-color-sunken: var(
    --neutral-color-9
  );
  --surface-color-deep: var(--neutral-color-10);
}

:root[data-theme=fluent2] {
  --font-family: 'Yu Gothic UI', 'Segoe UI', sans-serif;
  --font-body-size: 16px;
}

:root[data-theme=fluent2] .button {
  --button-border-width: 1px;
}
:root[data-theme=fluent2] .button.filled {
  --button-border-color: var(--button-bg-color);
  --button-hover-border-color: var(--button-hover-bg-color);
  --button-active-border-color: var(--button-active-bg-color);
  --button-focus-border-color: var(--button-focus-bg-color);
}
:root[data-theme=fluent2] .button.filled.secondary {
  --button-bg-color: var(--surface-color-overlay);
  --button-color: var(--text-color);
  --button-border-color: var(--border-color);
  --button-hover-bg-color: var(--surface-color);
  --button-hover-color: var(--button-color);
  --button-hover-border-color: var(--border-color);
  --button-active-bg-color: var(--surface-color-sunken);
  --button-active-color: var(--button-color);
  --button-active-border-color: var(--border-color);
  --button-focus-bg-color: var(--surface-color);
  --button-focus-color: var(--button-color);
  --button-focus-border-color: var(--border-color);
}
:root[data-theme=fluent2] .button:disabled {
  --button-disabled-bg-color: var(--button-bg-color);
  --button-disabled-color: var(--button-color);
  --button-disabled-border-color: var(--button-border-color);
  --button-disabled-opacity: 0.5;
}

:root[data-theme=fluent2] .form-control {
  --form-control-focus-ring-width: 0px;
  --form-control-focus-border-color: var(--border-color-strong);
  --form-control-disabled-opacity: 0.4;
  --form-control-readonly-cursor: text;
}
:root[data-theme=fluent2] .form-control:focus-visible {
  box-shadow: 0 -2px 0 0 var(--palette-default) inset;
}
:root[data-theme=fluent2] .form-control:hover:not(:disabled):not(:read-only) {
  box-shadow: 0 -1px 0 0 var(--border-color-strong) inset;
}
:root[data-theme=fluent2] .form-control.filled:focus-visible {
  box-shadow: 0 -2px 0 0 var(--palette-default) inset;
}
:root[data-theme=fluent2] .form-control.filled:hover:not(:disabled):not(:read-only) {
  box-shadow: 0 -1px 0 0 var(--border-color-strong) inset;
}
:root[data-theme=fluent2] .form-control.underline:focus-visible {
  box-shadow: 0 -2px 0 0 var(--palette-default) inset;
}
:root[data-theme=fluent2] .form-control.underline:hover:not(:disabled):not(:read-only) {
  box-shadow: 0 -1px 0 0 var(--border-color-strong) inset;
}

/*# sourceMappingURL=fluent2.css.map */