/* FluentUI (Fluent 2 web, light/dark). Segoe UI where available, otherwise the platform font, exactly like Fluent itself. */

:root {
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground6: #e6e6e6;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke1Hover: #c7c7c7;
  --colorNeutralStroke1Pressed: #b3b3b3;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStrokeAccessible: #616161;
  --colorNeutralStrokeAccessibleHover: #575757;
  --colorSubtleBackgroundHover: #f5f5f5;
  --colorSubtleBackgroundPressed: #e0e0e0;
  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0c3b5e;
  --colorBrandBackground2: #ebf3fc;
  --colorBrandForeground1: #0f6cbd;
  --colorBrandForeground2: #115ea3;
  --colorBrandStroke2: #b4d6fa;
  --colorCompoundBrandBackground: #0f6cbd;
  --colorCompoundBrandBackgroundHover: #115ea3;
  --colorStrokeFocus2: #000000;
  --shadow4: 0 0 2px rgb(0 0 0 / 0.12), 0 2px 4px rgb(0 0 0 / 0.14);
  --shadow8: 0 0 2px rgb(0 0 0 / 0.12), 0 4px 8px rgb(0 0 0 / 0.14);
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);

  --icon-size: 20px;
  --icon-stroke: 1.5;
  --row-gap: 8px;
  --chevron-size: 20px;
  --chevron-right: 8px;
  --chevron-color: var(--colorNeutralForeground3);

  --name-buttons: "Button · ToggleButton";
  --name-form: "Field · Input · Select · Checkbox";
  --name-switch: "Switch";
  --name-meters: "Slider · ProgressBar";
  --name-tabs: "TabList";
  --name-profile: "Card · Avatar · Badge";
  --name-filters: "Tag · RadioGroup";
  --name-toast: "Toast";
}

:root[data-theme="dark"] {
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #d6d6d6;
  --colorNeutralForeground3: #adadad;
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground1Hover: #3d3d3d;
  --colorNeutralBackground1Pressed: #1f1f1f;
  --colorNeutralBackground3: #141414;
  --colorNeutralBackground6: #333333;
  --colorNeutralStroke1: #666666;
  --colorNeutralStroke1Hover: #757575;
  --colorNeutralStroke1Pressed: #6b6b6b;
  --colorNeutralStroke2: #525252;
  --colorNeutralStrokeAccessible: #adadad;
  --colorNeutralStrokeAccessibleHover: #bdbdbd;
  --colorSubtleBackgroundHover: #383838;
  --colorSubtleBackgroundPressed: #2e2e2e;
  --colorBrandBackground: #115ea3;
  --colorBrandBackgroundHover: #0f6cbd;
  --colorBrandBackgroundPressed: #0c3b5e;
  --colorBrandBackground2: #082338;
  --colorBrandForeground1: #479ef5;
  --colorBrandForeground2: #62abf5;
  --colorBrandStroke2: #0e4775;
  --colorCompoundBrandBackground: #479ef5;
  --colorCompoundBrandBackgroundHover: #62abf5;
  --colorStrokeFocus2: #ffffff;
  --shadow4: 0 0 2px rgb(0 0 0 / 0.24), 0 2px 4px rgb(0 0 0 / 0.28);
  --shadow8: 0 0 2px rgb(0 0 0 / 0.24), 0 4px 8px rgb(0 0 0 / 0.28);
}

body {
  color: var(--colorNeutralForeground1);
  font: 400 14px/20px "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
}

:focus-visible {
  outline: 2px solid var(--colorStrokeFocus2);
  outline-offset: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 4px;
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow4);
}

.card--flush {
  gap: 0;
  padding: 0;
}

.title {
  font-weight: 600;
}

.meta {
  color: var(--colorNeutralForeground3);
  font-size: 12px;
  line-height: 16px;
}

/* ---------- Buttons ---------- */

.btn {
  gap: 6px;
  min-width: 96px;
  height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-radius: 4px;
  background: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);
  font-weight: 600;
  transition: background-color 0.1s var(--curveEasyEase), border-color 0.1s var(--curveEasyEase);
}

