/* ============================================================
   Grebob Design System — grebob.css
   Purpose: shared scaffold/helper + component base for Intuvio Imaging HTML mockups.
   Intent: Grebob component base + clinical trial imaging workspace scaffold.
   Scope: only the ranges confirmed in docs/08-디자인컴포넌트지침.md are implemented here.
   Note: unresolved or Figma-exact variants stay as TODO instead of being re-designed.
   ============================================================ */

/* ============================================================
   Shared Selector Conventions
   - Root selectors use `.Gr<ComponentName>`.
   - Slots use `.Gr<ComponentName>__slot`.
   - Prop/state selectors use `data-variant`, `data-color`, `data-size`, `data-state`,
     `data-open`, `data-active`, `data-selected`, `data-disabled`, `data-error`,
     `data-readonly`, and ARIA equivalents where applicable.
   - `GrTypography` is a thin wrapper only. Typography sizing/weight must come from
     `typography.css` classes such as `.typo-header-03`.
   - All colors in this file come from `tokens.css`.
   ============================================================ */

/* 3. shell / navigation scaffold */

:root {
  --gr-z-base: 0;
  --gr-z-sticky: 100;
  --gr-z-dropdown: 200;
  --gr-z-drawer: 300;
  --gr-z-modal: 400;
  --gr-z-tooltip: 500;
  --gr-z-notification: 600;

  --gr-topbar-height: 64px;
  --gr-navigation-width: 240px; /* TODO: replace with spacing token when available */
  --gr-dialog-max-inline-size-small: 480px; /* TODO: confirm Figma-exact dialog width */
  --gr-dialog-max-inline-size-medium: 640px; /* TODO: confirm Figma-exact dialog width */
  --gr-dialog-max-inline-size-large: 800px; /* TODO: confirm Figma-exact dialog width */
  --gr-shell-sticky-offset: calc(var(--gr-topbar-height) + var(--spacing-16));
  --gr-sticky-row-offset: calc(var(--gr-shell-sticky-offset) + var(--spacing-8));
  --gr-split-side-width: 360px; /* TODO: replace with spacing token when available */
  --gr-split-side-width-narrow: 320px; /* TODO: replace with spacing token when available */
  --gr-split-side-width-wide: 400px; /* TODO: replace with spacing token when available */
  --gr-select-menu-max-block-size: calc(var(--spacing-64) * 4 + var(--spacing-8));
  --gr-select-menu-inline-size: calc(var(--spacing-64) * 4);
  --gr-select-menu-inline-size-wide: calc(var(--spacing-64) * 5);
  --gr-select-menu-inline-size-narrow: calc(var(--spacing-64) * 3);
  --gr-filter-search-min-inline-size: calc(var(--spacing-64) * 5);
  --gr-filter-field-min-inline-size: calc(var(--spacing-32) * 7);
  --gr-filter-meta-min-inline-size: calc(var(--spacing-64) * 5);
}

:where(
  .GrShell,
  .GrTopBar,
  .GrNavigationBar,
  .GrBreadCrumbs,
  .GrStack,
  .GrTypography,
  .GrTextField,
  .GrSelect,
  .GrButton,
  .GrIconButton,
  .GrIcon,
  .GrChip,
  .GrBadge,
  .GrTable,
  .GrTab,
  .GrPagination,
  .GrDialog,
  .GrSnackbar,
  .GrKpiCard,
  .GrSummaryRow,
  .GrProgressBar,
  .GrActivityList,
  .GrContextMeta
),
:where(
  .GrShell,
  .GrTopBar,
  .GrNavigationBar,
  .GrBreadCrumbs,
  .GrStack,
  .GrTypography,
  .GrTextField,
  .GrSelect,
  .GrButton,
  .GrIconButton,
  .GrIcon,
  .GrChip,
  .GrBadge,
  .GrTable,
  .GrTab,
  .GrPagination,
  .GrDialog,
  .GrSnackbar,
  .GrKpiCard,
  .GrSummaryRow,
  .GrProgressBar,
  .GrActivityList,
  .GrContextMeta
) * {
  box-sizing: border-box;
}

:where(.GrShell) {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-inline-size: 0;
  background: var(--bg-010);
  color: var(--color-grey-080);
}

:where(.GrPageRoot) {
  margin: 0;
  min-block-size: 100vh;
  background: var(--bg-010);
  color: var(--color-grey-080);
}

:where(.GrShell__body, .GrShell [data-shell-body]) {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
}

.GrShell[data-shell="full"] :where(.GrShell__body, [data-shell-body]),
.GrShell[data-shell="viewer"] :where(.GrShell__body, [data-shell-body]) {
  flex-direction: row;
  align-items: stretch;
}

.GrShell[data-shell="lite"] :where(.GrShell__body, [data-shell-body]),
.GrShell[data-shell="none"] :where(.GrShell__body, [data-shell-body]) {
  flex-direction: column;
}

:where(.GrShell__content, .GrShell [data-shell-content]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--spacing-32);
  background: var(--bg-010);
}

.GrShell[data-shell="full"] :where(.GrShell__content, [data-shell-content]) {
  background:
    linear-gradient(180deg, var(--bg-020) 0, var(--bg-010) 176px),
    radial-gradient(circle at 100% 0, var(--bg-020) 0, transparent 28%),
    var(--bg-010);
}

.GrShell[data-shell="viewer"] :where(.GrShell__content, [data-shell-content]) {
  padding: 0;
}

.GrShell[data-shell="none"] :where(.GrShell__content, [data-shell-content]) {
  align-items: center;
  justify-content: center;
}

:where(.GrShell__canvas, .GrShell [data-shell-canvas]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  min-inline-size: 0;
  inline-size: 100%;
}

:where(.GrShell__surface, .GrShell [data-shell-surface]) {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  inline-size: 100%;
}

:where(.GrShell__contentFrame, .GrShell [data-shell-frame]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
  inline-size: 100%;
}

:where(.GrShell__pageSlot, .GrShell [data-shell-page-slot]) {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  inline-size: 100%;
}

:where(.GrShell__breadcrumbSlot, .GrShell [data-shell-breadcrumb-slot]) {
  display: flex;
  min-inline-size: 0;
  inline-size: 100%;
}

.GrShell[data-shell="none"] :where(.GrShell__surface, [data-shell-surface]) {
  inline-size: min(100%, calc(var(--spacing-64) * 20));
}

:where(.GrShell__viewer, .GrShell [data-shell-viewer]) {
  flex: 7 1 0;
  min-inline-size: 0;
  min-block-size: 0;
  background: var(--surface-default);
}

:where(.GrShell__panel, .GrShell [data-shell-panel]) {
  flex: 3 1 0;
  min-inline-size: 0;
  min-block-size: 0;
  background: var(--bg-020);
  border-inline-start: 1px solid var(--color-grey-025);
}

.GrShell[data-shell="viewer"] :where(.GrShell__viewer, [data-shell-viewer]),
.GrShell[data-shell="viewer"] :where(.GrShell__panel, [data-shell-panel]) {
  display: flex;
  flex-direction: column;
}

:where(.GrTopBar) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--gr-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
  min-block-size: var(--gr-topbar-height);
  padding-inline: var(--spacing-32);
  background: var(--bg-050);
  border-block-end: 1px solid var(--color-grey-025);
}

:where(.GrTopBar__brand, .GrTopBar__console, .GrTopBar__console-nav, .GrTopBar__utility, .GrTopBar__actions) {
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  min-inline-size: 0;
}

:where(.GrTopBar__console, .GrTopBar__console-nav) {
  flex: 1 1 auto;
}

:where(.GrTopBar__utility, .GrTopBar__actions) {
  margin-inline-start: auto;
  justify-content: flex-end;
  flex-wrap: wrap;
}

:where(.GrTopBar__consoleItem, .GrTopBar__console-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-block-size: var(--gr-topbar-height);
  margin: 0;
  border: none;
  padding-inline: var(--spacing-8);
  border-block-end: 2px solid transparent;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-grey-080);
  text-decoration: none;
  white-space: nowrap;
  font: inherit;
  outline: none;
  cursor: pointer;
}

:where(.GrTopBar__consoleItem, .GrTopBar__console-link):is(:hover, :focus-visible),
:where(.GrTopBar__consoleItem, .GrTopBar__console-link)[data-state="hovered"] {
  color: var(--color-grey-100);
}

:where(.GrTopBar__consoleItem, .GrTopBar__console-link)[data-active="true"],
:where(.GrTopBar__consoleItem, .GrTopBar__console-link)[aria-current="page"] {
  color: var(--maven-blue-bright);
  border-block-end-color: var(--maven-blue-bright);
}

:where(.GrShellBrandMark) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: calc(var(--spacing-32) + var(--spacing-8));
  block-size: calc(var(--spacing-32) + var(--spacing-8));
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
  background: var(--surface-default);
  flex: 0 0 auto;
}

:where(.GrNavigationBar) {
  position: sticky;
  inset-block-start: var(--gr-topbar-height);
  z-index: var(--gr-z-sticky);
  display: flex;
  flex: 0 0 var(--gr-navigation-width);
  flex-direction: column;
  gap: var(--spacing-24);
  inline-size: var(--gr-navigation-width);
  min-inline-size: var(--gr-navigation-width);
  block-size: calc(100vh - var(--gr-topbar-height));
  padding: var(--spacing-16);
  overflow: auto;
  background: var(--bg-020);
  border-inline-end: 1px solid var(--color-grey-025);
}

.GrNavigationBar[data-size="S"] {
  gap: var(--spacing-16);
  padding-inline: var(--spacing-12);
}

:where(.GrNavigationBar__head) {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  min-inline-size: 0;
  padding-block-end: var(--spacing-16);
  border-block-end: 1px solid var(--color-grey-025);
}

:where(.GrNavigationBar__list, .GrNavigationBar__group, .GrNavigationBar__sublist) {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

:where(.GrNavigationBar__list) {
  gap: var(--spacing-4);
}

:where(.GrNavigationBar__group) {
  gap: var(--spacing-8);
}

:where(.GrNavigationBar__sublist) {
  gap: var(--spacing-4);
  padding-inline-start: var(--spacing-12);
}

:where(.GrNavigationBar__item) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--spacing-12);
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--spacing-40);
  margin: 0;
  padding: var(--spacing-10) var(--spacing-12);
  border: none;
  border-inline-start: 2px solid transparent;
  border-radius: var(--radius-8);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
  color: var(--color-grey-080);
  font: inherit;
  text-align: left;
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

:where(.GrNavigationBar__item):is(:hover, :focus-visible),
:where(.GrNavigationBar__item)[data-state="hovered"] {
  background: var(--surface-default);
  color: var(--color-grey-100);
}

