/* This file is auto-generated from FarsightTheme.uss. Do not edit manually. */
@font-face {
    font-family: "Inter";
    src: url("Fonts/Inter/Inter-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Farsight UI Theme - Tailwind/shadcn tokenized style sheet */
/* Begin import: /src/Farsight/Farsight.UI.Unity/Resources/ComponentImports.uss */
/* This file should include the imports for all component stylesheets */
/* Warning: unresolved USS import 'ComponentStyles/MenuBarComponent.uss' from '/src/Farsight/Farsight.UI.Unity/Resources/ComponentImports.uss'. */
/* Warning: unresolved USS import 'ComponentStyles/LayersDrawerComponent.uss' from '/src/Farsight/Farsight.UI.Unity/Resources/ComponentImports.uss'. */
/* Warning: unresolved USS import 'ComponentStyles/NotificationsComponent.uss' from '/src/Farsight/Farsight.UI.Unity/Resources/ComponentImports.uss'. */
/* Warning: unresolved USS import 'ComponentStyles/SettingsComponent.uss' from '/src/Farsight/Farsight.UI.Unity/Resources/ComponentImports.uss'. */
/* End import: /src/Farsight/Farsight.UI.Unity/Resources/ComponentImports.uss */
/* ============================================
   Theme Tokens (Tailwind/shadcn contract)
   ============================================ */

/* shadcn default (neutral) dark theme - default for :root and .theme-dark, .dark */
:root,
.theme-dark,
.dark {
    /* Typography (shared - defined in theme-dark since it's now default) */
    --font: "Inter";
    --font-style-default: normal;
    --font-size-tiny: 11px;
    --font-size-small: 12px;
    --font-size-semi-small: 13px;
    --font-size-normal: 14px;
    --font-size-big: 15px;
    --font-size-title: 18px;
    --font-size-very-big: 21px;
    --font-size-default: 14px;

    /* Layout metrics */
    --button-min-height: 40px;
    --button-padding-vertical: 8px;
    --button-padding-horizontal: 8px;

    /* Spacing scale */
    --spacing-0-5: 2px;
    --spacing-1: 4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;

    /* Radius scale */
    --radius: 8px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 28px;

    /* shadcn default (neutral) - dark mode - oklch converted to rgba */
    --background: rgba(37, 37, 37, 1);
    --foreground: rgba(250, 250, 250, 1);
    --card: rgba(52, 52, 52, 1);
    --card-foreground: rgba(250, 250, 250, 1);
    --popover: rgba(52, 52, 52, 1);
    --popover-foreground: rgba(250, 250, 250, 1);
    --primary: rgba(235, 235, 235, 1);
    --primary-foreground: rgba(52, 52, 52, 1);
    --secondary: rgba(69, 69, 69, 1);
    --secondary-foreground: rgba(250, 250, 250, 1);
    --muted: rgba(69, 69, 69, 1);
    --muted-foreground: rgba(181, 181, 181, 1);
    --accent: rgba(69, 69, 69, 1);
    --accent-foreground: rgba(250, 250, 250, 1);
    --destructive: rgba(239, 68, 68, 1);
    --destructive-foreground: rgba(250, 250, 250, 1);
    --border: rgba(255, 255, 255, 0.10);
    --input: rgba(255, 255, 255, 0.15);
    --ring: rgba(140, 140, 140, 1);

    /* Compatibility aliases */
    --border-radius-xs: var(--radius-xs);
    --border-radius-sm: var(--radius-sm);
    --border-radius-default: var(--radius-md);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);
    --border-radius-2xl: var(--radius-2xl);

    --color-primary: var(--primary);
    --color-surfacetint: var(--primary);
    --color-onprimary: var(--primary-foreground);
    --color-primarycontainer: var(--primary);
    --color-onprimarycontainer: var(--primary-foreground);
    --color-primarycontainer-hover: rgba(212, 212, 212, 1);
    --color-primarycontainer-active: rgba(181, 181, 181, 1);

    --color-secondary: var(--secondary);
    --color-onsecondary: var(--secondary-foreground);
    --color-secondarycontainer: var(--secondary);
    --color-onsecondarycontainer: var(--secondary-foreground);
    --color-secondarycontainer-hover: rgba(94, 94, 94, 1);
    --color-secondarycontainer-active: rgba(140, 140, 140, 1);

    --color-tertiary: var(--accent);
    --color-ontertiary: var(--accent-foreground);
    --color-tertiarycontainer: var(--accent);
    --color-ontertiarycontainer: var(--accent-foreground);

    --color-error: var(--destructive);
    --color-onerror: var(--destructive-foreground);
    --color-errorcontainer: var(--destructive);
    --color-onerrorcontainer: var(--destructive-foreground);
    --color-errorcontainer-hover: rgba(248, 113, 113, 1);
    --color-errorcontainer-active: rgba(239, 68, 68, 1);

    --color-background: var(--background);
    --color-onbackground: var(--foreground);
    --color-surface: var(--background);
    --color-onsurface: var(--foreground);
    --color-surfacevariant: var(--input);
    --color-onsurfacevariant: var(--muted-foreground);

    --color-outline: var(--border);
    --color-outlinevariant: var(--accent);

    --color-surfacedim: var(--background);
    --color-surfacebright: rgba(52, 52, 52, 1);
    --color-surfacecontainerlowest: rgba(26, 26, 26, 1);
    --color-surfacecontainerlow: rgba(37, 37, 37, 1);
    --color-surfacecontainer: rgba(45, 45, 45, 1);
    --color-surfacecontainerhigh: var(--muted);
    --color-surfacecontainerhighest: var(--card);
    --color-surfacecontainerhighest-hover: rgba(69, 69, 69, 1);
    --color-surfacecontainerhighest-active: rgba(94, 94, 94, 1);

    --color-shadow: rgba(0, 0, 0, 1);
    --color-scrim: rgba(0, 0, 0, 0.7);
    --color-inversesurface: var(--foreground);
    --color-inverseonsurface: var(--background);
    --color-inverseprimary: var(--primary);
    --color-white: rgba(255, 255, 255, 1);
    --color-transparent: rgba(0, 0, 0, 0);

    --color-onsurface-disabled: rgba(250, 250, 250, 0.12);
    --color-onsurface-disabled-muted: rgba(250, 250, 250, 0.38);
    --color-onsurface-disabled-subtle: rgba(250, 250, 250, 0.04);
    --color-onsurface-disabled-minimal: rgba(250, 250, 250, 0.05);
    --color-outline-disabled: rgba(255, 255, 255, 0.12);
    --color-outline-disabled-muted: rgba(181, 181, 181, 0.38);
    --color-surfacecontainerhigh-disabled: rgba(69, 69, 69, 0.38);
    --color-surfacecontainerhighest-disabled: rgba(52, 52, 52, 0.38);
    --color-surfacecontainerhighest-disabled-border: rgba(255, 255, 255, 0.10);
    --color-primary-disabled: rgba(235, 235, 235, 0.38);
    --color-onsurfacevariant-disabled: rgba(181, 181, 181, 0.25);
    --color-background-disabled: rgba(37, 37, 37, 0.38);
    --color-white-muted: rgba(255, 255, 255, 0.38);

    --color-onsurface-hover: rgba(250, 250, 250, 0.08);
    --color-onsurface-active: rgba(250, 250, 250, 0.12);
    --color-primary-hover-tint: rgba(235, 235, 235, 0.12);
    --color-primary-active-tint: rgba(235, 235, 235, 0.18);
    --color-primary-hover-tint-subtle: rgba(235, 235, 235, 0.08);
    --color-onsurfacevariant-hover: rgba(181, 181, 181, 0.10);
    --color-onsurfacevariant-active: rgba(181, 181, 181, 0.16);

    --color-secondarycontainer-tab: rgba(69, 69, 69, 0.6);
    --color-secondarycontainer-tab-hover: rgba(94, 94, 94, 0.7);
    --color-secondarycontainer-tab-active: rgba(140, 140, 140, 0.8);
    --color-secondarycontainer-selected: rgba(94, 94, 94, 0.7);
    --color-primarycontainer-tab-selected: rgba(235, 235, 235, 0.20);
}

/* Light theme - overrides dark when .theme-light is applied to root */
.theme-light {
    --background: rgba(255, 255, 255, 1);
    --foreground: rgba(23, 23, 23, 1);
    --card: rgba(255, 255, 255, 1);
    --card-foreground: rgba(23, 23, 23, 1);
    --popover: rgba(255, 255, 255, 1);
    --popover-foreground: rgba(23, 23, 23, 1);
    --primary: rgba(23, 23, 23, 1);
    --primary-foreground: rgba(250, 250, 250, 1);
    --secondary: rgba(245, 245, 245, 1);
    --secondary-foreground: rgba(23, 23, 23, 1);
    --muted: rgba(245, 245, 245, 1);
    --muted-foreground: rgba(115, 115, 115, 1);
    --accent: rgba(245, 245, 245, 1);
    --accent-foreground: rgba(23, 23, 23, 1);
    --destructive: rgba(220, 38, 38, 1);
    --destructive-foreground: rgba(250, 250, 250, 1);
    --border: rgba(229, 229, 229, 1);
    --input: rgba(229, 229, 229, 1);
    --ring: rgba(163, 163, 163, 1);

    --color-primary: var(--primary);
    --color-surfacetint: var(--primary);
    --color-onprimary: var(--primary-foreground);
    --color-primarycontainer: var(--primary);
    --color-onprimarycontainer: var(--primary-foreground);
    --color-primarycontainer-hover: rgba(38, 38, 38, 1);
    --color-primarycontainer-active: rgba(64, 64, 64, 1);

    --color-secondary: var(--secondary);
    --color-onsecondary: var(--secondary-foreground);
    --color-secondarycontainer: var(--secondary);
    --color-onsecondarycontainer: var(--secondary-foreground);
    --color-secondarycontainer-hover: rgba(229, 229, 229, 1);
    --color-secondarycontainer-active: rgba(212, 212, 212, 1);

    --color-tertiary: var(--accent);
    --color-ontertiary: var(--accent-foreground);
    --color-tertiarycontainer: var(--accent);
    --color-ontertiarycontainer: var(--accent-foreground);

    --color-error: var(--destructive);
    --color-onerror: var(--destructive-foreground);
    --color-errorcontainer: var(--destructive);
    --color-onerrorcontainer: var(--destructive-foreground);
    --color-errorcontainer-hover: rgba(185, 28, 28, 1);
    --color-errorcontainer-active: rgba(153, 27, 27, 1);

    --color-background: var(--background);
    --color-onbackground: var(--foreground);
    --color-surface: var(--background);
    --color-onsurface: var(--foreground);
    --color-surfacevariant: var(--input);
    --color-onsurfacevariant: var(--muted-foreground);

    --color-outline: var(--border);
    --color-outlinevariant: var(--accent);

    --color-surfacedim: var(--background);
    --color-surfacebright: var(--background);
    --color-surfacecontainerlowest: rgba(250, 250, 250, 1);
    --color-surfacecontainerlow: rgba(249, 250, 251, 1);
    --color-surfacecontainer: rgba(245, 245, 245, 1);
    --color-surfacecontainerhigh: var(--muted);
    --color-surfacecontainerhighest: var(--card);
    --color-surfacecontainerhighest-hover: rgba(245, 245, 245, 1);
    --color-surfacecontainerhighest-active: rgba(229, 229, 229, 1);

    --color-onsurface-disabled: rgba(23, 23, 23, 0.12);
    --color-onsurface-disabled-muted: rgba(23, 23, 23, 0.38);
    --color-outline-disabled: rgba(229, 229, 229, 0.5);
    --color-outline-disabled-muted: rgba(163, 163, 163, 0.38);
    --color-surfacecontainerhigh-disabled: rgba(245, 245, 245, 0.6);
    --color-surfacecontainerhighest-disabled: rgba(255, 255, 255, 0.6);
    --color-surfacecontainerhighest-disabled-border: rgba(229, 229, 229, 0.5);
    --color-primary-disabled: rgba(115, 115, 115, 0.38);
    --color-onsurfacevariant-disabled: rgba(115, 115, 115, 0.25);
    --color-background-disabled: rgba(255, 255, 255, 0.6);
    --color-white-muted: rgba(255, 255, 255, 0.38);

    --color-onsurface-hover: rgba(23, 23, 23, 0.06);
    --color-onsurface-active: rgba(23, 23, 23, 0.10);
    --color-primary-hover-tint: rgba(23, 23, 23, 0.08);
    --color-primary-active-tint: rgba(23, 23, 23, 0.16);
    --color-primary-hover-tint-subtle: rgba(23, 23, 23, 0.04);
    --color-onsurfacevariant-hover: rgba(115, 115, 115, 0.10);
    --color-onsurfacevariant-active: rgba(115, 115, 115, 0.16);

    --color-secondarycontainer-tab: rgba(245, 245, 245, 1);
    --color-secondarycontainer-tab-hover: rgba(229, 229, 229, 1);
    --color-secondarycontainer-tab-active: rgba(212, 212, 212, 1);
    --color-secondarycontainer-selected: rgba(212, 212, 212, 1);
    --color-primarycontainer-tab-selected: rgba(23, 23, 23, 0.12);
}

/* ============================================
   Base Material Styles
   ============================================ */
.is-hidden {
    display: none;
}

.is-visible {
    visibility: visible;
}

.divider {
    flex-shrink: 1;
    min-height: 1px;
    min-width: 1px;
    height: 1px;
    background-color: var(--color-outline);
    opacity: 0.5;
    margin-top: var(--spacing-1);
    margin-bottom: var(--spacing-1);
    margin-left: 0;
    margin-right: 0;
}

/* ============================================
   Base Layout Classes (assigned by Row(), Column(), FlexGrow())
   ============================================ */

.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

.flex-grow {
    flex-grow: 1;
    min-width: 0; /* Allow shrinking below content size so flex items can wrap/flow */
}

.flex-wrap {
    flex-wrap: wrap;
}

.title {
    font-size: var(--font-size-title);
    margin-bottom: var(--spacing-1);
}

.text-sm {
    font-size: var(--font-size-small);
}

/* ============================================
   Base Unity Styles - theme defaults when no explicit styling is applied
   ============================================ */

.unity-ui-document__root,
.farsight-root {
    height: 100%; /* necessary to ensure the root fills its container and doesn't impede children's ability to expand */
    color: var(--color-onsurface);
}

/* Ensure scroll view content inherits theme text color (fixes text=rgb(0,0,0) in log) */
.unity-scroll-view,
.unity-scroll-view__content-container,
.unity-scroll-view__content-viewport,
.scroll-view,
.scroll-view-content,
.scroll-view-viewport {
    color: var(--color-onsurface);
}

/* ============================================
   Foldout Styles (CustomFoldout control)
   ============================================ */

/* Root: column layout, theme colors */
.foldout {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: stretch;
    color: var(--color-onsurface);
    min-height: 0;
}

/* Header row: clickable, arrow + label */
.foldout-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: var(--spacing-2);
    padding-bottom: var(--spacing-2);
    padding-left: 0;
    padding-right: var(--spacing-2);
    margin: 0;
    min-height: 28px;
    background-color: var(--color-transparent);
    border-width: 0;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    cursor: link;
}