.btn:hover {
  border-color: var(--colorNeutralStroke1Hover);
  background: var(--colorNeutralBackground1Hover);
}

.btn:active {
  border-color: var(--colorNeutralStroke1Pressed);
  background: var(--colorNeutralBackground1Pressed);
}

.btn--primary {
  border-color: transparent;
  background: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
}

.btn--primary:hover {
  border-color: transparent;
  background: var(--colorBrandBackgroundHover);
}

.btn--primary:active {
  border-color: transparent;
  background: var(--colorBrandBackgroundPressed);
}

.btn--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--colorNeutralForeground2);
}

.btn--ghost:hover {
  border-color: transparent;
  background: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground1);
}

.btn[aria-pressed="true"] {
  border-color: var(--colorNeutralStroke1);
  background: var(--colorNeutralBackground1Pressed);
}

.icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--colorNeutralForeground2);
}

.icon-btn:hover {
  background: var(--colorSubtleBackgroundHover);
  color: var(--colorNeutralForeground1);
}

.icon-btn[aria-pressed="true"] {
  color: var(--colorBrandForeground1);
}

.icon-btn[aria-pressed="true"] .icon {
  fill: currentColor;
}

/* ---------- Switch ---------- */

.list-row {
  min-height: 32px;
}

.switch {
  width: 40px;
  height: 20px;
  border: 1px solid var(--colorNeutralStrokeAccessible);
  border-radius: 10px;
  background: transparent;
  transition: background-color 0.2s var(--curveEasyEase), border-color 0.2s var(--curveEasyEase);
}

.switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--colorNeutralStrokeAccessible);
  transition: translate 0.2s var(--curveEasyEase), background-color 0.2s var(--curveEasyEase);
}

.switch:hover {
  border-color: var(--colorNeutralStrokeAccessibleHover);
}

.switch:hover::before {
  background: var(--colorNeutralStrokeAccessibleHover);
}

.switch:checked {
  border-color: transparent;
  background: var(--colorCompoundBrandBackground);
}

.switch:checked:hover {
  background: var(--colorCompoundBrandBackgroundHover);
}

.switch:checked::before {
  background: var(--colorNeutralForegroundOnBrand);
  translate: 20px 0;
}

/* ---------- Field, input, select ---------- */

.field {
  gap: 4px;
}

.input,
.select select {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStrokeAccessible);
  border-radius: 4px;
  outline: 0;
  background: var(--colorNeutralBackground1);
}

.select select {
  padding-right: 32px;
}

.input:hover,
.select select:hover {
  border-color: var(--colorNeutralStroke1Hover);
  border-bottom-color: var(--colorNeutralStrokeAccessibleHover);
}

.input:focus,
.select select:focus {
  border-bottom-color: var(--colorCompoundBrandBackground);
  box-shadow: inset 0 -1px 0 var(--colorCompoundBrandBackground);
}

/* ---------- Checkbox, radio ---------- */

.check {
  gap: 8px;
  min-height: 32px;
  padding-left: 8px;
}

.card > .check {
  margin-top: -4px;
}

.checkbox {
  width: 16px;
  height: 16px;
  border: 1px solid var(--colorNeutralStrokeAccessible);
  border-radius: 2px;
}

.checkbox:hover {
  border-color: var(--colorNeutralStrokeAccessibleHover);
}

.checkbox:checked {
  border-color: var(--colorCompoundBrandBackground);
  background: var(--colorCompoundBrandBackground);
}

.checkbox:checked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--colorNeutralForegroundOnBrand);
  mask: var(--mask-check-thin) center / 12px no-repeat;
}

.radio {
  width: 16px;
  height: 16px;
  border: 1px solid var(--colorNeutralStrokeAccessible);
  border-radius: 50%;
}

.radio:hover {
  border-color: var(--colorNeutralStrokeAccessibleHover);
}

.radio:checked {
  border-color: var(--colorCompoundBrandBackground);
  background: radial-gradient(circle, var(--colorCompoundBrandBackground) 0 4.6px, transparent 5px);
}