:where(.GrNavigationBar__item)[data-active="true"],
:where(.GrNavigationBar__item)[data-state="active"],
:where(.GrNavigationBar__item)[data-selected="true"],
:where(.GrNavigationBar__item)[aria-current="page"] {
  background: var(--surface-default);
  border-inline-start-color: var(--maven-blue-bright);
  color: var(--color-grey-100);
}

:where(.GrNavigationBar__backButton) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-block-size: var(--spacing-40);
  padding: var(--spacing-8) var(--spacing-12);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-8);
  background: var(--surface-default);
  color: var(--color-grey-070);
  cursor: pointer;
}

:where(.GrNavigationBar__version) {
  margin-block-start: auto;
  padding-block-start: var(--spacing-16);
  border-block-start: 1px solid var(--color-grey-025);
  color: var(--color-grey-060);
}

.GrShell[data-shared-shell-root="ops-full"] {
  --gr-topbar-height: 72px;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-24);
  min-inline-size: 0;
  min-block-size: var(--gr-topbar-height);
  padding-block: var(--spacing-12);
  background: var(--color-darknavy-080);
  border-block-end: 1px solid var(--color-darknavy-060);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__brand) {
  flex: 0 0 auto;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrShellBrandMark) {
  border-color: var(--color-white);
  background: var(--color-white);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrShellBrandMark .GrTypography) {
  color: var(--maven-blue-bright);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console) {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console-nav) {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-4);
  min-inline-size: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console-nav::-webkit-scrollbar) {
  display: none;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__actions) {
  margin-inline-start: 0;
  justify-content: flex-end;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: var(--spacing-16);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__context) {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-inline-size: 0;
  white-space: nowrap;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__utility) {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  flex-wrap: nowrap;
  margin-inline-start: var(--spacing-16);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__language) {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--spacing-6);
  min-inline-size: 0;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__languageLabel) {
  color: var(--color-grey-040);
  white-space: nowrap;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__languageTrigger) {
  inline-size: auto;
  flex: 0 0 auto;
  min-block-size: auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-white);
  gap: var(--spacing-4);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__languageTrigger):is(:hover, :focus-visible),
.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__languageTrigger)[data-state="hovered"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.GrShell[data-shared-shell-root="ops-full"] .GrTopBar__language[data-open="true"] :where(.GrTopBar__languageTrigger) {
  border-color: transparent;
  box-shadow: none;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__language .GrSelect__summary) {
  gap: var(--spacing-4);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__language .GrSelect__summaryCopy) {
  flex: 0 0 auto;
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__language .GrSelect__caret) {
  color: var(--color-white);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__languageMenu) {
  inset-inline-start: auto;
  inset-inline-end: 0;
  min-inline-size: calc(var(--spacing-64) * 3);
  inline-size: calc(var(--spacing-64) * 3);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console-link) {
  min-block-size: calc(var(--gr-topbar-height) - var(--spacing-24));
  padding-inline: var(--spacing-10);
  border-block-end: 0;
  border-radius: 0;
  color: var(--color-grey-040);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console-link):is(:hover, :focus-visible),
.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console-link)[data-state="hovered"] {
  background: transparent;
  color: var(--color-white);
  box-shadow: inset 0 -1px 0 var(--color-darknavy-050);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console-link)[data-active="true"],
.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__console-link)[aria-current="page"] {
  background: transparent;
  color: var(--color-white);
  box-shadow: inset 0 -2px 0 var(--maven-blue-bright);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__utility .GrIconButton) {
  color: var(--color-grey-020);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__utility .GrIconButton):is(:hover, :focus-visible),
.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__utility .GrIconButton)[data-state="hovered"] {
  background: var(--color-darknavy-070);
  border-color: var(--color-darknavy-060);
  color: var(--color-white);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__utility .GrIconButton[data-shell-profile-trigger="true"]) {
  border-color: var(--color-grey-080);
  background: var(--color-darknavy-070);
  color: var(--color-white);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrTopBar__utility .GrIconButton[data-shell-notification-trigger="true"]) {
  border-color: var(--color-blue-060);
  background: var(--color-darknavy-070);
  color: var(--color-white);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar) {
  inset-block-start: var(--gr-topbar-height);
  block-size: calc(100vh - var(--gr-topbar-height));
  gap: var(--spacing-20);
  padding-block: var(--spacing-20);
  background: var(--color-grey-090);
  border-inline-end: 1px solid var(--color-grey-080);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__head) {
  padding-block-end: var(--spacing-16);
  border-block-end: 1px solid var(--color-grey-080);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__item) {
  border-radius: var(--radius-10);
  color: var(--color-grey-020);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__item):is(:hover, :focus-visible),
.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__item)[data-state="hovered"] {
  background: var(--color-grey-080);
  color: var(--color-white);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__item)[data-active="true"],
.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__item)[data-state="active"],
.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__item)[data-selected="true"],
.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__item)[aria-current="page"] {
  background: var(--color-darknavy-060);
  border-inline-start-color: var(--maven-blue-bright);
  color: var(--color-white);
}

.GrShell[data-shared-shell-root="ops-full"] :where(.GrNavigationBar__version) {
  border-block-start: 1px solid var(--color-grey-080);
  color: var(--color-grey-050);
}

:where(.GrBreadCrumbs) {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  color: var(--color-grey-060);
}

:where(.GrBreadCrumbs__list) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  min-inline-size: 0;
  list-style: none;
}

:where(.GrBreadCrumbs__item) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  min-inline-size: 0;
}

:where(.GrBreadCrumbs__item) + :where(.GrBreadCrumbs__item)::before {
  content: "/";
  color: var(--color-grey-050);
}

:where(.GrBreadCrumbs__item:last-child) {
  color: var(--color-grey-090);
}

:where(.GrBreadCrumbs__link) {
  color: inherit;
  text-decoration: none;
}

.GrBreadCrumbs[data-size="small"] :where(.GrBreadCrumbs__list, .GrBreadCrumbs__item) {
  gap: var(--spacing-4);
}

.GrBreadCrumbs[data-type="text-collapsed"] :where(.GrBreadCrumbs__item:not(:first-child):not(:last-child)) {
  display: none;
}

.GrBreadCrumbs[data-type="text-collapsed"] :where(.GrBreadCrumbs__item:last-child)::before {
  content: "... /";
  color: var(--color-grey-050);
}

/* 4. layout helpers */

:where(.GrStack) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
  min-block-size: 0;
}

.GrStack[data-direction="row"] {
  flex-direction: row;
}

.GrStack[data-direction="column"] {
  flex-direction: column;
}

.GrStack[data-align="start"] {
  align-items: flex-start;
}

.GrStack[data-align="center"] {
  align-items: center;
}

.GrStack[data-align="end"] {
  align-items: flex-end;
}

.GrStack[data-align="stretch"] {
  align-items: stretch;
}

.GrStack[data-justify="start"] {
  justify-content: flex-start;
}

.GrStack[data-justify="center"] {
  justify-content: center;
}

.GrStack[data-justify="end"] {
  justify-content: flex-end;
}

.GrStack[data-justify="space-between"] {
  justify-content: space-between;
}

.GrStack[data-wrap="wrap"] {
  flex-wrap: wrap;
}

.GrStack[data-wrap="nowrap"] {
  flex-wrap: nowrap;
}

.GrStack[data-gap="4"] {
  gap: var(--spacing-4);
}

.GrStack[data-gap="8"] {
  gap: var(--spacing-8);
}

.GrStack[data-gap="12"] {
  gap: var(--spacing-12);
}

.GrStack[data-gap="16"] {
  gap: var(--spacing-16);
}

.GrStack[data-gap="24"] {
  gap: var(--spacing-24);
}

.GrStack[data-gap="32"] {
  gap: var(--spacing-32);
}

.GrStack[data-padding="8"] {
  padding: var(--spacing-8);
}

.GrStack[data-padding="16"] {
  padding: var(--spacing-16);
}

.GrStack[data-padding="24"] {
  padding: var(--spacing-24);
}

.GrStack[data-padding="32"] {
  padding: var(--spacing-32);
}

[data-section] {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
  padding: var(--spacing-16);
  background: var(--bg-020);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-8);
  position: relative;
}

[data-section][data-density="dense"] {
  gap: var(--spacing-12);
  padding: var(--spacing-12);
}

[data-elevation="0"] {
  box-shadow: none;
}

[data-elevation="1"] {
  box-shadow: var(--shadow-card);
}

[data-elevation="2"] {
  box-shadow: var(--shadow-dropdown);
}

[data-elevation="3"] {
  box-shadow: var(--shadow-modal);
}

:where(.GrPageContainer, [data-page-container="true"]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  min-inline-size: 0;
  inline-size: 100%;
}

:where(.GrPageContainer, [data-page-container="true"])[data-density="dense"] {
  gap: var(--spacing-16);
}

:where(.GrSectionHeader, [data-section-header]) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-16);
  flex-wrap: wrap;
  min-inline-size: 0;
  padding-block-end: var(--spacing-12);
  border-block-end: 1px solid var(--color-grey-025);
}

:where(.GrSectionHeader__main, .GrSectionHeader__meta, [data-section-header-main], [data-section-meta]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-inline-size: 0;
}

:where(.GrSectionHeader__meta, [data-section-meta]) {
  color: var(--color-grey-060);
}

:where(.GrSectionBody, [data-section-body]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
}

:where(.GrSectionBody, [data-section-body])[data-density="dense"] {
  gap: var(--spacing-12);
}

:where(.GrFilterBar, [data-filter-bar="true"]) {
  --gr-filter-gap-block: var(--spacing-12);
  --gr-filter-gap-inline: var(--spacing-16);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gr-filter-gap-block) var(--gr-filter-gap-inline);
  min-inline-size: 0;
  padding: var(--spacing-16);
  background: var(--bg-020);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-8);
}

:where(.GrFilterBar, [data-filter-bar="true"]) > * {
  min-inline-size: 0;
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-density="dense"] {
  --gr-filter-gap-block: var(--spacing-8);
  --gr-filter-gap-inline: var(--spacing-12);
  padding: var(--spacing-12);
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-sticky="true"] {
  position: sticky;
  inset-block-start: var(--gr-shell-sticky-offset);
  z-index: var(--gr-z-sticky);
}

:where(
  .GrFilterBar__cluster,
  .GrFilterBar__meta,
  .GrFilterBar__actions,
  [data-filter-cluster],
  [data-filter-meta],
  [data-filter-actions]
) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gr-filter-gap-block) var(--gr-filter-gap-inline);
  min-inline-size: 0;
}