.foldout-header:hover {
    background-color: var(--color-surfacecontainerhighest);
}

/* Arrow: icon via class (is-expanded / is-collapsed); fixed size so icon always visible */
.foldout-arrow {
    display: flex;
    align-self: center;
    width: 20px;
    min-width: 20px;
    min-height: 20px;
    height: 20px;
    padding: 0;
    margin-right: var(--spacing-1);
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    -unity-background-scale-mode: scale-to-fit;
}

.foldout-arrow.is-expanded {
    background-image: url("Icons/ArrowDown.svg");
}

.foldout-arrow.is-collapsed {
    background-image: url("Icons/ArrowRight.svg");
}

/* Header label text */
.foldout-label {
    color: var(--color-onsurface);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    font-style: var(--font-style-default);
    flex-grow: 1;
    -unity-text-align: middle-left;
}

/* Content area: indent and spacing */
.foldout-content {
    flex-direction: column;
    padding-left: var(--spacing-4);
    padding-top: var(--spacing-1);
    padding-bottom: var(--spacing-2);
    padding-right: 0;
    margin: 0;
    flex-grow: 1;
    flex-shrink: 0;
    min-height: 0;
    border-left-width: 1px;
    border-left-color: var(--color-outline-variant);
    margin-left: 10px;
}

/* ============================================
   Label Styles
   ============================================ */

.unity-label,
.label,
.field-label {
    color: var(--color-onsurface);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    font-style: var(--font-style-default);
    -unity-text-align: middle-left;
    padding-left: 1px;
    padding-right: var(--spacing-0-5);
    flex-shrink: 0;
    min-height: 18px;
}

/* ============================================
   Text Element - base theme text color for all text (Button, Label, etc.)
   ============================================ */

.unity-text-element,
.label {
    color: var(--color-onsurface);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
}

/* ============================================
   Button - primary styling by default
   ============================================ */

.unity-button,
.btn {
    background-color: var(--color-primarycontainer);
    color: var(--color-onprimarycontainer);
    border-color: var(--color-transparent);
    border-radius: var(--border-radius-default);
    border-width: 1px;
    padding-top: var(--button-padding-vertical);
    padding-bottom: var(--button-padding-vertical);
    padding-left: var(--button-padding-horizontal);
    padding-right: var(--button-padding-horizontal);
    -unity-text-align: middle-center;
    margin: 1px 3px 1px 3px;
    flex-shrink: 0;
    min-height: 36px;
}

.unity-button:hover,
.btn:hover {
    background-color: var(--color-primarycontainer-hover);
}

.unity-button:active,
.btn:active {
    background-color: var(--color-primarycontainer-active);
}