.group__label {
  margin-bottom: 2px;
}

/* ---------- Tags ---------- */

.chip {
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground2);
}

.chip:hover {
  background: var(--colorNeutralBackground1Pressed);
}

.chip[aria-pressed="true"] {
  border-color: var(--colorBrandStroke2);
  background: var(--colorBrandBackground2);
  color: var(--colorBrandForeground2);
}

/* ---------- Slider, progress bar ---------- */

.meter {
  gap: 2px;
}

.slider {
  height: 32px;
}

.slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--colorCompoundBrandBackground) var(--val), var(--colorNeutralStrokeAccessible) var(--val));
}

.slider::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--colorCompoundBrandBackground);
  box-shadow: inset 0 0 0 4px var(--colorNeutralBackground1), 0 0 0 1px var(--colorNeutralStroke1);
  -webkit-appearance: none;
}

.slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--colorNeutralStrokeAccessible);
}

.slider::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--colorCompoundBrandBackground);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--colorCompoundBrandBackground);
  box-shadow: inset 0 0 0 4px var(--colorNeutralBackground1), 0 0 0 1px var(--colorNeutralStroke1);
}

.progress {
  height: 2px;
  border-radius: 1px;
  background: var(--colorNeutralBackground6);
}

.progress::-webkit-progress-bar {
  border-radius: 1px;
  background: var(--colorNeutralBackground6);
}

.progress::-webkit-progress-value {
  border-radius: 1px;
  background: var(--colorCompoundBrandBackground);
}

.progress::-moz-progress-bar {
  border-radius: 1px;
  background: var(--colorCompoundBrandBackground);
}

/* ---------- TabList ---------- */

.tabs {
  padding: 0 2px;
}

.tab {
  position: relative;
  padding: 12px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--colorNeutralForeground2);
}

.tab:hover {
  color: var(--colorNeutralForeground1);
}

.tab::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 3px;
  border-radius: 9999px;
  background: transparent;
}

.tab:hover::after {
  background: var(--colorNeutralStroke1Hover);
}

.tab[aria-selected="true"] {
  color: var(--colorNeutralForeground1);
  font-weight: 600;
}

.tab[aria-selected="true"]::after {
  background: var(--colorCompoundBrandBackground);
}

.tabpanel {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.token__chip {
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--colorNeutralStroke2);
}

.token__chip[data-token="primary"] { background: var(--colorBrandBackground); }
.token__chip[data-token="surface"] { background: var(--colorNeutralBackground1); }
.token__chip[data-token="outline"] { background: var(--colorNeutralStroke1); }
code[data-token="primary"]::before { content: "colorBrandBackground"; }
code[data-token="surface"]::before { content: "colorNeutralBackground1"; }
code[data-token="outline"]::before { content: "colorNeutralStroke1"; }

.type-sample {
  font-size: 28px;
  font-weight: 600;
  line-height: 36px;
}

[data-type-name]::before {
  content: "Segoe UI · Body 1 14/20";
}

.shape-sample {
  width: 72px;
  height: 48px;
  border-radius: 4px;
  background: var(--colorBrandBackground2);
  box-shadow: inset 0 0 0 1px var(--colorBrandStroke2);
}

[data-shape-name]::before {
  content: "borderRadiusMedium · 4px";
}

/* ---------- Card, avatar, badge ---------- */

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--colorBrandBackground);
  color: var(--colorNeutralForegroundOnBrand);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

.badge--subtle {
  border-color: var(--colorBrandStroke2);
  background: var(--colorBrandBackground2);
  color: var(--colorBrandForeground2);
}

/* ---------- Toast ---------- */

.toast {
  padding: 12px;
  border-radius: 4px;
  background: var(--colorNeutralBackground1);
  box-shadow: var(--shadow8);
  font-weight: 600;
}

.toast__action {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--colorBrandForeground1);
  font-weight: 400;
}

.toast__action:hover {
  color: var(--colorBrandForeground2);
  text-decoration: underline;
}