:where(.GrFilterBar__cluster, [data-filter-cluster]) {
  flex: 999 1 auto;
}

:where(.GrFilterBar__field, [data-filter-field]) {
  flex: 1 1 var(--gr-filter-field-min-inline-size);
  min-inline-size: min(100%, var(--gr-filter-field-min-inline-size));
}

:where(.GrFilterBar__field, [data-filter-field])[data-filter-span="narrow"] {
  flex-basis: calc(var(--spacing-64) * 2.75);
  min-inline-size: min(100%, calc(var(--spacing-64) * 2.75));
}

:where(.GrFilterBar__field, [data-filter-field])[data-filter-span="wide"] {
  flex-basis: calc(var(--spacing-64) * 4.5);
  min-inline-size: min(100%, calc(var(--spacing-64) * 4.5));
}

:where(.GrFilterBar__search, [data-filter-search]) {
  flex: 999 1 var(--gr-filter-search-min-inline-size);
  min-inline-size: min(100%, var(--gr-filter-search-min-inline-size));
}

:where(.GrFilterBar__meta, [data-filter-meta]) {
  flex: 1 1 var(--gr-filter-meta-min-inline-size);
  min-inline-size: min(100%, var(--gr-filter-meta-min-inline-size));
}

:where(.GrFilterBar__actions, [data-filter-actions]) {
  flex: 0 1 auto;
  justify-content: flex-end;
  margin-inline-start: auto;
}

:where(.GrFilterBar__meta, [data-filter-meta]) > * {
  flex: 1 1 auto;
  min-inline-size: 0;
}

:where(.GrFilterBar__actions, [data-filter-actions]) > * {
  flex: 0 0 auto;
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-rows="2"] {
  align-items: stretch;
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-rows="2"] :where(
  .GrFilterBar__cluster,
  [data-filter-cluster]
)[data-filter-row="primary"] {
  flex: 1 1 100%;
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-rows="2"] :where(
  .GrFilterBar__meta,
  [data-filter-meta]
)[data-filter-row="secondary"] {
  flex: 999 1 auto;
  align-items: stretch;
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-rows="2"] :where(
  .GrFilterBar__actions,
  [data-filter-actions]
)[data-filter-row="secondary"] {
  align-items: center;
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-layout="compact"] {
  --gr-filter-gap-block: var(--spacing-8);
  --gr-filter-gap-inline: var(--spacing-8);
  padding: 0;
  background: transparent;
  border-color: transparent;
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-layout="compact"] :where(.GrFilterBar__search, [data-filter-search]) {
  flex-basis: calc(var(--spacing-64) * 4);
  min-inline-size: min(100%, calc(var(--spacing-64) * 4));
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-layout="compact"] :where(.GrFilterBar__field, [data-filter-field]) {
  flex-basis: calc(var(--spacing-64) * 3);
  min-inline-size: min(100%, calc(var(--spacing-64) * 3));
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-layout="compact"] :where(.GrFilterBar__meta, [data-filter-meta]) {
  flex-basis: calc(var(--spacing-64) * 4);
}

:where(.GrFilterBar, [data-filter-bar="true"])[data-filter-layout="compact"] :where(.GrContextMeta) {
  padding: var(--spacing-8) var(--spacing-12);
}

:where(.GrStatCardRow, [data-stat-card-row="true"]) {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--spacing-16);
  min-inline-size: 0;
}

:where(.GrStatCardRow, [data-stat-card-row="true"]) > :where(.GrKpiCard, [data-stat-card]) {
  flex: 1 1 calc(var(--spacing-64) * 3);
}

:where(.GrWorklistZone, [data-worklist-zone="true"]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
  min-block-size: 0;
}

:where(.GrWorklistZone__header, [data-worklist-header]),
:where(.GrWorklistZone__toolbar, [data-worklist-toolbar]) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-16);
  flex-wrap: wrap;
  min-inline-size: 0;
}

:where(.GrWorklistZone__body, [data-worklist-body]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-12);
  min-inline-size: 0;
  min-block-size: 0;
}

:where(.GrWorklistZone__body, [data-worklist-body]) > :where(.GrTable) {
  flex: 1 1 auto;
}

:where(.GrSplitLayout, [data-split-layout="true"]) {
  display: flex;
  align-items: stretch;
  gap: var(--spacing-16);
  min-inline-size: 0;
  min-block-size: 0;
}

:where(.GrSplitLayout, [data-split-layout="true"])[data-side-width="narrow"] {
  --gr-split-side-width: var(--gr-split-side-width-narrow);
}

:where(.GrSplitLayout, [data-split-layout="true"])[data-side-width="wide"] {
  --gr-split-side-width: var(--gr-split-side-width-wide);
}

:where(.GrSplitLayout__main, [data-split-main]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
}

:where(.GrSplitLayout__side, [data-split-side]) {
  display: flex;
  flex: 0 0 var(--gr-split-side-width);
  flex-direction: column;
  inline-size: var(--gr-split-side-width);
  min-inline-size: 0;
  min-block-size: 0;
}

:where(.GrSupportPanel, [data-support-panel="true"]) {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
  overflow: hidden;
}

:where(.GrSupportPanel__header, [data-support-panel-header]) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--gr-z-sticky);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-16);
  flex-wrap: wrap;
  min-inline-size: 0;
  padding: var(--spacing-16);
  background: var(--bg-020);
  border-block-end: 1px solid var(--color-grey-025);
}

:where(.GrSupportPanel__body, [data-support-panel-body]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
  min-block-size: 0;
  padding: var(--spacing-16);
  overflow: auto;
}

:where(.GrSupportPanel__footer, [data-support-panel-footer]) {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-8);
  flex-wrap: wrap;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-default);
  border-block-start: 1px solid var(--color-grey-025);
}

:where(.GrStickySummary, [data-sticky-summary="true"]) {
  position: sticky;
  inset-block-start: var(--gr-shell-sticky-offset);
  z-index: var(--gr-z-sticky);
  padding-block-end: var(--spacing-12);
  background: var(--bg-010);
}

:where(.GrStickyActionRow, [data-sticky-action-row="true"]) {
  position: sticky;
  inset-block-start: var(--gr-sticky-row-offset);
  z-index: var(--gr-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-16);
  flex-wrap: wrap;
  min-inline-size: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-8);
}

:where(.GrStickyActionRow, [data-sticky-action-row="true"]) > * {
  min-inline-size: 0;
}

:where(.GrViewerWorkspace, [data-viewer-workspace="true"]) {
  display: flex;
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: 0;
  background: var(--bg-020);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
  overflow: hidden;
}

:where(.GrViewerWorkspace__main, [data-viewer-main]) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  background: var(--surface-default);
}

:where(.GrViewerWorkspace__side, [data-viewer-side]) {
  display: flex;
  flex: 0 0 30%;
  flex-direction: column;
  min-inline-size: 0;
  min-block-size: 0;
  background: var(--surface-default);
  border-inline-start: 1px solid var(--color-grey-025);
}

:where(.GrViewerWorkspace__toolbar, [data-viewer-toolbar]) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--gr-z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-16);
  flex-wrap: wrap;
  min-inline-size: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--bg-030);
  border-block-end: 1px solid var(--color-grey-025);
}

:where(.GrEmptyState, [data-empty-state="true"]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  min-inline-size: 0;
  min-block-size: calc(var(--spacing-64) * 4);
  padding: var(--spacing-24);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
  text-align: center;
}

:where(.GrLoadingState, [data-loading-state="true"]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
  min-inline-size: 0;
  min-block-size: calc(var(--spacing-64) * 2);
  padding: var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
  color: var(--color-grey-060);
}

:where(.GrAnnotationPanel, [data-annotation-panel="true"]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-inline-size: 0;
  padding: var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-inline-start: 2px solid var(--warning-secondary);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-dropdown);
}

:where(.GrAnnotationPanel__handle, [data-annotation-handle]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
  min-inline-size: 0;
  cursor: move;
}

:where(.GrAnnotationPanel__body, [data-annotation-body]) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-inline-size: 0;
}

/* 5. typography wrapper rules */

:where(.GrTypography) {
  display: block;
  min-inline-size: 0;
  margin: 0;
  color: inherit;
}

:where(.GrTypography)[data-color="white"],
:where(.GrIcon)[data-color="white"],
:where(.GrIconButton)[data-color="white"] {
  color: var(--color-white);
}

:where(.GrTypography)[data-color="brand"],
:where(.GrIcon)[data-color="brand"],
:where(.GrIconButton)[data-color="brand"] {
  color: var(--maven-blue-bright);
}

:where(.GrTypography)[data-color="navy"],
:where(.GrIcon)[data-color="navy"],
:where(.GrIconButton)[data-color="navy"] {
  color: var(--color-darknavy-060);
}

:where(.GrTypography)[data-color="orange"],
:where(.GrIcon)[data-color="orange"],
:where(.GrIconButton)[data-color="orange"] {
  color: var(--warning-primary);
}

:where(.GrTypography)[data-color="green"],
:where(.GrIcon)[data-color="green"],
:where(.GrIconButton)[data-color="green"] {
  color: var(--positive-primary);
}

:where(.GrTypography)[data-color="red"],
:where(.GrIcon)[data-color="red"],
:where(.GrIconButton)[data-color="red"] {
  color: var(--negative-primary);
}

:where(.GrTypography)[data-color="purple"],
:where(.GrIcon)[data-color="purple"],
:where(.GrIconButton)[data-color="purple"] {
  color: var(--color-purple-060);
}

:where(.GrTypography)[data-color="grey010"],
:where(.GrIcon)[data-color="grey010"],
:where(.GrIconButton)[data-color="grey010"] {
  color: var(--color-grey-010);
}

:where(.GrTypography)[data-color="grey020"],
:where(.GrIcon)[data-color="grey020"],
:where(.GrIconButton)[data-color="grey020"] {
  color: var(--color-grey-020);
}

:where(.GrTypography)[data-color="grey025"],
:where(.GrIcon)[data-color="grey025"],
:where(.GrIconButton)[data-color="grey025"] {
  color: var(--color-grey-025);
}

:where(.GrTypography)[data-color="grey030"],
:where(.GrIcon)[data-color="grey030"],
:where(.GrIconButton)[data-color="grey030"] {
  color: var(--color-grey-030);
}

:where(.GrTypography)[data-color="grey040"],
:where(.GrIcon)[data-color="grey040"],
:where(.GrIconButton)[data-color="grey040"] {
  color: var(--color-grey-040);
}