.unity-button:disabled,
.btn:disabled {
    background-color: var(--color-onsurface-disabled);
    color: var(--color-onsurface-disabled-muted);
}

/* ============================================
   Button Styles - Filled Primary
   ============================================ */

.btn.variant-default.tone-primary {
    background-color: var(--color-primarycontainer);
    color: var(--color-onprimarycontainer);
    border-color: var(--color-transparent);
}

.unity-button.btn.variant-default.tone-primary:hover,
.btn.variant-default.tone-primary:hover {
    background-color: var(--color-primarycontainer-hover);
}

.unity-button.btn.variant-default.tone-primary:active,
.btn.variant-default.tone-primary:active {
    background-color: var(--color-primarycontainer-active);
}

.btn.variant-default.tone-primary:disabled {
    background-color: var(--color-onsurface-disabled);
    color: var(--color-onsurface-disabled-muted);
}

/* ============================================
   Button Styles - Filled Secondary
   ============================================ */

.btn.variant-default.tone-secondary {
    background-color: var(--color-secondarycontainer);
    color: var(--color-onsecondarycontainer);
    border-color: var(--color-transparent);
    border-width: 1px;
}

.unity-button.btn.variant-default.tone-secondary:hover,
.btn.variant-default.tone-secondary:hover {
    background-color: var(--color-secondarycontainer-hover);
}

.unity-button.btn.variant-default.tone-secondary:active,
.btn.variant-default.tone-secondary:active {
    background-color: var(--color-secondarycontainer-active);
}

.btn.variant-default.tone-secondary:disabled {
    background-color: var(--color-onsurface-disabled);
    color: var(--color-onsurface-disabled-muted);
}

/* ============================================
   Button Styles - Filled Surface
   ============================================ */

.btn.variant-default.tone-muted {
    background-color: var(--color-surfacecontainerhighest);
    -unity-background-image-tint-color: var(--color-surfacecontainerhighest);
    color: var(--color-primary);
    border-color: var(--color-transparent);
}

.unity-button.btn.variant-default.tone-muted:hover,
.btn.variant-default.tone-muted:hover {
    background-color: var(--color-surfacecontainerhighest-hover);
    -unity-background-image-tint-color: var(--color-surfacecontainerhighest-hover);
}

.unity-button.btn.variant-default.tone-muted:active,
.btn.variant-default.tone-muted:active {
    background-color: var(--color-surfacecontainerhighest-active);
    -unity-background-image-tint-color: var(--color-surfacecontainerhighest-active);
}

.btn.variant-default.tone-muted:disabled {
    background-color: var(--color-onsurface-disabled);
    -unity-background-image-tint-color: var(--color-onsurface-disabled);
    color: var(--color-onsurface-disabled-muted);
}

/* ============================================
   Button Styles - Filled Error
   ============================================ */

.btn.variant-default.tone-destructive {
    background-color: var(--color-errorcontainer);
    -unity-background-image-tint-color: var(--color-errorcontainer);
    color: var(--color-onerrorcontainer);
    border-color: var(--color-transparent);
}

.unity-button.btn.variant-default.tone-destructive:hover,
.btn.variant-default.tone-destructive:hover {
    background-color: var(--color-errorcontainer-hover);
    -unity-background-image-tint-color: var(--color-errorcontainer-hover);
}

.unity-button.btn.variant-default.tone-destructive:active,
.btn.variant-default.tone-destructive:active {
    background-color: var(--color-errorcontainer-active);
    -unity-background-image-tint-color: var(--color-errorcontainer-active);
}

.btn.variant-default.tone-destructive:disabled {
    background-color: var(--color-onsurface-disabled);
    -unity-background-image-tint-color: var(--color-onsurface-disabled);
    color: var(--color-onsurface-disabled-muted);
}

/* ============================================
   Button Styles - Outlined
   ============================================ */

.btn.variant-outline {
    background-color: var(--color-transparent);
    -unity-background-image-tint-color: var(--color-transparent);
    color: var(--color-primary);
    border-color: var(--color-outline);
    border-width: 1px;
}

.unity-button.btn.variant-outline:hover,
.btn.variant-outline:hover {
    background-color: var(--color-primary-hover-tint);
    -unity-background-image-tint-color: var(--color-primary-hover-tint);
}

.unity-button.btn.variant-outline:active,
.btn.variant-outline:active {
    background-color: var(--color-primary-active-tint);
    -unity-background-image-tint-color: var(--color-primary-active-tint);
}

.btn.variant-outline:disabled {
    background-color: var(--color-transparent);
    -unity-background-image-tint-color: var(--color-transparent);
    color: var(--color-onsurface-disabled-muted);
    border-color: var(--color-onsurface-disabled);
}

/* ============================================
   Button Styles - Text
   ============================================ */

.btn.variant-ghost {
    background-color: var(--color-transparent);
    -unity-background-image-tint-color: var(--color-transparent);
    color: var(--color-primary);
    border-color: var(--color-transparent);
    border-width: 0px;
}

.unity-button.btn.variant-ghost:hover,
.btn.variant-ghost:hover {
    background-color: var(--color-primary-hover-tint);
}

.unity-button.btn.variant-ghost:active,
.btn.variant-ghost:active {
    background-color: var(--color-primary-active-tint);
}

.btn.variant-ghost:disabled {
    color: var(--color-onsurface-disabled-muted);
}

/* ============================================
   Card Styles - Filled
   ============================================ */

.card.variant-default {
    background-color: var(--card);
    color: var(--card-foreground);
    border-color: var(--border);
    border-width: 1px;
    border-radius: var(--border-radius-lg);
    flex-shrink: 1;
    padding: var(--spacing-4);
    margin: var(--spacing-2);
}

.card.variant-default Label,
.card.variant-default > Label,
.card.variant-default .unity-label,
.card.variant-default .label,
.card.variant-default .field-label {
    color: var(--card-foreground);
}

.card.variant-default:disabled {
    background-color: var(--color-surfacecontainerhighest-disabled);
}

/* ============================================
   Card Styles - Outlined
   ============================================ */

.card.variant-outline {
    background-color: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-outline);
    border-width: 1px;
    border-radius: var(--border-radius-lg);
}

.card.variant-outline:disabled {
    border-color: var(--color-outline-disabled);
}


/* ============================================
   Dropdown Styles
   ============================================ */

.input.variant-default.btn,
.select.input.variant-default.btn .select__trigger {
    background-color: var(--background);
    color: var(--foreground);
    border-color: var(--input);
    border-width: 1px;
    border-radius: var(--radius-sm);
    min-height: var(--button-min-height);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    font-style: var(--font-style-default);
}

.input.variant-default.btn:disabled,
.select.input.variant-default.btn:disabled .select__trigger {
    background-color: var(--background);
    color: var(--muted-foreground);
    border-color: var(--border);
    opacity: 0.5;
}

.input.variant-default.btn:hover,
.select.input.variant-default.btn .select__trigger:hover {
    border-color: var(--ring);
}

.input.variant-default.btn:active,
.select.input.variant-default.btn .select__trigger:active {
    border-color: var(--ring);
}

/* Dropdown wrapper - label above, trigger below */
/* USS equivalent of the web-side :has(label):has(select) rule; all styled dropdown roots use column layout.
   CustomDropdownControl also applies this in its C# constructor.
   DropdownField column layout is applied in UnityUnifiedClassApplicator.ApplyDropdownFieldClasses. */
.select.input.variant-default.btn {
    flex-direction: column;
    align-items: stretch;
}

/* Native HTML select - web only; appearance/font-family/cursor:pointer are not valid USS properties */
select.input.variant-default.btn {
    width: 100%;
    padding: var(--button-padding-vertical, 8px) var(--button-padding-horizontal, 8px);
}

/* Custom dropdown layout - match BaseField structure: label above, trigger below */
.select {
    min-width: 80px;
    align-items: stretch;
    padding: 0;
    margin: 0;
}

.select__label {
    font-size: var(--font-size-small);
    color: var(--color-onsurfacevariant);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-2);
    margin-right: 0;
    padding: 0;
    align-self: flex-start;
}

.field .field-label {
    font-size: var(--font-size-small);
    color: var(--color-onsurfacevariant);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-2);
    margin-right: 0;
    padding: 0;
    align-self: flex-start;
}

.select__trigger {
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    padding: var(--spacing-1-5) var(--spacing-2);
    margin: 0;
    cursor: link;
}

.select-trigger {
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    padding: var(--spacing-1-5) var(--spacing-2);
    margin: 0;
    cursor: link;
}

.select__value {
    flex-grow: 1;
    padding: 0;
    margin: 0;
    -unity-text-align: middle-left;
}

.select__icon {
    margin-left: var(--spacing-2);
    flex-shrink: 0;
    background-image: url("Icons/ArrowDown.svg");
    -unity-background-scale-mode: scale-to-fit;
}

.popover__content {
    margin-top: var(--spacing-0-5);
    padding: var(--spacing-1);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background-color: var(--popover);
    border-color: var(--border);
    border-width: 1px;
}