:where(.GrTypography)[data-color="grey050"],
:where(.GrIcon)[data-color="grey050"],
:where(.GrIconButton)[data-color="grey050"] {
  color: var(--color-grey-050);
}

:where(.GrTypography)[data-color="grey060"],
:where(.GrIcon)[data-color="grey060"],
:where(.GrIconButton)[data-color="grey060"] {
  color: var(--color-grey-060);
}

:where(.GrTypography)[data-color="grey070"],
:where(.GrIcon)[data-color="grey070"],
:where(.GrIconButton)[data-color="grey070"] {
  color: var(--color-grey-070);
}

:where(.GrTypography)[data-color="grey080"],
:where(.GrIcon)[data-color="grey080"],
:where(.GrIconButton)[data-color="grey080"] {
  color: var(--color-grey-080);
}

:where(.GrTypography)[data-color="grey090"],
:where(.GrIcon)[data-color="grey090"],
:where(.GrIconButton)[data-color="grey090"] {
  color: var(--color-grey-090);
}

:where(.GrTypography)[data-color="grey100"],
:where(.GrIcon)[data-color="grey100"],
:where(.GrIconButton)[data-color="grey100"] {
  color: var(--color-grey-100);
}

:where(.GrTypography)[data-color="blue010"],
:where(.GrIcon)[data-color="blue010"],
:where(.GrIconButton)[data-color="blue010"] {
  color: var(--color-blue-010);
}

:where(.GrTypography)[data-color="blue020"],
:where(.GrIcon)[data-color="blue020"],
:where(.GrIconButton)[data-color="blue020"] {
  color: var(--color-blue-020);
}

:where(.GrTypography)[data-color="blue030"],
:where(.GrIcon)[data-color="blue030"],
:where(.GrIconButton)[data-color="blue030"] {
  color: var(--color-blue-030);
}

:where(.GrTypography)[data-color="blue040"],
:where(.GrIcon)[data-color="blue040"],
:where(.GrIconButton)[data-color="blue040"] {
  color: var(--color-blue-040);
}

:where(.GrTypography)[data-color="blue050"],
:where(.GrIcon)[data-color="blue050"],
:where(.GrIconButton)[data-color="blue050"] {
  color: var(--color-blue-050);
}

:where(.GrTypography)[data-color="blue060"],
:where(.GrIcon)[data-color="blue060"],
:where(.GrIconButton)[data-color="blue060"] {
  color: var(--color-blue-060);
}

:where(.GrTypography)[data-color="blue070"],
:where(.GrIcon)[data-color="blue070"],
:where(.GrIconButton)[data-color="blue070"] {
  color: var(--color-blue-070);
}

:where(.GrTypography)[data-color="blue080"],
:where(.GrIcon)[data-color="blue080"],
:where(.GrIconButton)[data-color="blue080"] {
  color: var(--color-blue-080);
}

:where(.GrTypography)[data-color="blue090"],
:where(.GrIcon)[data-color="blue090"],
:where(.GrIconButton)[data-color="blue090"] {
  color: var(--color-blue-090);
}

:where(.GrTypography)[data-color="blue100"],
:where(.GrIcon)[data-color="blue100"],
:where(.GrIconButton)[data-color="blue100"] {
  color: var(--color-blue-100);
}

:where(.GrTypography)[data-color="darknavy010"],
:where(.GrIcon)[data-color="darknavy010"],
:where(.GrIconButton)[data-color="darknavy010"] {
  color: var(--color-darknavy-010);
}

:where(.GrTypography)[data-color="darknavy020"],
:where(.GrIcon)[data-color="darknavy020"],
:where(.GrIconButton)[data-color="darknavy020"] {
  color: var(--color-darknavy-020);
}

:where(.GrTypography)[data-color="darknavy030"],
:where(.GrIcon)[data-color="darknavy030"],
:where(.GrIconButton)[data-color="darknavy030"] {
  color: var(--color-darknavy-030);
}

:where(.GrTypography)[data-color="darknavy040"],
:where(.GrIcon)[data-color="darknavy040"],
:where(.GrIconButton)[data-color="darknavy040"] {
  color: var(--color-darknavy-040);
}

:where(.GrTypography)[data-color="darknavy050"],
:where(.GrIcon)[data-color="darknavy050"],
:where(.GrIconButton)[data-color="darknavy050"] {
  color: var(--color-darknavy-050);
}

:where(.GrTypography)[data-color="darknavy060"],
:where(.GrIcon)[data-color="darknavy060"],
:where(.GrIconButton)[data-color="darknavy060"] {
  color: var(--color-darknavy-060);
}

:where(.GrTypography)[data-color="darknavy070"],
:where(.GrIcon)[data-color="darknavy070"],
:where(.GrIconButton)[data-color="darknavy070"] {
  color: var(--color-darknavy-070);
}

:where(.GrTypography)[data-color="darknavy080"],
:where(.GrIcon)[data-color="darknavy080"],
:where(.GrIconButton)[data-color="darknavy080"] {
  color: var(--color-darknavy-080);
}

:where(.GrTypography)[data-color="green010"],
:where(.GrIcon)[data-color="green010"],
:where(.GrIconButton)[data-color="green010"] {
  color: var(--color-green-010);
}

:where(.GrTypography)[data-color="green020"],
:where(.GrIcon)[data-color="green020"],
:where(.GrIconButton)[data-color="green020"] {
  color: var(--color-green-020);
}

:where(.GrTypography)[data-color="green030"],
:where(.GrIcon)[data-color="green030"],
:where(.GrIconButton)[data-color="green030"] {
  color: var(--color-green-030);
}

:where(.GrTypography)[data-color="green040"],
:where(.GrIcon)[data-color="green040"],
:where(.GrIconButton)[data-color="green040"] {
  color: var(--color-green-040);
}

:where(.GrTypography)[data-color="green050"],
:where(.GrIcon)[data-color="green050"],
:where(.GrIconButton)[data-color="green050"] {
  color: var(--color-green-050);
}

:where(.GrTypography)[data-color="green060"],
:where(.GrIcon)[data-color="green060"],
:where(.GrIconButton)[data-color="green060"] {
  color: var(--color-green-060);
}

:where(.GrTypography)[data-color="green070"],
:where(.GrIcon)[data-color="green070"],
:where(.GrIconButton)[data-color="green070"] {
  color: var(--color-green-070);
}

:where(.GrTypography)[data-color="green080"],
:where(.GrIcon)[data-color="green080"],
:where(.GrIconButton)[data-color="green080"] {
  color: var(--color-green-080);
}

:where(.GrTypography)[data-color="green090"],
:where(.GrIcon)[data-color="green090"],
:where(.GrIconButton)[data-color="green090"] {
  color: var(--color-green-090);
}

:where(.GrTypography)[data-color="red010"],
:where(.GrIcon)[data-color="red010"],
:where(.GrIconButton)[data-color="red010"] {
  color: var(--color-red-010);
}

:where(.GrTypography)[data-color="red020"],
:where(.GrIcon)[data-color="red020"],
:where(.GrIconButton)[data-color="red020"] {
  color: var(--color-red-020);
}

:where(.GrTypography)[data-color="red030"],
:where(.GrIcon)[data-color="red030"],
:where(.GrIconButton)[data-color="red030"] {
  color: var(--color-red-030);
}

:where(.GrTypography)[data-color="red040"],
:where(.GrIcon)[data-color="red040"],
:where(.GrIconButton)[data-color="red040"] {
  color: var(--color-red-040);
}

:where(.GrTypography)[data-color="red050"],
:where(.GrIcon)[data-color="red050"],
:where(.GrIconButton)[data-color="red050"] {
  color: var(--color-red-050);
}

:where(.GrTypography)[data-color="red060"],
:where(.GrIcon)[data-color="red060"],
:where(.GrIconButton)[data-color="red060"] {
  color: var(--color-red-060);
}

:where(.GrTypography)[data-color="red070"],
:where(.GrIcon)[data-color="red070"],
:where(.GrIconButton)[data-color="red070"] {
  color: var(--color-red-070);
}

:where(.GrTypography)[data-color="red080"],
:where(.GrIcon)[data-color="red080"],
:where(.GrIconButton)[data-color="red080"] {
  color: var(--color-red-080);
}

:where(.GrTypography)[data-color="red090"],
:where(.GrIcon)[data-color="red090"],
:where(.GrIconButton)[data-color="red090"] {
  color: var(--color-red-090);
}

:where(.GrTypography)[data-color="orange010"],
:where(.GrIcon)[data-color="orange010"],
:where(.GrIconButton)[data-color="orange010"] {
  color: var(--color-orange-010);
}

:where(.GrTypography)[data-color="orange020"],
:where(.GrIcon)[data-color="orange020"],
:where(.GrIconButton)[data-color="orange020"] {
  color: var(--color-orange-020);
}

:where(.GrTypography)[data-color="orange030"],
:where(.GrIcon)[data-color="orange030"],
:where(.GrIconButton)[data-color="orange030"] {
  color: var(--color-orange-030);
}

:where(.GrTypography)[data-color="orange040"],
:where(.GrIcon)[data-color="orange040"],
:where(.GrIconButton)[data-color="orange040"] {
  color: var(--color-orange-040);
}

:where(.GrTypography)[data-color="orange050"],
:where(.GrIcon)[data-color="orange050"],
:where(.GrIconButton)[data-color="orange050"] {
  color: var(--color-orange-050);
}

:where(.GrTypography)[data-color="orange060"],
:where(.GrIcon)[data-color="orange060"],
:where(.GrIconButton)[data-color="orange060"] {
  color: var(--color-orange-060);
}

:where(.GrTypography)[data-color="orange070"],
:where(.GrIcon)[data-color="orange070"],
:where(.GrIconButton)[data-color="orange070"] {
  color: var(--color-orange-070);
}

:where(.GrTypography)[data-color="orange080"],
:where(.GrIcon)[data-color="orange080"],
:where(.GrIconButton)[data-color="orange080"] {
  color: var(--color-orange-080);
}

:where(.GrTypography)[data-color="orange090"],
:where(.GrIcon)[data-color="orange090"],
:where(.GrIconButton)[data-color="orange090"] {
  color: var(--color-orange-090);
}

:where(.GrTypography)[data-color="purple010"],
:where(.GrIcon)[data-color="purple010"],
:where(.GrIconButton)[data-color="purple010"] {
  color: var(--color-purple-010);
}

:where(.GrTypography)[data-color="purple020"],
:where(.GrIcon)[data-color="purple020"],
:where(.GrIconButton)[data-color="purple020"] {
  color: var(--color-purple-020);
}

:where(.GrTypography)[data-color="purple030"],
:where(.GrIcon)[data-color="purple030"],
:where(.GrIconButton)[data-color="purple030"] {
  color: var(--color-purple-030);
}

:where(.GrTypography)[data-color="purple040"],
:where(.GrIcon)[data-color="purple040"],
:where(.GrIconButton)[data-color="purple040"] {
  color: var(--color-purple-040);
}

:where(.GrTypography)[data-color="purple050"],
:where(.GrIcon)[data-color="purple050"],
:where(.GrIconButton)[data-color="purple050"] {
  color: var(--color-purple-050);
}

:where(.GrTypography)[data-color="purple060"],
:where(.GrIcon)[data-color="purple060"],
:where(.GrIconButton)[data-color="purple060"] {
  color: var(--color-purple-060);
}

:where(.GrTypography)[data-color="purple070"],
:where(.GrIcon)[data-color="purple070"],
:where(.GrIconButton)[data-color="purple070"] {
  color: var(--color-purple-070);
}

:where(.GrTypography)[data-color="purple080"],
:where(.GrIcon)[data-color="purple080"],
:where(.GrIconButton)[data-color="purple080"] {
  color: var(--color-purple-080);
}

:where(.GrTypography)[data-color="purple090"],
:where(.GrIcon)[data-color="purple090"],
:where(.GrIconButton)[data-color="purple090"] {
  color: var(--color-purple-090);
}

:where(.GrTypography)[data-color="maven-blue-bright"],
:where(.GrIcon)[data-color="maven-blue-bright"],
:where(.GrIconButton)[data-color="maven-blue-bright"] {
  color: var(--maven-blue-bright);
}

:where(.GrTypography)[data-color="maven-blue-dark"],
:where(.GrIcon)[data-color="maven-blue-dark"],
:where(.GrIconButton)[data-color="maven-blue-dark"] {
  color: var(--maven-blue-dark);
}

:where(.GrTypography)[data-color="text-primary"],
:where(.GrIcon)[data-color="text-primary"],
:where(.GrIconButton)[data-color="text-primary"] {
  color: var(--text-primary);
}

:where(.GrTypography)[data-color="text-secondary"],
:where(.GrIcon)[data-color="text-secondary"],
:where(.GrIconButton)[data-color="text-secondary"] {
  color: var(--text-secondary);
}

:where(.GrTypography)[data-color="text-disabled"],
:where(.GrIcon)[data-color="text-disabled"],
:where(.GrIconButton)[data-color="text-disabled"] {
  color: var(--text-disabled);
}

:where(.GrTypography)[data-color="text-link"],
:where(.GrIcon)[data-color="text-link"],
:where(.GrIconButton)[data-color="text-link"] {
  color: var(--text-link);
}

:where(.GrTypography)[data-color="text-error"],
:where(.GrIcon)[data-color="text-error"],
:where(.GrIconButton)[data-color="text-error"] {
  color: var(--text-error);
}

/* 6. form controls */

:where(.GrTextField, .GrSelect) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  min-inline-size: 0;
  color: var(--color-grey-080);
}

:where(.GrTextField__label, .GrSelect__label) {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  min-inline-size: 0;
  color: var(--color-grey-060);
}

:where(.GrTextField__required, .GrSelect__required) {
  color: var(--negative-primary);
}

:where(.GrTextField__control, .GrSelect__control, .GrSelect__field) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  min-inline-size: 0;
  min-block-size: calc(var(--spacing-32) + var(--spacing-16));
  padding: var(--spacing-10) var(--spacing-12);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-8);
  background: var(--surface-default);
  color: var(--color-grey-080);
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.GrTextField[data-size="small"] :where(.GrTextField__control),
.GrSelect[data-size="small"] :where(.GrSelect__control, .GrSelect__field) {
  min-block-size: var(--spacing-40);
  padding: var(--spacing-8) var(--spacing-12);
}

.GrTextField[data-size="large"] :where(.GrTextField__control),
.GrSelect[data-size="large"] :where(.GrSelect__control, .GrSelect__field) {
  min-block-size: calc(var(--spacing-32) + var(--spacing-24));
  padding: var(--spacing-12) var(--spacing-16);
}

.GrTextField[data-variant="standard"] :where(.GrTextField__control),
.GrSelect[data-variant="text"] :where(.GrSelect__control, .GrSelect__field) {
  min-block-size: auto;
  padding-inline: 0;
  border: none;
  border-radius: 0;
  border-block-end: 1px solid var(--border-default);
  background: transparent;
}

.GrTextField:is(:focus-within, [data-state="focused"]) :where(.GrTextField__control),
.GrSelect:is(:focus-within, [data-state="focused"]) :where(.GrSelect__control, .GrSelect__field) {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.GrTextField[data-variant="standard"]:is(:focus-within, [data-state="focused"]) :where(.GrTextField__control),
.GrSelect[data-variant="text"]:is(:focus-within, [data-state="focused"]) :where(.GrSelect__control, .GrSelect__field) {
  border-color: transparent;
  border-block-end-color: var(--border-focus);
  box-shadow: none;
}

.GrTextField:is(:hover, [data-state="hovered"]) :where(.GrTextField__control),
.GrSelect:is(:hover, [data-state="hovered"]) :where(.GrSelect__control, .GrSelect__field) {
  border-color: var(--border-strong);
}

.GrTextField[data-error="true"] :where(.GrTextField__control),
.GrTextField[data-state="error"] :where(.GrTextField__control),
.GrSelect[data-error="true"] :where(.GrSelect__control, .GrSelect__field),
.GrSelect[data-state="error"] :where(.GrSelect__control, .GrSelect__field) {
  border-color: var(--border-error);
  box-shadow: 0 0 0 1px var(--border-error);
}

.GrTextField[data-variant="standard"][data-error="true"] :where(.GrTextField__control),
.GrTextField[data-variant="standard"][data-state="error"] :where(.GrTextField__control),
.GrSelect[data-variant="text"][data-error="true"] :where(.GrSelect__control, .GrSelect__field),
.GrSelect[data-variant="text"][data-state="error"] :where(.GrSelect__control, .GrSelect__field) {
  border-color: transparent;
  border-block-end-color: var(--border-error);
  box-shadow: none;
}

.GrTextField[data-readonly="true"] :where(.GrTextField__control),
.GrTextField[data-state="readonly"] :where(.GrTextField__control),
.GrSelect[data-readonly="true"] :where(.GrSelect__control, .GrSelect__field) {
  background: var(--bg-020);
  color: var(--color-grey-070);
}

.GrTextField[data-disabled="true"] :where(.GrTextField__control),
.GrTextField[data-state="disabled"] :where(.GrTextField__control),
.GrSelect[data-disabled="true"] :where(.GrSelect__control, .GrSelect__field),
.GrSelect[data-state="disabled"] :where(.GrSelect__control, .GrSelect__field) {
  background: var(--bg-020);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

:where(.GrTextField__input, .GrSelect__value) {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--spacing-8);
  min-inline-size: 0;
  color: inherit;
}

:where(.GrTextField__input input, .GrTextField__input textarea) {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  resize: none;
}

:where(.GrTextField__input input::placeholder, .GrTextField__input textarea::placeholder) {
  color: var(--text-secondary);
}

.GrTextField[data-multiline="true"] :where(.GrTextField__control) {
  align-items: flex-start;
}

:where(.GrTextField__helper, .GrSelect__helper) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-8);
  min-inline-size: 0;
  color: var(--color-grey-060);
}

.GrTextField[data-error="true"] :where(.GrTextField__helper),
.GrTextField[data-state="error"] :where(.GrTextField__helper),
.GrSelect[data-error="true"] :where(.GrSelect__helper),
.GrSelect[data-state="error"] :where(.GrSelect__helper) {
  color: var(--text-error);
}

:where(.GrSelect) {
  position: relative;
}

:where(.GrSelect__control, .GrSelect__field) {
  cursor: pointer;
}

.GrSelect[data-multiple="true"] :where(.GrSelect__control, .GrSelect__field) {
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--spacing-12);
  row-gap: var(--spacing-8);
}

:where(.GrSelect__caret) {
  flex: 0 0 auto;
  color: var(--color-grey-060);
  transition: transform 120ms ease;
}

.GrSelect[data-open="true"] :where(.GrSelect__caret) {
  transform: rotate(180deg);
}

.GrSelect[data-open="true"] :where(.GrSelect__control, .GrSelect__field) {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--color-blue-020);
}

:where(.GrSelect__menu) {
  position: absolute;
  inset-inline-start: 0;
  inset-inline-end: auto;
  inset-block-start: calc(100% + var(--spacing-4));
  z-index: var(--gr-z-dropdown);
  display: none;
  flex-direction: column;
  gap: 0;
  max-block-size: var(--gr-select-menu-max-block-size);
  min-inline-size: 100%;
  inline-size: max(100%, var(--gr-select-menu-inline-size));
  max-inline-size: min(calc(var(--spacing-64) * 6), calc(100vw - var(--spacing-64)));
  padding: var(--spacing-6) 0;
  overflow: auto;
  background: var(--surface-default);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-dropdown);
}

.GrSelect[data-menu-width="narrow"] :where(.GrSelect__menu) {
  inline-size: max(100%, var(--gr-select-menu-inline-size-narrow));
}

.GrSelect[data-menu-width="wide"] :where(.GrSelect__menu) {
  inline-size: max(100%, var(--gr-select-menu-inline-size-wide));
}

.GrSelect[data-open="true"] :where(.GrSelect__menu) {
  display: flex;
}

:where(.GrSelect__option) {
  display: flex;
  align-items: center;
  inline-size: 100%;
  min-block-size: calc(var(--spacing-32) + var(--spacing-16));
  gap: var(--spacing-12);
  min-inline-size: 0;
  margin-inline: var(--spacing-6);
  padding: var(--spacing-10) var(--spacing-12);
  border: none;
  border-radius: var(--radius-8);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-grey-080);
  text-align: left;
  cursor: pointer;
}

.GrSelect[data-size="small"] :where(.GrSelect__option) {
  min-block-size: var(--spacing-40);
  padding: var(--spacing-8) var(--spacing-12);
}

.GrSelect[data-size="large"] :where(.GrSelect__option) {
  min-block-size: calc(var(--spacing-32) + var(--spacing-24));
  padding: var(--spacing-12) var(--spacing-16);
}

:where(
  .GrSelect__summary,
  .GrSelect__summaryCopy,
  .GrSelect__optionBody,
  .GrSelect__optionText,
  .GrSelect__menuSection,
  .GrSelect__footer,
  .GrSelect__checkboxWrap,
  .GrSelect__panelHead,
  .GrSelect__panelMeta
) {
  display: flex;
  min-inline-size: 0;
}