.select__list {
    max-height: 200px;
}

.item {
    padding: var(--spacing-2) var(--spacing-3);
    cursor: link;
    min-height: 32px;
    font-family: var(--font), sans-serif;
    font-size: var(--font-size-default);
}

/* Custom dropdown layout - match BaseField structure: label above, trigger below */
.custom-dropdown {
    min-width: 80px;
    align-items: stretch;
    padding: 0;
    margin: 0;
}

.custom-dropdown__field-label {
    font-size: var(--font-size-small);
    color: var(--color-onsurfacevariant);
    margin-top: var(--spacing-2);
    margin-bottom: var(--spacing-1);
    margin-left: var(--spacing-2);
    margin-right: 0;
    padding: 0;
    align-self: flex-start;
}

.custom-dropdown__trigger {
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    padding: var(--spacing-1-5) var(--spacing-2);
    margin: 0;
    cursor: link;
}

.custom-dropdown__value {
    flex-grow: 1;
    padding: 0;
    margin: 0;
    -unity-text-align: middle-left;
}

.custom-dropdown__arrow {
    margin-left: var(--spacing-2);
    flex-shrink: 0;
    background-image: url("Icons/ArrowDown.svg");
    -unity-background-scale-mode: scale-to-fit;
}

.custom-dropdown__popover {
    margin-top: var(--spacing-0-5);
    padding: var(--spacing-1);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background-color: var(--color-surfacecontainerhighest);
}

.custom-dropdown__list {
    max-height: 200px;
}

.custom-dropdown__item {
    padding: var(--spacing-2) var(--spacing-3);
    cursor: link;
    min-height: 32px;
    font-family: var(--font), sans-serif;
    font-size: var(--font-size-default);
}

/* ============================================
   Icon Button Styles
   ============================================ */

.btn-icon {
    background-color: var(--color-transparent);
    color: var(--color-onsurfacevariant);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-radius: var(--border-radius-default);
}

.btn-icon:disabled {
    color: var(--color-onsurface-disabled-muted);
}

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

.btn-icon:active {
    background-color: var(--color-onsurfacevariant-active);
}

.btn-icon.is-selected {
    color: var(--color-primary);
}

.btn-icon.is-selected:hover {
    background-color: var(--color-primary-hover-tint-subtle);
}

.btn-icon.is-selected:active {
    background-color: var(--color-primary-hover-tint);
}

/* ============================================
   FAB Styles - Primary
   ============================================ */

.btn-fab.tone-primary {
    background-color: var(--color-primarycontainer);
    color: var(--color-onprimarycontainer);
    border-color: var(--color-transparent);
    border-width: 1px;
    border-radius: var(--border-radius-xl);
}

.btn-fab.tone-primary:disabled {
    background-color: var(--color-onsurface-disabled);
    color: var(--color-onsurface-disabled-muted);
}

.btn-fab.tone-primary:hover {
    opacity: 0.92;
}

.btn-fab.tone-primary:active {
    opacity: 0.88;
}

/* ============================================
   FAB Styles - Secondary
   ============================================ */

.btn-fab.tone-secondary {
    background-color: var(--color-secondarycontainer);
    color: var(--color-onsecondarycontainer);
    border-color: var(--color-transparent);
    border-width: 1px;
    border-radius: var(--border-radius-xl);
}

.btn-fab.tone-secondary:hover {
    opacity: 0.92;
}

.btn-fab.tone-secondary:active {
    opacity: 0.88;
}

/* ============================================
   List Item Styles
   ============================================ */

.item {
    background-color: var(--color-transparent);
    color: var(--color-onsurface);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-radius: var(--border-radius-sm);
}

.item:hover {
    background-color: var(--color-onsurface-hover);
}

.item:active {
    background-color: var(--color-onsurface-active);
}

.item.is-selected {
    background-color: var(--color-secondarycontainer-selected);
    color: var(--color-onsecondarycontainer);
}

.item.is-selected:hover {
    opacity: 0.92;
}

.item.is-selected:active {
    opacity: 0.88;
}

/* ============================================
   ListView / Collection View Item Styles
   ============================================ */

.unity-collection-view__item--selected {
    background-color: var(--color-secondarycontainer-selected);
    color: var(--color-onsecondarycontainer);
}

.unity-collection-view__item--selected .unity-label {
    color: var(--color-onsecondarycontainer);
}

.unity-collection-view__item--selected:hover {
    opacity: 0.92;
}

.unity-collection-view__item--selected:active {
    opacity: 0.88;
}

/* Clip scroll content so it doesn't overlap elements above (e.g. search field).
   min-height: 0 allows flex child to shrink and enables proper overflow clipping. */
.unity-collection-view .unity-scroll-view {
    overflow: hidden;
    min-height: 0;
}

/* Component Preview window - root and split pane layout. */
.preview-component-root {
    flex-grow: 1;
    min-height: 0;
}

.preview-split-pane {
    min-height: 0;
}

/* Component Preview window - left panel component list.
   min-height: 0 allows the ScrollView to shrink in the flex column and show scrollbars.
   Without this, the list area can collapse or not render correctly in Unity. */
.preview-component-list-scroll {
    min-height: 0;
    overflow: hidden;
}

/* Component list container - ensure it sizes to content and doesn't shrink. */
.preview-component-list {
    flex-shrink: 0;
    align-self: stretch;
}

/* Component list items (buttons) - full width, left-aligned text. */
.preview-component-list .unity-button {
    width: 100%;
    -unity-text-align: middle-left;
    justify-content: flex-start;
}

/* ============================================
   Tab Styles
   ============================================ */

.tab {
    background-color: var(--color-secondarycontainer-tab);
    color: var(--color-secondary);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-radius: var(--border-radius-lg);
}

.tab:disabled {
    background-color: var(--color-onsurface-disabled-minimal);
    color: var(--color-onsurface-disabled-muted);
}

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

.tab:active {
    background-color: var(--color-secondarycontainer-tab-active);
}

.tab.is-selected {
    background-color: var(--color-primarycontainer-tab-selected);
    color: var(--color-onprimarycontainer);
}

.tab.card {
    background-color: var(--color-primary);
    color: var(--color-onsurfacevariant);
    border-color: var(--color-transparent);
    border-width: 1px;
    border-radius: 0px;
}

/* ============================================
   Menu Styles
   ============================================ */

.popover {
    background-color: var(--popover);
    color: var(--popover-foreground);
    border-color: var(--border);
    border-width: 1px;
    border-radius: var(--radius-sm);
}

/* ============================================
   Side Sheet Styles
   ============================================ */

.sheet.variant-outline {
    background-color: var(--color-surface);
    color: var(--color-onsurfacevariant);
    border-color: var(--color-transparent);
    border-width: 1px;
    border-radius: 0px;
}

.sheet.variant-default {
    background-color: var(--color-surface);
    color: var(--color-onsurfacevariant);
    border-color: var(--color-transparent);
    border-width: 1px;
    border-top-left-radius: 8px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 0px;
}

/* ============================================
   Switch Styles
   ============================================ */

.switch-field.switch.track {
    border-width: 1px;
    border-radius: 10px;
}

/* Remove outline from Toggle/SwitchToggle row - input/outline styling only applies to actual InputFields.
   The track (pill) keeps its border via .switch-field__track. */
.unity-toggle.switch.track,
.switch-field.switch.track {
    border-width: 0;
    border-color: var(--color-transparent);
    background-color: var(--color-transparent);
}

.switch-field.switch.track.is-selected {
    background-color: var(--primary);
    border-color: var(--color-transparent);
}

.switch-field.switch.track.is-selected:disabled {
    background-color: var(--muted);
    opacity: 0.5;
}

.switch-field.switch.track.is-unselected {
    background-color: var(--card);
    border-color: var(--border);
}

.switch-field.switch.track.is-unselected:disabled {
    background-color: var(--muted);
    border-color: var(--border);
    opacity: 0.5;
}