:where(.GrSelect__summary, .GrSelect__optionBody, .GrSelect__panelHead) {
  flex: 1 1 auto;
  align-items: center;
  gap: var(--spacing-8);
}

.GrSelect[data-multiple="true"] :where(.GrSelect__summary) {
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-12);
}

:where(.GrSelect__summary)[data-wrap="wrap"] {
  flex-wrap: wrap;
}

:where(.GrSelect__summaryCopy, .GrSelect__optionText, .GrSelect__panelMeta) {
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-3);
}

:where(.GrSelect__summaryText, .GrSelect__summaryMeta, .GrSelect__optionLabel, .GrSelect__optionDescription, .GrSelect__optionMeta) {
  display: block;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(.GrSelect__summaryMeta, .GrSelect__optionDescription, .GrSelect__optionMeta) {
  color: var(--color-grey-060);
}

:where(.GrSelect__optionBody) {
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12);
}

:where(.GrSelect__optionMeta) {
  flex: 0 0 auto;
  max-inline-size: calc(var(--spacing-64) * 2);
  text-align: right;
}

:where(.GrSelect__menuSection) {
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-4) 0;
}

:where(.GrSelect__menuSection) + :where(.GrSelect__menuSection) {
  border-block-start: 1px solid var(--color-grey-020);
}

:where(.GrSelect__footer) {
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8) var(--spacing-12);
  margin-block-start: 0;
  padding: var(--spacing-8) var(--spacing-12) var(--spacing-4);
  border-block-start: 1px solid var(--color-grey-020);
  flex-wrap: wrap;
}

:where(.GrSelect__panelHead) {
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-8) var(--spacing-12) var(--spacing-6);
  border-block-end: 1px solid var(--color-grey-020);
}

:where(.GrSelect__panelMeta) {
  gap: var(--spacing-4);
}

:where(.GrSelect__summary) > :where(.GrChip, .GrBadge),
:where(.GrSelect__footer) > :where(.GrChip, .GrBadge) {
  flex: 0 0 auto;
}

:where(.GrSelect__option):is(:hover, :focus-visible) {
  background: var(--bg-020);
}

:where(.GrSelect__option)[data-selected="true"] {
  background: var(--bg-020);
  color: var(--color-grey-100);
}

:where(.GrSelect__option)[data-disabled="true"] {
  background: transparent;
  border-color: transparent;
  color: var(--text-disabled);
  cursor: not-allowed;
}

:where(.GrSelect__checkboxWrap) {
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: center;
}

:where(.GrSelect__checkbox) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--spacing-16);
  block-size: var(--spacing-16);
  border: 1px solid var(--color-grey-040);
  border-radius: var(--radius-6);
  background: var(--surface-default);
  color: transparent;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

:where(.GrSelect__checkboxIcon) {
  font-size: var(--font-size-10);
  line-height: 1;
}

.GrSelect[data-option-style="checkbox"] :where(.GrSelect__option) {
  justify-content: flex-start;
}

.GrSelect[data-option-style="checkbox"] :where(.GrSelect__option)[data-selected="true"] :where(.GrSelect__checkbox) {
  border-color: var(--maven-blue-bright);
  background: var(--maven-blue-bright);
  color: var(--color-white);
}

.GrSelect[data-option-style="checkbox"] :where(.GrSelect__option)[data-selected="true"] {
  background: var(--bg-020);
}

/* 7. button / icon button */

:where(.GrButton, .GrIconButton, .GrChip, .GrBadge) {
  --gr-accent-bg-subtle: var(--color-blue-010);
  --gr-accent-border: var(--color-blue-020);
  --gr-accent-text: var(--color-blue-080);
  --gr-accent-solid: var(--maven-blue-bright);
  --gr-accent-solid-hover: var(--maven-blue-dark);
  --gr-accent-solid-pressed: var(--color-blue-070);
  --gr-accent-on-solid: var(--color-white);
}

:where(.GrButton, .GrIconButton, .GrChip, .GrBadge)[data-color="grey"],
:where(.GrBadge)[data-background-color="grey"] {
  --gr-accent-bg-subtle: var(--bg-020);
  --gr-accent-border: var(--color-grey-025);
  --gr-accent-text: var(--color-grey-070);
  --gr-accent-solid: var(--color-grey-060);
  --gr-accent-solid-hover: var(--color-grey-070);
  --gr-accent-solid-pressed: var(--color-grey-080);
  --gr-accent-on-solid: var(--color-white);
}

:where(.GrButton, .GrIconButton, .GrChip, .GrBadge)[data-color="orange"],
:where(.GrBadge)[data-background-color="orange"] {
  --gr-accent-bg-subtle: var(--warning-bg);
  --gr-accent-border: var(--warning-secondary);
  --gr-accent-text: var(--warning-primary);
  --gr-accent-solid: var(--color-orange-040);
  --gr-accent-solid-hover: var(--color-orange-050);
  --gr-accent-solid-pressed: var(--color-orange-060);
  --gr-accent-on-solid: var(--color-white);
}

:where(.GrButton, .GrIconButton, .GrChip, .GrBadge)[data-color="red"],
:where(.GrBadge)[data-background-color="red"] {
  --gr-accent-bg-subtle: var(--negative-bg);
  --gr-accent-border: var(--negative-secondary);
  --gr-accent-text: var(--negative-primary);
  --gr-accent-solid: var(--color-red-050);
  --gr-accent-solid-hover: var(--color-red-060);
  --gr-accent-solid-pressed: var(--color-red-070);
  --gr-accent-on-solid: var(--color-white);
}

:where(.GrButton, .GrIconButton, .GrChip, .GrBadge)[data-color="green"],
:where(.GrBadge)[data-background-color="green"] {
  --gr-accent-bg-subtle: var(--positive-bg);
  --gr-accent-border: var(--positive-secondary);
  --gr-accent-text: var(--positive-primary);
  --gr-accent-solid: var(--color-green-050);
  --gr-accent-solid-hover: var(--color-green-060);
  --gr-accent-solid-pressed: var(--color-green-070);
  --gr-accent-on-solid: var(--color-white);
}

:where(.GrButton, .GrIconButton, .GrChip, .GrBadge)[data-color="purple"],
:where(.GrBadge)[data-background-color="purple"] {
  --gr-accent-bg-subtle: var(--color-purple-010);
  --gr-accent-border: var(--color-purple-030);
  --gr-accent-text: var(--color-purple-070);
  --gr-accent-solid: var(--color-purple-060);
  --gr-accent-solid-hover: var(--color-purple-070);
  --gr-accent-solid-pressed: var(--color-purple-080);
  --gr-accent-on-solid: var(--color-white);
}

:where(.GrButton, .GrIconButton, .GrChip, .GrBadge)[data-color="navy"],
:where(.GrBadge)[data-background-color="navy"] {
  --gr-accent-bg-subtle: var(--color-darknavy-010);
  --gr-accent-border: var(--color-darknavy-020);
  --gr-accent-text: var(--color-darknavy-060);
  --gr-accent-solid: var(--color-darknavy-050);
  --gr-accent-solid-hover: var(--color-darknavy-060);
  --gr-accent-solid-pressed: var(--color-darknavy-070);
  --gr-accent-on-solid: var(--color-white);
}

:where(.GrButton)[data-color="white"] {
  --gr-accent-bg-subtle: var(--surface-default);
  --gr-accent-border: var(--color-grey-025);
  --gr-accent-text: var(--color-grey-080);
  --gr-accent-solid: var(--surface-default);
  --gr-accent-solid-hover: var(--bg-020);
  --gr-accent-solid-pressed: var(--bg-030);
  --gr-accent-on-solid: var(--color-grey-080);
}

:where(.GrButton) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-inline-size: 0;
  padding: var(--spacing-10) var(--spacing-16);
  border: 1px solid transparent;
  border-radius: var(--radius-8);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-grey-080);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.GrButton[data-size="small"] {
  padding: var(--spacing-8) var(--spacing-12);
}

.GrButton[data-size="large"] {
  padding: var(--spacing-12) var(--spacing-24);
}

.GrButton[data-full-width="true"] {
  inline-size: 100%;
}

:where(.GrButton:not([data-variant]), .GrButton[data-variant="contained"]) {
  background: var(--gr-accent-solid);
  border-color: var(--gr-accent-solid);
  color: var(--gr-accent-on-solid);
}

:where(.GrButton[data-variant="outlined"]) {
  background: var(--surface-default);
  border-color: var(--gr-accent-border);
  color: var(--gr-accent-text);
}

:where(.GrButton[data-variant="text"]) {
  background: transparent;
  border-color: transparent;
  color: var(--gr-accent-text);
}

:where(.GrButton:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"]):not([data-variant="outlined"]):not([data-variant="text"])):is(:hover, :focus-visible),
:where(.GrButton:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"]):not([data-variant="outlined"]):not([data-variant="text"]))[data-state="hovered"] {
  background: var(--gr-accent-solid-hover);
  border-color: var(--gr-accent-solid-hover);
}

:where(.GrButton:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"]):not([data-variant="outlined"]):not([data-variant="text"]))[data-state="pressed"] {
  background: var(--gr-accent-solid-pressed);
  border-color: var(--gr-accent-solid-pressed);
}

:where(.GrButton[data-variant="outlined"]:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"])):is(:hover, :focus-visible),
:where(.GrButton[data-variant="outlined"]:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"]))[data-state="hovered"] {
  background: var(--gr-accent-bg-subtle);
}

:where(.GrButton[data-variant="outlined"]:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"]))[data-state="pressed"] {
  border-color: var(--gr-accent-solid);
}

:where(.GrButton[data-variant="text"]:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"])):is(:hover, :focus-visible),
:where(.GrButton[data-variant="text"]:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"]))[data-state="hovered"] {
  background: var(--gr-accent-bg-subtle);
}

:where(.GrButton[data-variant="text"]:not([data-disabled="true"]):not(:disabled):not([data-state="disabled"]))[data-state="pressed"] {
  color: var(--gr-accent-solid);
}

:where(.GrButton:disabled, .GrButton[data-disabled="true"], .GrButton[data-state="disabled"]) {
  background: var(--bg-020);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

:where(.GrButton__icon) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:where(.GrButton)[data-loading="true"] {
  pointer-events: none;
}

:where(.GrIconButton) {
  --gr-icon-button-icon-size: 18px;
  --gr-icon-button-hit-size: 36px; /* TODO: confirm full Figma size set */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--gr-icon-button-hit-size);
  block-size: var(--gr-icon-button-hit-size);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-round);
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  color: var(--gr-accent-text);
  font: inherit;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.GrIconButton[data-size="22"] {
  --gr-icon-button-icon-size: 22px;
  --gr-icon-button-hit-size: 44px;
}

.GrIconButton[data-size="small"] {
  --gr-icon-button-icon-size: 18px;
  --gr-icon-button-hit-size: 36px;
}

.GrIconButton[data-size="medium"] {
  --gr-icon-button-icon-size: 22px;
  --gr-icon-button-hit-size: 44px;
}

.GrIconButton[data-size="24"] {
  --gr-icon-button-icon-size: 24px;
  --gr-icon-button-hit-size: 48px;
}

.GrIconButton[data-size="large"] {
  --gr-icon-button-icon-size: 24px;
  --gr-icon-button-hit-size: 48px;
}

.GrIconButton[data-type="outline-circle"],
.GrIconButton[data-type="outline-rectangle"] {
  border-color: var(--border-default);
  background: var(--surface-default);
}

.GrIconButton[data-type="outline-rectangle"] {
  border-radius: var(--radius-8);
}

.GrIconButton[data-type="invisible"] {
  background: transparent;
  border-color: transparent;
}

:where(.GrIconButton):is(:hover, :focus-visible),
:where(.GrIconButton)[data-state="hovered"] {
  background: var(--gr-accent-bg-subtle);
  border-color: var(--gr-accent-border);
}

:where(.GrIconButton)[data-state="pressed"] {
  color: var(--gr-accent-solid);
}

:where(.GrIconButton)[data-active="true"] {
  background: var(--gr-accent-bg-subtle);
  border-color: var(--gr-accent-border);
  color: var(--gr-accent-text);
}

:where(.GrIconButton:disabled, .GrIconButton[data-disabled="true"], .GrIconButton[data-state="disabled"]) {
  background: var(--bg-020);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

:where(.GrIcon) {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: 24px;
  block-size: 24px;
  color: var(--color-grey-050);
}

.GrIcon[data-size="18"] {
  inline-size: 18px;
  block-size: 18px;
}

.GrIcon[data-size="20"] {
  inline-size: 20px;
  block-size: 20px;
}

.GrIcon[data-size="24"] {
  inline-size: 24px;
  block-size: 24px;
}

.GrIconButton :where(.GrIcon) {
  inline-size: var(--gr-icon-button-icon-size);
  block-size: var(--gr-icon-button-icon-size);
  color: inherit;
}

:where(.GrIcon svg, .GrIcon > svg) {
  inline-size: 100%;
  block-size: 100%;
}

:where(.GrIcon svg [stroke]) {
  stroke: currentColor;
}

:where(.GrIcon svg [fill]:not([fill="none"])) {
  fill: currentColor;
}

/* 8. chip / badge */

:where(.GrChip, .GrBadge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  min-inline-size: 0;
  border: 1px solid transparent;
  white-space: nowrap;
}

:where(.GrButton, .GrChip, .GrBadge, .GrNavigationBar__item, .GrTopBar__console-link) > :where(.GrTypography) {
  display: inline-flex;
  align-items: center;
  min-block-size: 0;
}

:where(.GrChip) {
  padding: var(--spacing-6) var(--spacing-10);
  border-radius: var(--radius-round);
}

.GrChip[data-size="small"] {
  padding: var(--spacing-4) var(--spacing-8);
}

.GrChip[data-size="large"] {
  padding: var(--spacing-8) var(--spacing-12);
}

.GrChip[data-shape="rectangle"] {
  border-radius: var(--radius-8);
}

:where(.GrChip:not([data-variant]), .GrChip[data-variant="plain"]) {
  background: transparent;
  border-color: transparent;
  color: var(--gr-accent-text);
}

.GrChip[data-variant="soft"] {
  background: var(--gr-accent-bg-subtle);
  border-color: transparent;
  color: var(--gr-accent-text);
}

.GrChip[data-variant="outlined-soft"] {
  background: var(--gr-accent-bg-subtle);
  border-color: var(--gr-accent-border);
  color: var(--gr-accent-text);
}

.GrChip[data-variant="outlined"] {
  background: var(--surface-default);
  border-color: var(--gr-accent-border);
  color: var(--gr-accent-text);
}

.GrChip[data-variant="solid"] {
  background: var(--gr-accent-solid);
  border-color: var(--gr-accent-solid);
  color: var(--gr-accent-on-solid);
}

.GrChip[data-active="true"] {
  border-color: var(--gr-accent-border);
}

.GrChip[data-disabled="true"] {
  background: var(--bg-020);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

:where(.GrChip__icon, .GrChip__delete) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

:where(.GrBadge) {
  min-block-size: var(--spacing-24);
  padding-inline: var(--spacing-8);
  border-radius: var(--radius-round);
  background: var(--gr-accent-solid);
  border-color: var(--gr-accent-solid);
  color: var(--gr-accent-on-solid);
}

.GrBadge[data-size="small"] {
  min-block-size: 20px; /* TODO: replace with spacing token when available */
  padding-inline: var(--spacing-6);
}

.GrBadge[data-size="large"] {
  min-block-size: var(--spacing-32);
  padding-inline: var(--spacing-10);
}

.GrBadge[data-invisible="true"] {
  display: none;
}

/* 9. table / list / summary patterns */

:where(.GrTable) {
  --gr-table-header-height: 56px; /* TODO: replace with spacing token when available */
  --gr-table-row-height: 52px; /* TODO: replace with spacing token when available */
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  overflow: hidden;
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
}

.GrTable[data-size="small"] {
  --gr-table-header-height: 40px;
  --gr-table-row-height: 36px; /* TODO: replace with spacing token when available */
}

.GrTable[data-size="large"] {
  --gr-table-header-height: 64px;
  --gr-table-row-height: 60px; /* TODO: replace with spacing token when available */
}

:where(.GrTable__scroll) {
  min-inline-size: 0;
  overflow: auto;
}

:where(.GrTable table) {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

:where(.GrTable thead th, .GrTable__headerCell) {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--gr-z-sticky);
  block-size: var(--gr-table-header-height);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--bg-030);
  color: var(--color-grey-070);
  text-align: left;
  vertical-align: middle;
}

:where(.GrTable tbody td, .GrTable__cell) {
  block-size: var(--gr-table-row-height);
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-default);
  color: var(--color-grey-080);
  vertical-align: middle;
  transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

:where(.GrTable[data-size="small"] tbody tr + tr td),
:where(.GrTable[data-size="small"] .GrTable__row + .GrTable__row .GrTable__cell) {
  border-block-start: 1px solid var(--color-grey-020);
}

:where(.GrTable thead th > *, .GrTable tbody td > *, .GrTable__headerCell > *, .GrTable__cell > *) {
  min-inline-size: 0;
}

:where(.GrTable tbody tr):is(:hover, [data-state="hovered"]) td,
:where(.GrTable__row):is(:hover, [data-state="hovered"]) :where(.GrTable__cell) {
  background: var(--bg-020);
}

:where(.GrTable tbody tr)[data-selected="true"] td,
:where(.GrTable tbody tr)[aria-selected="true"] td,
:where(.GrTable__row)[data-selected="true"] :where(.GrTable__cell) {
  background: var(--color-blue-010);
}

:where(.GrTable tbody tr)[data-tone="warning"] td:first-child,
:where(.GrTable__row)[data-tone="warning"] :where(.GrTable__cell:first-child) {
  box-shadow: inset 2px 0 0 var(--warning-primary);
}

:where(.GrTable tbody tr)[data-tone="critical"] td:first-child,
:where(.GrTable tbody tr)[data-tone="error"] td:first-child,
:where(.GrTable__row)[data-tone="critical"] :where(.GrTable__cell:first-child),
:where(.GrTable__row)[data-tone="error"] :where(.GrTable__cell:first-child) {
  box-shadow: inset 2px 0 0 var(--negative-primary);
}

:where(.GrTable__sort) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
}

:where(.GrTable__sortIcon) {
  transition: transform 120ms ease;
}

:where(.GrTable__headerCell)[data-sort="desc"] :where(.GrTable__sortIcon),
:where(.GrTable th)[data-sort="desc"] :where(.GrTable__sortIcon) {
  transform: rotate(180deg);
}

:where(.GrTable__footer) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-inline-size: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-default);
  border-block-start: 1px solid var(--color-grey-025);
}

:where(.GrTab__group, .GrTabGroup) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
}

:where(.GrTab__tabs) {
  display: flex;
  align-items: flex-end;
  gap: var(--spacing-8);
  min-inline-size: 0;
  overflow: auto;
  border-block-end: 1px solid var(--color-grey-025);
}

:where(.GrTab) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  min-inline-size: 0;
  padding: var(--spacing-10) var(--spacing-12);
  border: none;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--color-grey-060);
  cursor: pointer;
  white-space: nowrap;
}

.GrTab[data-size="small"] {
  padding-block: var(--spacing-8);
}

:where(.GrTab):is(:hover, :focus-visible),
:where(.GrTab)[data-state="hovered"] {
  background: var(--bg-020);
  color: var(--color-grey-090);
}

:where(.GrTab)[data-state="pressed"] {
  background: var(--bg-030);
}

:where(.GrTab)[aria-selected="true"],
:where(.GrTab)[data-selected="true"],
:where(.GrTab)[data-state="selected"] {
  color: var(--color-grey-100);
  border-block-end-color: var(--maven-blue-bright);
}

:where(.GrTab)[data-disabled="true"],
:where(.GrTab)[aria-disabled="true"] {
  color: var(--text-disabled);
  cursor: not-allowed;
}

:where(.GrTab__panel)[hidden],
:where(.GrTab__panel)[aria-hidden="true"] {
  display: none;
}

:where(.GrPagination) {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
  min-inline-size: 0;
}

:where(.GrPagination__list) {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(.GrPagination__item) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--spacing-32);
  min-block-size: var(--spacing-32);
  padding-inline: var(--spacing-8);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-8);
  background: var(--surface-default);
  color: var(--color-grey-080);
  text-decoration: none;
  cursor: pointer;
}

.GrPagination[data-size="small"] :where(.GrPagination__item) {
  min-inline-size: 28px; /* TODO: replace with spacing token when available */
  min-block-size: 28px; /* TODO: replace with spacing token when available */
}

.GrPagination[data-size="large"] :where(.GrPagination__item) {
  min-inline-size: var(--spacing-40);
  min-block-size: var(--spacing-40);
}

:where(.GrPagination__item)[aria-current="page"],
:where(.GrPagination__item)[data-active="true"] {
  border-color: var(--maven-blue-bright);
  background: var(--color-blue-010);
  color: var(--color-blue-080);
}