.switch.thumb {
    border-width: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

.switch.thumb.is-selected {
    background-color: var(--primary-foreground);
    border-color: var(--color-transparent);
}

.switch.thumb.is-selected:disabled {
    background-color: var(--muted-foreground);
}

.switch.thumb.is-selected:hover {
    opacity: 0.92;
}

.switch.thumb.is-selected:active {
    opacity: 0.90;
}

.switch.thumb.is-unselected {
    background-color: var(--primary);
    border-color: var(--color-transparent);
}

.switch.thumb.is-unselected:disabled {
    background-color: var(--muted-foreground);
}

.switch.thumb.is-unselected:hover {
    opacity: 0.92;
}

.switch.thumb.is-unselected:active {
    opacity: 0.90;
}

/* ============================================
   Progress Bar Styles
   ============================================ */

ProgressBar,
.progress,
.unity-progress-bar {
    background-color: var(--color-surfacecontainerhigh);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-radius: var(--border-radius-sm);
    margin: 1px 3px 1px 3px;
    padding: 0 0 1px 0;
    flex-shrink: 0;
    height: 20px;
    min-height: 20px;
}

.unity-progress-bar__background,
.progress .track {
    background-color: var(--color-surfacecontainerhigh);
    position: relative;
    border-width: 1px;
    border-color: var(--color-outlinevariant);
    border-radius: var(--border-radius-sm);
    height: 20px;
    min-height: 20px;
}

.unity-progress-bar__progress,
.progress-indicator {
    background-color: var(--color-primarycontainer);
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 1px;
    border-radius: var(--border-radius-sm);
}

/* ============================================
   Slider Styles
   ============================================ */

Slider,
.unity-slider,
.unity-base-slider,
.slider {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
    flex-direction: row;
    flex-shrink: 0;
    margin: 1px 3px 1px 3px;
}

.unity-base-field__input,
.unity-base-slider__input,
.unity-slider__input,
.slider .slider-track {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
}

.unity-base-slider__input,
.unity-slider__input {
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
}

#unity-drag-container,
.unity-base-slider__drag-container {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
    min-height: 26px;
    justify-content: center;
    flex-grow: 1;
    flex-shrink: 1;
}

#unity-tracker,
.unity-base-slider__tracker,
.slider-track {
    background-color: var(--muted);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-radius: var(--radius-sm);
    height: 4px;
    min-height: 4px;
    position: absolute;
    left: 0;
    right: 1px;
    top: 9px;
}

Slider:disabled #unity-tracker,
Slider:disabled .unity-base-slider__tracker,
.unity-slider:disabled #unity-tracker,
.unity-slider:disabled .unity-base-slider__tracker,
.slider:disabled .slider-track {
    background-color: var(--muted);
    opacity: 0.5;
}

#unity-dragger-border,
.unity-base-slider__dragger-border {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
}

#unity-dragger,
.unity-base-slider__dragger,
.slider-thumb {
    background-color: var(--primary);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 20px;
    height: 20px;
    top: -2px;
    margin-top: 0;
    margin-bottom: 0;
}

Slider:disabled #unity-dragger,
Slider:disabled .unity-base-slider__dragger,
.unity-slider:disabled #unity-dragger,
.unity-slider:disabled .unity-base-slider__dragger,
.slider:disabled .slider-thumb {
    background-color: var(--muted-foreground);
    opacity: 0.5;
}

#unity-dragger:hover,
.unity-base-slider__dragger:hover,
.slider-thumb:hover {
    opacity: 0.92;
}

#unity-dragger:active,
.unity-base-slider__dragger:active,
.slider-thumb:active {
    opacity: 0.88;
}

/* ============================================
   Scrollbar Styles
   ============================================ */

/* ScrollView layout - match Unity default so scrollbars appear on the side, not bottom */
.unity-scroll-view__content-and-vertical-scroll-container,
.scroll-view-content-and-vertical-scroll-container {
    flex-direction: row;
    flex-grow: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Ensure viewport clips overflowing content in both axes. */
.unity-scroll-view__content-viewport,
.scroll-view-viewport {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.unity-scroll-view__content-viewport--vertical-horizontal,
.scroll-view-viewport--vertical-horizontal {
    flex-direction: row;
    flex-grow: 1;
    align-self: stretch;
    align-items: stretch;
    min-height: 0;
    overflow: hidden;
}

.unity-scroll-view__content-container--vertical-horizontal,
.scroll-view-content--vertical-horizontal {
    flex-grow: 1;
    align-self: stretch;
    min-height: 0;
}

.unity-scroll-view__content-viewport--vertical,
.scroll-view-viewport--vertical {
    flex-direction: column;
    flex-grow: 1;
    min-height: 0;
    overflow: hidden;
}

/* Scroll content must not shrink so it sizes to children and scrolls correctly */
.unity-scroll-view__content-container,
.scroll-view-content {
    flex-shrink: 0;
}

ScrollView > .unity-scroll-view__vertical-scroller,
ScrollView > .unity-scroll-view__horizontal-scroller,
.unity-scroll-view__vertical-scroller,
.unity-scroll-view__horizontal-scroller {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
}

/* Scrollbar width - slightly wider than Unity default (13px) for easier grabbing */
.unity-scroll-view__vertical-scroller {
    flex-shrink: 0;
    min-width: 16px;
    width: 16px;
    position: relative;
}

/* Buttons position absolute at top/bottom */
.unity-scroll-view__vertical-scroller .unity-scroller__low-button {
    position: absolute;
    left: 1px;
    top: 0;
    width: 15px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("Icons/ArrowUp.svg");
    -unity-background-scale-mode: stretch-to-fill;
}

.unity-scroll-view__vertical-scroller .unity-scroller__high-button {
    position: absolute;
    left: 1px;
    bottom: 0;
    width: 15px;
    height: 18px;
    flex-shrink: 0;
    background-image: url("Icons/ArrowDown.svg");
    -unity-background-scale-mode: stretch-to-fill;
}

.unity-scroll-view__horizontal-scroller {
    flex-shrink: 0;
    min-height: 16px;
    height: 16px;
    position: relative;
}

/* Buttons position absolute at left/right */
.unity-scroll-view__horizontal-scroller .unity-scroller__low-button {
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 15px;
    flex-shrink: 0;
    background-image: url("Icons/ArrowLeft.svg");
    -unity-background-scale-mode: stretch-to-fill;
}

.unity-scroll-view__horizontal-scroller .unity-scroller__high-button {
    position: absolute;
    right: 0;
    top: 1px;
    width: 18px;
    height: 15px;
    flex-shrink: 0;
    background-image: url("Icons/ArrowRight.svg");
    -unity-background-scale-mode: stretch-to-fill;
}

ScrollerSlider,
.unity-scroller__slider {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
}

/* Override Slider rules for scrollbars - vertical needs column, horizontal needs row */
.unity-scroll-view__vertical-scroller ScrollerSlider,
.unity-scroll-view__vertical-scroller .unity-scroller__slider,
.unity-scroll-view__vertical-scroller .unity-base-slider__input,
.unity-scroll-view__vertical-scroller .unity-slider__input {
    flex-direction: column;
}

.unity-scroll-view__vertical-scroller ScrollerSlider,
.unity-scroll-view__vertical-scroller .unity-scroller__slider {
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 1px;
    margin-right: 1px;
    margin-top: 18px;
    margin-bottom: 18px;
}

.unity-scroll-view__horizontal-scroller ScrollerSlider,
.unity-scroll-view__horizontal-scroller .unity-scroller__slider,
.unity-scroll-view__horizontal-scroller .unity-base-slider__input,
.unity-scroll-view__horizontal-scroller .unity-slider__input {
    flex-direction: row;
}

.unity-scroll-view__horizontal-scroller ScrollerSlider,
.unity-scroll-view__horizontal-scroller .unity-scroller__slider {
    flex-grow: 1;
    flex-shrink: 1;
    margin-left: 18px;
    margin-right: 18px;
}

/* Horizontal scrollbar drag-container must be row so dragger gets height */
.unity-scroll-view__horizontal-scroller .unity-base-slider__drag-container {
    flex-direction: row;
}

/* Reset Slider horizontal track rules (height:4px) - vertical scrollbar track must fill space */
.unity-scroll-view__vertical-scroller #unity-tracker,
.unity-scroll-view__vertical-scroller .unity-base-slider__tracker,
.unity-scroll-view__vertical-scroller .unity-scroller__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    bottom: 2px;
    height: auto;
    min-height: 0;
}

/* Reset Slider vertical track rules - horizontal scrollbar track must fill space */
.unity-scroll-view__horizontal-scroller #unity-tracker,
.unity-scroll-view__horizontal-scroller .unity-base-slider__tracker,
.unity-scroll-view__horizontal-scroller .unity-scroller__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin-left: 2px;
    margin-right: 2px;
}

ScrollerSlider > .unity-base-field__input,
ScrollerSlider > .unity-base-slider__input,
ScrollerSlider > .unity-slider__input {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
}

ScrollerSlider #unity-drag-container,
ScrollerSlider .unity-base-slider__drag-container {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
    /* Override Slider min-height:26px - scrollbar fills track space */
    min-height: 0;
    /* Override Slider justify-content:center - dragger must align to top/left by scroll position */
    justify-content: flex-start;
}

ScrollerSlider #unity-tracker,
ScrollerSlider .unity-base-slider__tracker,
.unity-scroller__track {
    /* Darker than dragger so thumb is visible (was surfacecontainerhigh = same as dragger) */
    background-color: var(--color-surfacecontainer);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-radius: var(--border-radius-sm);
}

ScrollerSlider #unity-dragger-border,
ScrollerSlider .unity-base-slider__dragger-border {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
}

ScrollerSlider #unity-dragger,
ScrollerSlider .unity-base-slider__dragger,
.unity-scroller__dragger {
    /* Lighter than track so thumb is visible (was outlinevariant = same as track) */
    background-color: var(--muted-foreground);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    /* Override Slider 20x20 - scrollbar dragger sizes to track */
    width: auto;
    height: auto;
    top: 0;
    margin-top: 0;
    margin-bottom: 0;
}

ScrollerSlider #unity-dragger:hover,
ScrollerSlider .unity-base-slider__dragger:hover,
.unity-scroller__dragger:hover {
    background-color: var(--color-onsurfacevariant);
    border-radius: var(--border-radius-sm);
}

ScrollerSlider #unity-dragger:active,
ScrollerSlider .unity-base-slider__dragger:active,
.unity-scroller__dragger:active {
    /* Brightest when dragging for clear feedback */
    background-color: var(--color-onsurface);
    border-radius: var(--border-radius-sm);
}

.unity-scroller__dragger-handle {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0px;
}

#unity-low-button,
#unity-high-button,
.unity-scroller__low-button,
.unity-scroller__high-button,
.unity-repeat-button {
    background-color: var(--color-surfacecontainerhigh);
    -unity-background-image-tint-color: var(--color-white);
    color: var(--color-onsurfacevariant);
    border-color: var(--color-transparent);
    border-width: 0px;
    border-radius: var(--border-radius-xs);
}

#unity-low-button:hover,
#unity-high-button:hover,
.unity-scroller__low-button:hover,
.unity-scroller__high-button:hover,
.unity-repeat-button:hover {
    background-color: var(--color-surfacecontainerhighest);
    -unity-background-image-tint-color: var(--color-white);
    opacity: 0.92;
}

#unity-low-button:active,
#unity-high-button:active,
.unity-scroller__low-button:active,
.unity-scroller__high-button:active,
.unity-repeat-button:active {
    background-color: var(--color-outlinevariant);
    -unity-background-image-tint-color: var(--color-white);
    opacity: 0.88;
}

#unity-low-button:disabled,
#unity-high-button:disabled,
.unity-scroller__low-button:disabled,
.unity-scroller__high-button:disabled,
.unity-repeat-button:disabled {
    background-color: var(--color-surfacecontainerhigh-disabled);
    -unity-background-image-tint-color: var(--color-white-muted);
    color: var(--color-onsurface-disabled-muted);
}

/* ============================================
   Navigation Overlay Styles (Modals)
   ============================================ */

#modal-content-wrapper {
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.modal-dialog {
    background-color: var(--card);
    color: var(--card-foreground);
    border-color: var(--border);
    border-width: 1px;
    border-radius: var(--radius-2xl);
    padding: var(--spacing-6);
    min-width: 280px;
    max-width: 560px;
}

.modal-dialog .unity-label {
    color: var(--card-foreground);
}

.modal-dialog .label,
.modal-dialog .field-label {
    color: var(--card-foreground);
}

/* ============================================
   Navigation Flyout Styles
   ============================================ */

.sheet {
    background-color: var(--color-surface);
    color: var(--color-onsurfacevariant);
    padding: var(--spacing-4);
}

/* ============================================
   Switch Toggle Styles
   ============================================ */

.switch-field {
    flex-direction: row;
    align-items: center;
    min-height: var(--spacing-5);
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 8px;
    margin-bottom: 1px;
}

.field.switch {
    flex-direction: row;
    align-items: center;
    min-height: var(--spacing-5);
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 8px;
    margin-bottom: 1px;
}

/* Keep state classes on the SwitchToggle root from painting the whole row. */
.switch-field.switch.track,
.switch-field.switch.track.is-selected,
.switch-field.switch.track.is-unselected {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0;
}

.switch-field__track {
    flex-grow: 0;
    flex-shrink: 0;
    width: 36px;
    min-width: 36px;
    height: var(--spacing-5);
    min-height: var(--spacing-5);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-0-5);
    border-width: 1px;
    border-radius: 10px;
    background-color: var(--card);
    border-color: var(--border);
    transition-duration: 0.15s, 0.15s;
    transition-property: background-color, border-color;
}

.field.switch .switch-field__track,
.field.switch .switch.switch-field__track {
    flex-grow: 0;
    flex-shrink: 0;
    width: 36px;
    min-width: 36px;
    height: var(--spacing-5);
    min-height: var(--spacing-5);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: var(--spacing-0-5);
    border-width: 1px;
    border-radius: 10px;
    background-color: var(--card);
    border-color: var(--border);
    transition-duration: 0.15s, 0.15s;
    transition-property: background-color, border-color;
}

.field.switch .switch-field__track.switch-field__track--checked {
    background-color: var(--primary);
    border-color: var(--color-transparent);
    justify-content: flex-end;
}

/* Support SwitchToggle state classes applied on root instead of track internals. */
.switch-field.switch.track.is-selected > .switch-field__track {
    background-color: var(--primary);
    border-color: var(--color-transparent);
    justify-content: flex-end;
}

.switch-field__track--checked {
    background-color: var(--primary);
    border-color: var(--color-transparent);
    justify-content: flex-end;
}

.switch-field__track:disabled {
    opacity: 0.5;
}

.switch-field__thumb {
    width: var(--spacing-4);
    height: var(--spacing-4);
    min-width: var(--spacing-4);
    min-height: var(--spacing-4);
    border-radius: 50%;
    background-color: var(--primary);
    border-width: 0;
    transition-duration: 0.15s;
    transition-property: background-color;
}

.switch-thumb {
    width: var(--spacing-4);
    height: var(--spacing-4);
    min-width: var(--spacing-4);
    min-height: var(--spacing-4);
    border-radius: 50%;
    background-color: var(--primary);
    border-width: 0;
    transition-duration: 0.15s;
    transition-property: background-color;
}

.switch-field__track--checked .switch-field__thumb {
    background-color: var(--primary-foreground);
}

.field.switch .switch-field__track.switch-field__track--checked .switch-thumb {
    background-color: var(--primary-foreground);
}

.switch-field.switch.track.is-selected > .switch-field__track .switch-thumb {
    background-color: var(--primary-foreground);
}

.switch-field__track:disabled .switch-field__thumb {
    background-color: var(--muted-foreground);
}

.field.switch .switch:disabled .switch-thumb {
    background-color: var(--muted-foreground);
}

.switch-field .switch-field__track .switch-field__thumb:hover {
    opacity: 0.92;
}

.field.switch .switch .switch-thumb:hover {
    opacity: 0.92;
}

.switch-field .switch-field__track .switch-field__thumb:active {
    opacity: 0.90;
}

.field.switch .switch .switch-thumb:active {
    opacity: 0.90;
}

.switch-field > .unity-base-field__label,
.switch-field > .unity-label {
    padding-left: var(--spacing-3);
    padding-top: var(--spacing-0-5);
    padding-right: var(--spacing-0-5);
    margin-right: var(--spacing-0-5);
    color: var(--foreground);
}

.field.switch > .field-label,
.field.switch > .label {
    padding-left: var(--spacing-3);
    padding-top: var(--spacing-0-5);
    padding-right: var(--spacing-0-5);
    margin-right: var(--spacing-0-5);
    color: var(--foreground);
}

.radio-group {
    display: flex;
    flex-direction: column;
}

RadioButton,
.field.radio-group-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: var(--spacing-5);
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 8px;
    margin-bottom: 3px;
    flex-shrink: 0;
}

.radio-indicator {
    display: flex;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: 999px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    background-color: var(--background);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: center;
    transition-duration: 0.15s;
    transition-property: background-color, border-color, opacity;
}

.radio-indicator-dot {
    display: none;
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    border-radius: 999px;
    background-color: var(--primary-foreground);
    opacity: 0;
    transition-duration: 0.15s;
    transition-property: opacity, background-color;
}

RadioButton:checked .radio-indicator,
.field.radio-group-item:checked .radio-indicator,
.radio-indicator.is-selected {
    background-color: var(--primary);
    border-color: var(--primary);
}

RadioButton:checked .radio-indicator-dot,
.field.radio-group-item:checked .radio-indicator-dot,
.radio-indicator-dot.is-selected {
    display: flex;
    opacity: 1;
}

RadioButton:disabled .radio-indicator,
.field.radio-group-item:disabled .radio-indicator,
.radio-indicator.is-disabled {
    border-color: var(--border);
    background-color: var(--muted);
}

RadioButton:disabled:checked .radio-indicator,
.field.radio-group-item:disabled:checked .radio-indicator,
.radio-indicator.is-disabled.is-selected {
    border-color: var(--muted);
    background-color: var(--muted);
}

RadioButton:disabled .radio-indicator-dot,
.field.radio-group-item:disabled .radio-indicator-dot,
.radio-indicator-dot.is-disabled {
    background-color: var(--muted-foreground);
}

RadioButton > .unity-base-field__label,
RadioButton > .unity-label,
.field.radio-group-item > .field-label,
.field.radio-group-item > .label {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-0-5);
    margin-right: var(--spacing-0-5);
    color: var(--foreground);
    flex-shrink: 0;
}

.radio-group-buttons-component {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.radio-group-buttons-component RadioButton,
.radio-group-buttons-component .radio-group-button {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    min-height: var(--button-min-height);
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--spacing-2);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-width: 1px;
    border-color: var(--border);
    border-radius: var(--radius-md);
    background-color: var(--card);
}