:where(.GrPagination__item)[data-disabled="true"],
.GrPagination[data-disabled="true"] :where(.GrPagination__item) {
  background: var(--bg-020);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  pointer-events: none;
}

:where(.GrKpiCard) {
  --gr-kpi-accent: var(--color-grey-025);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--spacing-12);
  min-inline-size: 0;
  padding: var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-block-start: 2px solid var(--gr-kpi-accent);
  border-radius: var(--radius-12);
}

:where(.GrKpiCard)[data-color="primary"] {
  --gr-kpi-accent: var(--maven-blue-bright);
}

:where(.GrKpiCard)[data-color="navy"] {
  --gr-kpi-accent: var(--color-darknavy-050);
}

:where(.GrKpiCard)[data-color="orange"] {
  --gr-kpi-accent: var(--warning-secondary);
}

:where(.GrKpiCard)[data-color="green"] {
  --gr-kpi-accent: var(--positive-secondary);
}

:where(.GrKpiCard)[data-color="red"] {
  --gr-kpi-accent: var(--negative-secondary);
}

:where(.GrKpiCard__header, .GrKpiCard__meta) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-12);
  min-inline-size: 0;
}

:where(.GrKpiCard__meta) {
  align-items: center;
  flex-wrap: wrap;
  color: var(--color-grey-060);
}

.GrKpiCard[data-active="true"],
.GrKpiCard[data-selected="true"] {
  border-color: var(--maven-blue-bright);
  box-shadow: var(--shadow-card);
}

:where(.GrSummaryRow) {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-16);
  min-inline-size: 0;
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-8);
}

:where(.GrSummaryRow:last-child) {
  margin-block-end: 0;
}

:where(.GrSummaryRow__group) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-inline-size: 0;
}

:where(.GrSummaryRow__item) {
  display: flex;
  flex: 1 1 calc(var(--spacing-64) * 2);
  flex-direction: column;
  gap: var(--spacing-4);
  min-inline-size: 0;
}

:where(.GrSummaryRow__label) {
  color: var(--color-grey-060);
}

:where(.GrSummaryRow__value) {
  color: var(--color-grey-100);
  text-align: right;
}

:where(.GrProgressBar) {
  --gr-progress-value: 0%;
  --gr-progress-height: 10px;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  min-inline-size: 0;
}

.GrProgressBar[data-height="8"] {
  --gr-progress-height: 8px;
}

.GrProgressBar[data-size="small"] {
  --gr-progress-height: 8px;
}

.GrProgressBar[data-height="10"] {
  --gr-progress-height: 10px;
}

.GrProgressBar[data-size="medium"] {
  --gr-progress-height: 10px;
}

.GrProgressBar[data-height="12"] {
  --gr-progress-height: 12px;
}

.GrProgressBar[data-size="large"] {
  --gr-progress-height: 12px;
}

:where(.GrProgressBar__track) {
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: var(--gr-progress-height);
  overflow: hidden;
  background: var(--bg-030);
  border-radius: var(--radius-round);
}

:where(.GrProgressBar__fill) {
  block-size: 100%;
  inline-size: var(--gr-progress-value);
  border-radius: inherit;
  background: var(--maven-blue-bright);
}

.GrProgressBar[data-color="green"] :where(.GrProgressBar__fill) {
  background: var(--positive-secondary);
}

.GrProgressBar[data-color="orange"] :where(.GrProgressBar__fill) {
  background: var(--warning-secondary);
}

.GrProgressBar[data-color="red"] :where(.GrProgressBar__fill) {
  background: var(--negative-primary);
}

:where(.GrProgressBar__label) {
  color: var(--color-grey-060);
  white-space: nowrap;
}

:where(.GrProgressBar__value) {
  color: var(--color-grey-060);
  white-space: nowrap;
}

:where(.GrActivityList) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  min-inline-size: 0;
  padding: var(--spacing-16);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
}

:where(.GrActivityList__item) {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  min-inline-size: 0;
  padding-block: var(--spacing-12);
  border-block-end: 1px solid var(--color-grey-025);
}

:where(.GrActivityList__item:last-child) {
  border-block-end: none;
}

:where(.GrActivityList__marker) {
  flex: 0 0 auto;
  inline-size: var(--spacing-8);
  block-size: var(--spacing-8);
  margin-block-start: var(--spacing-8);
  border-radius: var(--radius-round);
  background: var(--color-grey-040);
}

.GrActivityList__item[data-tone="success"] :where(.GrActivityList__marker) {
  background: var(--positive-secondary);
}

.GrActivityList__item[data-tone="warning"] :where(.GrActivityList__marker) {
  background: var(--warning-secondary);
}

.GrActivityList__item[data-tone="error"] :where(.GrActivityList__marker) {
  background: var(--negative-primary);
}

:where(.GrActivityList__content) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--spacing-4);
  min-inline-size: 0;
}

:where(.GrActivityList__meta) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-12);
  color: var(--color-grey-060);
}

:where(.GrContextMeta) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-16);
  min-inline-size: 0;
}

:where(.GrContextMeta)[data-density="dense"] {
  gap: var(--spacing-6) var(--spacing-12);
}

:where(.GrContextMeta)[data-variant="surface"] {
  padding: var(--spacing-12) var(--spacing-16);
  background: var(--bg-020);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-8);
}

:where(.GrContextMeta)[data-divider="true"] :where(.GrContextMeta__item:not(:last-child)) {
  padding-inline-end: var(--spacing-16);
  border-inline-end: 1px solid var(--color-grey-025);
}

:where(.GrContextMeta__item) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-6);
  min-inline-size: 0;
}

:where(.GrContextMeta__label) {
  color: var(--color-grey-060);
}

:where(.GrContextMeta__value) {
  color: var(--color-grey-100);
}

/* 10. dialog / snackbar / feedback */

:where(.GrDialog:not(dialog)) {
  position: fixed;
  inset: 0;
  z-index: var(--gr-z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-32);
  background: var(--dimmed-030);
}

:where(.GrDialog:not(dialog))[data-open="true"] {
  display: flex;
}

:where(dialog.GrDialog) {
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

:where(dialog.GrDialog[open]) {
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(dialog.GrDialog)::backdrop {
  background: var(--dimmed-030);
}

:where(.GrDialog__surface) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  inline-size: min(100%, var(--gr-dialog-max-inline-size-medium));
  max-block-size: calc(100vh - var(--spacing-64));
  overflow: auto;
  padding: var(--spacing-24);
  background: var(--surface-default);
  border: 1px solid var(--color-grey-025);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-modal);
  color: var(--color-grey-080);
}

.GrDialog[data-size="small"] :where(.GrDialog__surface) {
  inline-size: min(100%, var(--gr-dialog-max-inline-size-small));
}

.GrDialog[data-size="large"] :where(.GrDialog__surface) {
  inline-size: min(100%, var(--gr-dialog-max-inline-size-large));
}

.GrDialog[data-scroll="paper"] :where(.GrDialog__body) {
  overflow: auto;
}

:where(.GrDialog__header, .GrDialog__footer) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-inline-size: 0;
}

:where(.GrDialog__body) {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  min-inline-size: 0;
}

:where(.GrDialog__footer) {
  justify-content: flex-end;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8);
}

:where(.GrSnackbar) {
  position: fixed;
  inset-inline-start: 50%;
  inset-block-end: var(--spacing-32);
  z-index: var(--gr-z-notification);
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  inline-size: max-content;
  max-inline-size: calc(100vw - var(--spacing-64));
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--color-grey-025);
  border-inline-start-width: var(--spacing-4);
  border-radius: var(--radius-12);
  background: var(--surface-default);
  box-shadow: var(--shadow-dropdown);
  color: var(--color-grey-090);
  transform: translateX(-50%);
}

:where(.GrSnackbar)[data-open="true"],
:where(.GrSnackbar)[open] {
  display: flex;
}

.GrSnackbar[data-size="small"] {
  padding: var(--spacing-8) var(--spacing-12);
}

.GrSnackbar[data-size="large"] {
  padding: var(--spacing-16) var(--spacing-20);
}

.GrSnackbar[data-severity="success"] {
  border-inline-start-color: var(--positive-secondary);
}

.GrSnackbar[data-severity="warning"] {
  border-inline-start-color: var(--warning-secondary);
}

.GrSnackbar[data-severity="error"] {
  border-inline-start-color: var(--negative-primary);
}

.GrSnackbar[data-severity="info"] {
  border-inline-start-color: var(--maven-blue-bright);
}

:where(.GrSnackbar__content) {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  min-inline-size: 0;
}

:where(.GrSnackbar__message) {
  min-inline-size: 0;
}

:where(.GrSnackbar__icon) {
  color: inherit;
}

.GrSnackbar[data-severity="success"] :where(.GrSnackbar__icon) {
  color: var(--positive-primary);
}

.GrSnackbar[data-severity="warning"] :where(.GrSnackbar__icon) {
  color: var(--warning-primary);
}

.GrSnackbar[data-severity="error"] :where(.GrSnackbar__icon) {
  color: var(--negative-primary);
}

.GrSnackbar[data-severity="info"] :where(.GrSnackbar__icon) {
  color: var(--maven-blue-bright);
}

:where(.GrSnackbar__actions) {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  flex: 0 0 auto;
}

:where(.GrSnackbar__action) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--maven-blue-bright);
  cursor: pointer;
}

/* 11. utility selectors */

[data-truncate="1"] {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-truncate="2"],
[data-truncate="3"] {
  display: -webkit-box;
  min-inline-size: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
}

[data-truncate="2"] {
  -webkit-line-clamp: 2;
}

[data-truncate="3"] {
  -webkit-line-clamp: 3;
}

:where(
  .GrButton,
  .GrIconButton,
  .GrNavigationBar__item,
  .GrTopBar__consoleItem,
  .GrTopBar__console-link,
  .GrBreadCrumbs__link,
  .GrSelect__option,
  .GrTab,
  .GrPagination__item
):focus-visible {
  outline: 2px solid var(--color-blue-020);
  outline-offset: 2px;
}

/* 12. TODO / unsupported notes
   - GrNavigationBar `usage` themes and collapsed-width exact values are not defined here.
   - GrDialog size widths use provisional scaffold values until Figma-exact widths are confirmed.
   - GrIconButton supports the documented `22px(44px)` mapping plus adjacent common sizes only.
   - GrSelect `renderType` / `fieldStyle` variations beyond documented normal text-field scaffolds remain TODO.
   - GrBadge `showZero` / `maxCount`, GrPagination page math, and GrSelect option state behavior require markup or JS.
*/