.radio-group-buttons-component RadioButton .radio-indicator,
.radio-group-buttons-component .radio-group-button .radio-indicator {
    margin-left: var(--spacing-4);
    margin-right: 0;
}

.radio-group-buttons-component RadioButton .unity-base-field__label,
.radio-group-buttons-component RadioButton .unity-label,
.radio-group-buttons-component .radio-group-button .field-label,
.radio-group-buttons-component .radio-group-button .label {
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    color: var(--foreground);
    flex-grow: 1;
    -unity-text-align: middle-left;
}

.radio-group-buttons-component RadioButton:checked,
.radio-group-buttons-component .radio-group-button:checked,
.radio-group-buttons-component RadioButton.is-selected,
.radio-group-buttons-component .radio-group-button.is-selected {
    background-color: var(--card);
    border-width: 2px;
    border-color: var(--primary);
}

.radio-group-buttons-component RadioButton:checked .unity-base-field__label,
.radio-group-buttons-component RadioButton:checked .unity-label,
.radio-group-buttons-component .radio-group-button:checked .field-label,
.radio-group-buttons-component .radio-group-button:checked .label,
.radio-group-buttons-component RadioButton.is-selected .unity-base-field__label,
.radio-group-buttons-component RadioButton.is-selected .unity-label,
.radio-group-buttons-component .radio-group-button.is-selected .field-label,
.radio-group-buttons-component .radio-group-button.is-selected .label {
    color: var(--foreground);
}

/* ============================================
   Toggle Styles
   ============================================ */

Toggle {
    flex-direction: row;
    align-items: center;
    min-height: var(--spacing-5);
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 8px;
    margin-bottom: 3px;
    flex-shrink: 0;
}

Toggle,
.field.checkbox {
    flex-direction: row;
    align-items: center;
    min-height: var(--spacing-5);
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 8px;
    margin-bottom: 3px;
    flex-shrink: 0;
}

Toggle > .unity-toggle__input {
    flex-grow: 0;
    flex-shrink: 0;
    width: 18px;
    min-width: 18px;
    height: var(--spacing-5);
    min-height: var(--spacing-5);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-width: 0;
    background-color: var(--color-transparent);
    transition-duration: 0.15s;
    transition-property: background-color;
}

Toggle > .unity-toggle__input,
.field.checkbox .unity-toggle__input {
    flex-grow: 0;
    flex-shrink: 0;
    width: 18px;
    min-width: 18px;
    height: var(--spacing-5);
    min-height: var(--spacing-5);
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-width: 0;
    background-color: var(--color-transparent);
    transition-duration: 0.15s;
    transition-property: background-color;
}

Toggle:checked > .unity-toggle__input {
    background-color: var(--color-transparent);
}

Toggle:disabled > .unity-toggle__input {
    opacity: 0.38;
}

.unity-toggle__checkmark {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    background-color: var(--background);
    -unity-background-image-tint-color: var(--color-transparent);
    flex-shrink: 0;
    align-self: center;
    transition-duration: 0.15s, 0.15s, 0.15s;
    transition-property: background-color, border-color, border-width;
}

.checkbox-indicator {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    background-color: var(--background);
    -unity-background-image-tint-color: var(--color-transparent);
    flex-shrink: 0;
    align-self: center;
    transition-duration: 0.15s, 0.15s, 0.15s;
    transition-property: background-color, border-color, border-width;
}

Toggle:checked .unity-toggle__checkmark {
    background-color: var(--primary);
    border-color: var(--primary);
    border-width: 0;
    padding: 3px;
    background-image: url("Icons/Checkmark.svg");
    -unity-background-image-tint-color: var(--primary-foreground);
    -unity-background-scale-mode: scale-to-fit;
}

Toggle:checked .checkbox-indicator,
.field.checkbox:checked .checkbox-indicator {
    background-color: var(--primary);
    border-color: var(--primary);
    border-width: 0;
    padding: 3px;
    background-image: url("Icons/Checkmark.svg");
    -unity-background-image-tint-color: var(--primary-foreground);
    -unity-background-scale-mode: scale-to-fit;
}

Toggle:disabled .unity-toggle__checkmark {
    border-color: var(--border);
    background-color: var(--muted);
}

Toggle:disabled .checkbox-indicator,
.field.checkbox:disabled .checkbox-indicator {
    border-color: var(--border);
    background-color: var(--muted);
}

Toggle:disabled:checked .unity-toggle__checkmark {
    background-color: var(--muted);
    border-width: 0;
    -unity-background-image-tint-color: var(--muted-foreground);
}

Toggle:disabled:checked .checkbox-indicator,
.field.checkbox:disabled:checked .checkbox-indicator {
    background-color: var(--muted);
    border-width: 0;
    -unity-background-image-tint-color: var(--muted-foreground);
}

Toggle > .unity-toggle__label {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-0-5);
    margin-right: var(--spacing-0-5);
    color: var(--foreground);
    flex-shrink: 0;
}

Toggle > .unity-toggle__label,
.field.checkbox > .field-label,
.field.checkbox > .label {
    padding-left: var(--spacing-3);
    padding-right: var(--spacing-0-5);
    margin-right: var(--spacing-0-5);
    color: var(--foreground);
    flex-shrink: 0;
}

/* ============================================
   Web Toggle/Switch Adaptation (HTML)
   ============================================ */

label.field.checkbox,
label.field.radio-group-item,
label.field.switch {
    display: flex;
    align-items: center;
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0;
}

label.field.checkbox > input.checkbox-input,
label.field.radio-group-item > input.radio-input,
label.field.switch > input.switch-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

label.field.radio-group-item > .radio-indicator {
    display: flex;
}

label.field.radio-group-item.radio-group-button {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    min-height: var(--button-min-height);
    width: 100%;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: var(--spacing-2);
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-3);
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: var(--radius-md);
    background-color: var(--card);
}

label.field.radio-group-item.radio-group-button.is-selected {
    background-color: var(--card);
    border-width: 2px;
    border-style: solid;
    border-color: var(--primary);
}

label.field.radio-group-item.radio-group-button > .radio-indicator {
    margin-left: var(--spacing-4);
    margin-right: 0;
}

label.field.radio-group-item.radio-group-button > .field-label,
label.field.radio-group-item.radio-group-button > .label {
    padding-left: 0;
    padding-right: 0;
    margin-right: 0;
    color: var(--foreground);
    flex-grow: 1;
}

label.field.checkbox > .checkbox-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    border-radius: var(--radius-sm);
    border-width: 1px;
    border-style: solid;
    border-color: var(--input);
    background-color: var(--background);
    margin-right: 0;
    transition-property: background-color, border-color, opacity;
    transition-duration: 0.15s, 0.15s, 0.15s;
}

.checkbox-indicator.is-selected {
    background-color: var(--primary);
    border-color: var(--primary);
    background-image: url("Icons/Checkmark.svg");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.checkbox-indicator.is-disabled {
    border-color: var(--border);
    background-color: var(--muted);
    opacity: 0.85;
}

.checkbox-indicator.is-disabled.is-selected {
    background-color: var(--muted);
    border-color: var(--muted);
    opacity: 0.85;
}

label.field.switch > .switch-field__track {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 36px;
    min-width: 36px;
    height: 20px;
    min-height: 20px;
    padding: 2px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--border);
    border-radius: 10px;
    background-color: var(--card);
    /* justify-content is not animatable in USS and is omitted from transition */
    transition-property: background-color, border-color;
    transition-duration: 0.15s, 0.15s;
}

label.field.switch > .switch-field__track > .switch-field__thumb {
    width: 16px;
    min-width: 16px;
    height: 16px;
    min-height: 16px;
    border-radius: 50%;
    background-color: var(--primary);
    transition-property: background-color, opacity;
    transition-duration: 0.15s, 0.15s;
}

label.field.switch > .switch-field__track.switch-field__track--checked,
.switch-field__track.is-selected {
    background-color: var(--primary);
    border-color: var(--color-transparent);
    justify-content: flex-end;
}

label.field.switch > .switch-field__track.switch-field__track--checked > .switch-field__thumb,
.switch-field__thumb.is-selected {
    background-color: var(--primary-foreground);
}

.switch-field__track.is-disabled {
    opacity: 0.5;
}

.switch-field__thumb.is-disabled {
    background-color: var(--muted-foreground);
}

label.field.switch > .switch-field__track > .switch-field__thumb:hover {
    opacity: 0.92;
}

label.field.switch > .switch-field__track > .switch-field__thumb:active {
    opacity: 0.9;
}

.unity-base-field__label,
.unity-base-field > .unity-label,
.field-label {
    color: var(--foreground);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    font-style: var(--font-style-default);
}

.unity-base-field:focus > .unity-base-field__label,
.unity-base-field:focus .unity-label,
.field:focus .field-label,
.field:focus .label {
    color: var(--foreground);
}

/* ============================================
   TextField - base theme styling when no input.variant-default
   ============================================ */

.unity-text-field .unity-text-field__input,
.unity-text-field .unity-base-text-field__input,
.unity-text-field #unity-text-input,
.field.input-field .input {
    background-color: var(--background);
    border-color: var(--input);
    color: var(--foreground);
}

.unity-text-field .unity-text-field__input:hover,
.unity-text-field .unity-base-text-field__input:hover,
.unity-text-field #unity-text-input:hover,
.field.input-field .input:hover {
    border-color: var(--input);
}

.unity-text-field .unity-text-field__input:focus,
.unity-text-field .unity-base-text-field__input:focus,
.unity-text-field #unity-text-input:focus,
.field.input-field .input:focus {
    border-color: var(--ring);
}

/* ============================================
   TextField - base theme styling when no input-field.filled
   ============================================ */

.unity-text-field .unity-text-field__input,
.unity-text-field .unity-base-text-field__input,
.unity-text-field #unity-text-input,
.field.input-field .input {
    background-color: var(--color-surfacecontainerlow);
    border-color: var(--color-outline);
    color: var(--color-onsurface);
}

.unity-text-field .unity-text-field__input:hover,
.unity-text-field .unity-base-text-field__input:hover,
.unity-text-field #unity-text-input:hover,
.field.input-field .input:hover {
    background-color: var(--color-surfacecontainer);
}

.unity-text-field .unity-text-field__input:focus,
.unity-text-field .unity-base-text-field__input:focus,
.unity-text-field #unity-text-input:focus,
.field.input-field .input:focus {
    border-color: var(--color-primary);
}

/* ============================================
   TextField / Input Field Styles
   ============================================ */

.input.variant-default,
.unity-text-field.input.variant-default,
.field.input-field.variant-default {
    background-color: var(--color-transparent);
    border-color: var(--color-transparent);
    border-width: 0;
    min-height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 1px 3px 1px 3px;
    flex-shrink: 0;
}

.input.variant-default .unity-text-field__input,
.input.variant-default .unity-base-text-field__input,
.input.variant-default #unity-text-input,
.unity-text-field.input.variant-default .unity-text-field__input,
.field.input-field.variant-default .input {
    background-color: var(--background);
    border-color: var(--input);
    border-width: 1px;
    border-radius: var(--radius-sm);
    padding-left: var(--spacing-2);
    padding-top: var(--spacing-1-5);
    padding-right: var(--spacing-2);
    padding-bottom: var(--spacing-1-5);
    min-height: 32px;
    height: 32px;
    color: var(--foreground);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    flex-grow: 1;
    flex-direction: row;
}

.input.variant-default .unity-text-field__input:hover,
.input.variant-default .unity-base-text-field__input:hover,
.input.variant-default #unity-text-input:hover,
.field.input-field.variant-default .input:hover {
    border-color: var(--input);
}

.input.variant-default .unity-text-field__input:focus,
.input.variant-default .unity-base-text-field__input:focus,
.input.variant-default #unity-text-input:focus,
.field.input-field.variant-default .input:focus {
    border-color: var(--ring);
}

.input.variant-default:disabled .unity-text-field__input,
.input.variant-default:disabled .unity-base-text-field__input,
.input.variant-default:disabled #unity-text-input,
.field.input-field.variant-default:disabled .input {
    background-color: var(--background);
    border-color: var(--border);
    color: var(--muted-foreground);
    opacity: 0.5;
}

.input.variant-default .unity-text-field__label,
.input.variant-default .unity-base-text-field__label,
.field.input-field.variant-default .field-label {
    color: var(--foreground);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    padding-left: 1px;
    padding-top: var(--spacing-0-5);
    padding-right: var(--spacing-0-5);
    padding-bottom: 0;
    margin-right: var(--spacing-0-5);
    flex-shrink: 0;
    min-width: 120px;
}

.input.variant-default .unity-text-element--inner-input-field-component {
    color: var(--foreground);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    flex-grow: 1;
    flex-shrink: 0;
    padding-right: var(--spacing-0-5);
}

.field.input-field.variant-default .input {
    color: var(--foreground);
    font-size: var(--font-size-default);
    font-family: var(--font), sans-serif;
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    padding-right: var(--spacing-0-5);
}

/* Input fields in a row (e.g. First Name | Last Name) - allow shrinking to prevent overflow */
.flex-row .input.variant-default {
    min-width: 0;
    flex-shrink: 1;
}

.flex-row .field.input-field.variant-default {
    min-width: 0;
    flex-shrink: 1;
}

.flex-row .input.variant-default .unity-text-element--inner-input-field-component {
    min-width: 0;
    flex-shrink: 1;
}

/* Component preview window sidebar resize handle */
.sidebar-resize-handle {
    cursor: resize-horizontal;
}

.row .input-field.filled .unity-text-element--inner-input-field-component {
    min-width: 0;
    flex-shrink: 1;
}

/* ============================================
   Block: export-dialog
   ExportAssetDialogComponent
   ============================================ */

.export-dialog {
    padding: var(--spacing-4);
    max-height: 100%;
}

.export-dialog__header {
    padding-bottom: var(--spacing-4);
}

.export-dialog__folder-card {
    margin: 0 0 var(--spacing-2) 0;
}

.export-dialog__folder-label {
    font-size: var(--font-size-normal);
    margin: 0 0 var(--spacing-1) 0;
}

.export-dialog__folder-row {
    align-items: center;
}

.export-dialog__folder-path {
    flex-grow: 1;
}

.export-dialog__settings {
    margin: 0 0 var(--spacing-2) 0;
}

.export-dialog__settings-title {
    font-size: var(--font-size-normal);
    margin: 0 0 var(--spacing-1) 0;
}

.export-dialog__setting-group {
    align-items: center;
}

.export-dialog__setting-label {
    margin: 0 var(--spacing-2) 0 0;
}

.export-dialog__assets-header {
    align-items: center;
    margin: 0 0 var(--spacing-1) 0;
}

.export-dialog__assets-title {
    font-size: 20px;
}

.export-dialog__loading {
    margin-left: var(--spacing-2);
}

.export-dialog__scroll {
    flex-grow: 1;
    min-height: 0;
}

/* ============================================
   Block: export-asset
   ExportAssetComponent
   ============================================ */

.export-asset {
    margin: 0 0 var(--spacing-1) 0;
}

.export-asset__content {
    padding: var(--spacing-1);
}

.export-asset__header {
    align-items: center;
}

.export-asset__toggle {
    margin: 0 var(--spacing-2) 0 0;
}

.export-asset__options {
    margin-left: var(--spacing-4);
}

/* ============================================
   Block: export-option-group
   ExportAssetOptionGroupComponent
   ============================================ */

.export-option-group {
    margin: 0 var(--spacing-1) 0 0;
}

.export-option-group__header {
    align-items: center;
    justify-content: space-between;
}

.export-option-group__name {
    font-size: var(--font-size-semi-small);
}

.export-option-group__actions {
    align-items: center;
}

.export-option-group__label {
    margin: 0 var(--spacing-2) 0 0;
}

.export-option-group__options {
    margin-left: var(--spacing-4);
}

/* ============================================
   Block: export-option
   ExportAssetOptionComponent
   ============================================ */

.export-option {
    align-items: center;
    margin: 0 var(--spacing-0-5) 0 0;
}

.export-option__toggle {
    margin: 0 var(--spacing-2) 0 0;
}

/* ============================================
   Block: package-exporter
   PackageExporterDialogComponent
   ============================================ */

.package-exporter {
    padding: var(--spacing-4);
    max-height: 100%;
}

.package-exporter__message {
    margin: 0 0 var(--spacing-3) 0;
}

.package-exporter__loading {
    margin: 0 0 var(--spacing-2) 0;
}

.package-exporter__scroll {
    flex-grow: 1;
    min-height: 0;
}

.package-exporter__actions {
    align-items: center;
    margin: var(--spacing-2) 0 0 0;
}

/* Row variants */
.package-exporter__header {
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    margin: 0 0 var(--spacing-1) 0;
}

.package-exporter__option {
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
}

.package-exporter__footer {
    align-items: center;
    padding: var(--spacing-1) var(--spacing-2);
    margin: var(--spacing-1) 0 0 0;
}

/* Table column layout */
.package-exporter__col-toggle {
    min-width: 40px;
    margin: 0 var(--spacing-2) 0 0;
}

.package-exporter__col-name {
    flex-grow: 1;
    min-width: 80px;
    margin: 0 var(--spacing-3) 0 0;
}

.package-exporter__col-description {
    flex-grow: 3;
    min-width: 120px;
    margin: 0 var(--spacing-3) 0 0;
}

.package-exporter__col-size {
    min-width: 60px;
    margin: 0 var(--spacing-3) 0 0;
}

.package-exporter__col-time {
    min-width: 50px;
}

.package-exporter__header-label {
    font-size: var(--font-size-small);
}


/* Web font normalization for native HTML controls */
html,
body,
button,
input,
select,
textarea {
    font-family: var(--font), sans-serif;
}