npm - @tcn/ui - Versions diffs - 0.6.0 → 0.8.0 - Mend

@tcn/ui 0.6.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (137) hide show

package/dist/themes/themes/ergo/ergo_theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-reset {\\n * {\\n position: relative;\\n box-sizing: border-box;\\n }\\n}\\n\\n@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== /\\n :root {\\n / ========== Ergo Brand Palette ========== /\\n --ergo-primary: #ce6b2b;\\n --ergo-secondary: #669eb4;\\n --ergo-secondary-light: #ecf4fb;\\n --ergo-secondary-dark: #497485;\\n --ergo-tertiary: #dfd7cd;\\n --ergo-white: #ffffff;\\n\\n --ergo-accent-blue: #395578;\\n --ergo-accent-green: #97bba3;\\n --ergo-accent-yellow: #dbc97e;\\n --ergo-accent-green: #97bba3;\\n\\n --ergo-grey: #aaaaaa;\\n --ergo-grey-light: #d3d3d3;\\n --ergo-grey-dark: #808080;\\n\\n --ergo-status-red: #ff6565;\\n --ergo-status-red-dark: #c24848;\\n\\n --ergo-status-yellow: #ffd439;\\n --ergo-status-yellow-dark: #dbb735;\\n\\n --ergo-status-blue: var(--ergo-secondary);\\n --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n --ergo-status-green: #3fbc6a;\\n --ergo-status-green-dark: #2d904f;\\n\\n --ergo-ink-primary: var(--ergo-accent-blue);\\n --ergo-ink-inverse: var(--ergo-white);\\n\\n / ========== Blackcat System Tokens ========== /\\n --scalar: 1;\\n --accent-color: var(--ergo-primary);\\n\\n / Typography /\\n --font-color: var(--ergo-ink-primary);\\n --font-family: \\\"Lato\\\", sans-serif;\\n --font-size: 12px;\\n\\n / Spacing /\\n --gap-small: 4px;\\n --gap-medium: 8px;\\n --gap-large: 16px;\\n\\n --padding-small: 4px;\\n --padding-medium: 8px;\\n --padding-large: 16px;\\n\\n / Status Colors /\\n --status-color-disabled: var(--ergo-grey-light);\\n --status-color-info: var(--ergo-status-blue);\\n --status-color-warning: var(--ergo-status-yellow);\\n --status-color-positive: var(--ergo-status-green);\\n --status-color-error: var(--ergo-status-red);\\n\\n --async-color-initial: var(--ergo-grey-main);\\n --async-color-pending: var(--ergo-status-blue);\\n --async-color-success: var(--ergo-status-green);\\n --async-color-failed: var(--ergo-status-red);\\n\\n --action-severity-dangerous: var(--ergo-status-red);\\n --action-severity-cautious: var(--ergo-status-yellow);\\n --action-severity-neutral: var(--ergo-primary);\\n --action-severity-suggested: var(--ergo-status-blue);\\n --action-severity-encouraged: var(--ergo-status-green);\\n\\n / Shape /\\n --shape-radius-small: 2px;\\n --shape-radius-medium: 4px;\\n --shape-radius-large: 8px;\\n\\n / Palette /\\n --primary-color-faint: #c0c0c0;\\n --primary-color: #008cff;\\n --primary-color-strong: #008cff;\\n\\n --secondary-color-faint: #c0c0c0;\\n --secondary-color: #008cff;\\n --secondary-color-strong: #008cff;\\n\\n --tertiary-color-faint: #c0c0c0;\\n --tertiary-color: #008cff;\\n --tertiary-color-strong: #008cff;\\n\\n --quaternary-color-faint: #c0c0c0;\\n --quaternary-color: #008cff;\\n --quaternary-color-strong: #008cff;\\n\\n --background-color-primary: #ffffff;\\n --background-color-secondary: #ffffff;\\n --background-color-tertiary: #ffffff;\\n --background-color-quaternary: #ffffff;\\n\\n --foreground-color-primary: #aaa;\\n --foreground-color-secondary: #222222;\\n --foreground-color-tertiary: #222222;\\n --foreground-color-quaternary: #222222;\\n\\n --material-disabled: var(--ergo-grey-light);\\n --on-material-disabled: var(--ergo-ink-inverse);\\n --ink-disabled: var(--ergo-grey-light);\\n\\n --material-line: var(--ergo-grey);\\n\\n / Default Material /\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n / ===== Actions ===== /\\n\\n .tcn-interactive {\\n cursor: pointer;\\n user-select: none;\\n transition:\\n transform 0.1s,\\n background 0.1s,\\n color 0.1s;\\n\\n --ink: var(--on-material);\\n --act: var(--action);\\n --mat: var(--material);\\n\\n --act-down: color-mix(in srgb, var(--mat), black 12%);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n background: var(--mat);\\n color: var(--ink);\\n transition:\\n background 0.1s,\\n color 0.1s;\\n\\n &:focus-visible,\\n &[data-focus-visible] {\\n background: var(--act-focus);\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n &:hover,\\n &[data-hover] {\\n background: var(--act-raised);\\n }\\n\\n &:active,\\n &[data-active] {\\n background: var(--act-down);\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n pointer-events: none;\\n }\\n }\\n\\n / ===== Base Button ===== \\n * Shared between Button and Toggle.\\n * Primarily manages button dimensions and sizing ratios.\\n /\\n .tcn-base-button {\\n / TODO: btn size should look for \\\"--tcn-action-size\\\" variable before defaulting. /\\n --btn-size-base: 26px;\\n --btn-pad-base: 12px;\\n\\n --btn-pad-delta: 4px;\\n --btn-size-delta: 4px;\\n --btn-step: 1;\\n\\n / Increase size and pad by 4px for each size \\\"step\\\" from medium /\\n --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) var(--btn-step));\\n --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n border-radius: var(--shape-radius-medium);\\n min-height: var(--btn-size);\\n padding: var(--padding-small) var(--btn-pad);\\n\\n &[data-size=\\\"sm\\\"] {\\n --btn-step: -1;\\n }\\n &[data-size=\\\"md\\\"] {\\n --btn-step: 0;\\n }\\n &[data-size=\\\"lg\\\"] {\\n --btn-step: 1;\\n }\\n\\n &[data-is-utility=\\\"true\\\"] {\\n height: auto;\\n width: auto;\\n min-width: var(--btn-size);\\n padding: 0;\\n\\n /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset /\\n --util-ratio: 0.75;\\n --btn-size-base: 18px;\\n\\n .tcn-icon {\\n min-height: min(2px, calc(var(--btn-size) var(--util-ratio)));\\n min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n }\\n }\\n }\\n\\n /* ===== Button ===== \\n * Manages Hierarchy and Severity.\\n /\\n .tcn-button {\\n --btn-primary: var(--action);\\n --btn-on-primary: var(--on-action);\\n --btn-variant: var(--on-material);\\n\\n &[data-severity=\\\"dangerous\\\"] {\\n --btn-primary: var(--action-severity-dangerous);\\n --btn-variant: var(--ergo-status-red-dark);\\n }\\n &[data-severity=\\\"cautious\\\"] {\\n --btn-primary: var(--action-severity-cautious);\\n --btn-on-primary: var(--ergo-accent-blue);\\n --btn-variant: var(--ergo-status-yellow-dark);\\n }\\n &[data-severity=\\\"suggested\\\"] {\\n --btn-primary: var(--action-severity-suggested);\\n --btn-variant: var(--ergo-status-blue-dark);\\n }\\n &[data-severity=\\\"encouraged\\\"] {\\n --btn-primary: var(--action-severity-encouraged);\\n --btn-variant: var(--ergo-status-green-dark);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n --act: var(--ergo-white);\\n --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n --mat: var(--tcn-button-color, var(--btn-primary));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"],\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n --act: var(--tcn-button-color, var(--btn-variant));\\n --ink: var(--tcn-button-color, var(--btn-variant));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n }\\n\\n / Decorations /\\n &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n text-decoration: underline;\\n text-decoration-color: var(--ink);\\n text-decoration-thickness: 1px;\\n text-underline-offset: 4px;\\n }\\n\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n border: 1px solid transparent;\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"] {\\n border: 1px solid var(--ink);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n border: 1px solid var(--mat);\\n }\\n\\n transition:\\n box-shadow 0.1s,\\n transform 0.1s;\\n\\n &:hover,\\n &[data-hover] {\\n transform: translateY(-1px);\\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n }\\n\\n &:active,\\n &[data-active] {\\n transform: translateY(1px);\\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n }\\n }\\n\\n / @deprecated - use Button with utility prop instead /\\n .tcn-slim-button {\\n height: auto;\\n width: auto;\\n padding: 0;\\n\\n &[data-size=\\\"sm\\\"] {\\n min-height: 12px;\\n min-width: 12px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 10px;\\n min-width: 10px;\\n }\\n }\\n &[data-size=\\\"md\\\"] {\\n min-height: 18px;\\n min-width: 18px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 14px;\\n min-width: 14px;\\n }\\n }\\n\\n &[data-size=\\\"lg\\\"] {\\n min-height: 24px;\\n min-width: 24px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 20px;\\n min-width: 20px;\\n }\\n }\\n }\\n\\n .tcn-button[data-size].tcn-select {\\n padding-inline-end: 26px;\\n }\\n\\n / Toggle /\\n .tcn-toggle {\\n --tgl-false: var(--ergo-accent-blue);\\n --tgl-true: var(--ergo-accent-blue);\\n --on-tgl-true: var(--ergo-white);\\n\\n --ink: var(--tcn-button-color, var(--tgl-false));\\n --act: var(--tcn-button-color, var(--tgl-false));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n &[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--tgl-true));\\n --ink: var(--tcn-button-text-color, var(--ergo-white));\\n --act: var(--ergo-white);\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n .tcn-button-group {\\n .tcn-button-group-button:hover,\\n .tcn-button-group-button:active {\\n transform: none;\\n }\\n\\n .tcn-button-group-button {\\n border-radius: 0;\\n }\\n .tcn-button-group-button:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n border: 0;\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--act-down);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--act-down);\\n }\\n }\\n\\n .tcn-select-group {\\n .tcn-select-group-option:hover,\\n .tcn-select-group-option:active {\\n transform: none;\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n color: var(--act);\\n border-color: var(--act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: var(--act-faint);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n background: var(--act-down);\\n color: var(--on-act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: var(--material-disabled);\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material-disabled);\\n color: white;\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option {\\n border-radius: 0;\\n }\\n .tcn-select-group-option:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-select-group-option:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n / ===== Tabs ===== /\\n .tcn-tabs-bar {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n min-height: 24px;\\n padding: 0px var(--padding-medium);\\n text-decoration: none;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n white-space: nowrap;\\n }\\n }\\n }\\n\\n / Default /\\n .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n box-sizing: border-box;\\n border: none;\\n padding: 0px var(--padding-medium);\\n border-radius: 0;\\n }\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--material));\\n --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n --act: var(--ergo-primary);\\n }\\n\\n / Hover Indicator /\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after {\\n content: \\\"\\\";\\n display: block;\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0px;\\n height: 1px;\\n background: var(--ergo-accent-blue);\\n pointer-events: none;\\n width: 100%;\\n z-index: 3;\\n }\\n\\n / Indicator /\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -1px;\\n left: 0;\\n min-height: 2px;\\n transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n width: var(--tabs-active-rectangle-width, 0);\\n background: var(--ergo-primary);\\n pointer-events: none;\\n border-bottom-left-radius: 2px;\\n border-bottom-right-radius: 2px;\\n transition:\\n transform 300ms ease-in-out,\\n width 300ms ease-in-out;\\n will-change: transform, width;\\n z-index: 2;\\n }\\n }\\n\\n / Rail /\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: 0px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: var(--material-line);\\n pointer-events: none;\\n z-index: 1;\\n }\\n }\\n\\n / Inline /\\n .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n min-width: min-content;\\n width: auto;\\n flex-grow: 0;\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--on-material);\\n\\n .tcn-tabs-list {\\n gap: var(--gap-small);\\n padding: var(--padding-small);\\n .tcn-tab-item {\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n }\\n\\n / ===== MATERIAL ===== /\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n / ===== SURFACES ===== /\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n .tcn-tooltip {\\n background: rgba(57, 85, 120, 0.85);\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: rgba(255, 255, 255, 1);\\n border-radius: var(--shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\n\\n .tcn-list {\\n gap: var(--gap-medium);\\n .tcn-item {\\n height: 24px;\\n padding: 0px var(--padding-medium);\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n / Scaffold: /\\n .tcn-scaffold {\\n --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n --scaffold-header-size: var(--header-size, 40px);\\n --scaffold-footer-size: var(--footer-size, 40px);\\n --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n --scaffold-divide-footer: var(--divide-footer, 1);\\n --scaffold-divide-header: var(--divide-header, 1);\\n\\n :where(.tcn-header) {\\n min-height: var(--scaffold-header-size);\\n padding: 0 var(--scaffold-v-inset);\\n gap: var(--gap-medium);\\n }\\n\\n / Border appears on body only when it follows header or utility-bar /\\n :where(.tcn-header) + :where(.tcn-body),\\n :where(.tcn-utility-bar) + :where(.tcn-body) {\\n border-top: calc(var(--scaffold-divide-header) 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 /\\n :where(.tcn-body) + :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-utility-bar) {\\n min-height: var(--scaffold-utility-bar-size);\\n padding: 0 var(--scaffold-v-inset);\\n gap: var(--gap-medium);\\n }\\n\\n :where(.tcn-body) {\\n padding: 0 var(--scaffold-v-inset);\\n gap: var(--gap-medium);\\n }\\n\\n :where(.tcn-footer) {\\n gap: var(--gap-medium);\\n min-height: var(--scaffold-footer-size);\\n padding: 0 var(--scaffold-v-inset);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* MODAL: /\\n .tcn-modal {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 1px solid var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n / WINDOW: /\\n .tcn-window {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n box-shadow: 0px 4px 34px 0px #00000096;\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-pop-confirm {\\n --divide-header: 0;\\n --v-inset: var(--padding-medium);\\n\\n :where(.tcn-scaffold) {\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n }\\n\\n :where(.tcn-header) {\\n min-height: 32px;\\n\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-confirm {\\n background-color: var(--background-color-primary);\\n }\\n\\n / PANEL /\\n .tcn-panel {\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n overflow: hidden;\\n }\\n\\n / Card /\\n .tcn-card {\\n --header-size: 32px;\\n --footer-size: 32px;\\n --utility-bar-size: 24px;\\n --divide-header: 0;\\n\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--foreground-color-primary);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: 32px;\\n\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-secondary);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n / SECTION */\\n .tcn-heading {\\n background-color: #f1f1f1;\\n padding-inline-start: 8px;\\n height: 30px;\\n z-index: 5;\\n }\\n\\n .tcn-section > .tcn-heading {\\n background-color: #f2f4f6;\\n padding-inline-start: 8px;\\n color: rgb(51, 51, 51);\\n z-index: 4;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-heading {\\n background-color: #fff7f0;\\n padding-inline-start: 12px;\\n color: #395578;\\n z-index: 3;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-heading {\\n background-color: #eef8ef;\\n padding-inline-start: 16px;\\n color: #395578;\\n z-index: 2;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {\\n background-color: #ecf4fb;\\n padding-inline-start: 20px;\\n color: #395578;\\n z-index: 1;\\n }\\n\\n .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 8px;\\n }\\n\\n .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 12px;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 16px;\\n }\\n\\n .tcn-section\\n > .tcn-section\\n > .tcn-section\\n > .tcn-section\\n > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 20px;\\n }\\n\\n .tcn-base-carrot {\\n --carrot-size: 12px;\\n --carrot-triangle-height: calc(var(--carrot-size) / 2);\\n --carrot-triangle-width: var(--carrot-size);\\n --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;\\n --carrot-triangle-peak: var(--carrot-triangle-width) solid var(--material);\\n\\n width: 0;\\n height: 0;\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--carrot-triangle-peak);\\n border-left: var(--carrot-triangle-base);\\n border-right: var(--carrot-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--carrot-triangle-peak);\\n border-left: var(--carrot-triangle-base);\\n border-right: var(--carrot-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--carrot-triangle-peak);\\n border-top: var(--carrot-triangle-base);\\n border-bottom: var(--carrot-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--carrot-triangle-peak);\\n border-top: var(--carrot-triangle-base);\\n border-bottom: var(--carrot-triangle-base);\\n }\\n }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}
1	+ {"version":3,"file":"ergo_theme.js","sources":["../../../../src/themes/themes/ergo/ergo_theme.css?raw","../../../../src/themes/themes/ergo/ergo_theme.ts"],"sourcesContent":["export default \"@layer tcn-reset {\\n * {\\n position: relative;\\n box-sizing: border-box;\\n }\\n}\\n\\n@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== /\\n :root {\\n / ========== Ergo Brand Palette ========== /\\n --ergo-primary: #ce6b2b;\\n --ergo-secondary: #669eb4;\\n --ergo-secondary-light: #ecf4fb;\\n --ergo-secondary-dark: #497485;\\n --ergo-tertiary: #dfd7cd;\\n --ergo-tertiary-light: #f9f4ed;\\n --ergo-tertiary-dark: #7e6c5d;\\n --ergo-white: #ffffff;\\n\\n --ergo-accent-blue: #395578;\\n --ergo-accent-blue-light: #f3f4f6;\\n --ergo-accent-green: #97bba3;\\n --ergo-accent-green-light: #eef8ef;\\n --ergo-accent-green-dark: #4f785c;\\n --ergo-accent-yellow: #dbc97e;\\n --ergo-accent-yellow-light: #fef9e7;\\n\\n --ergo-grey: #aaaaaa;\\n --ergo-grey-light: #d3d3d3;\\n --ergo-grey-dark: #808080;\\n\\n --ergo-status-red: #ff6565;\\n --ergo-status-red-dark: #c24848;\\n\\n --ergo-status-yellow: #ffd439;\\n --ergo-status-yellow-dark: #dbb735;\\n\\n --ergo-status-blue: var(--ergo-secondary);\\n --ergo-status-blue-dark: var(--ergo-secondary-dark);\\n\\n --ergo-status-green: #3fbc6a;\\n --ergo-status-green-dark: #2d904f;\\n\\n --ergo-ink-primary: var(--ergo-accent-blue);\\n --ergo-ink-inverse: var(--ergo-white);\\n\\n / ========== Blackcat System Tokens ========== /\\n --scalar: 1;\\n --accent-color: var(--ergo-primary);\\n\\n / Typography /\\n --font-color: var(--ergo-ink-primary);\\n --font-family: \\\"Lato\\\", sans-serif;\\n --font-size: 12px;\\n\\n / Spacing /\\n --gap-small: 4px;\\n --gap-medium: 8px;\\n --gap-large: 16px;\\n\\n --padding-small: 4px;\\n --padding-medium: 8px;\\n --padding-large: 16px;\\n\\n / Status Colors /\\n --status-color-disabled: var(--ergo-grey-light);\\n --status-color-info: var(--ergo-status-blue);\\n --status-color-warning: var(--ergo-status-yellow);\\n --status-color-positive: var(--ergo-status-green);\\n --status-color-error: var(--ergo-status-red);\\n\\n --async-color-initial: var(--ergo-grey-main);\\n --async-color-pending: var(--ergo-status-blue);\\n --async-color-success: var(--ergo-status-green);\\n --async-color-failed: var(--ergo-status-red);\\n\\n --action-severity-dangerous: var(--ergo-status-red);\\n --action-severity-cautious: var(--ergo-status-yellow);\\n --action-severity-neutral: var(--ergo-primary);\\n --action-severity-suggested: var(--ergo-status-blue);\\n --action-severity-encouraged: var(--ergo-status-green);\\n\\n / Shape /\\n --shape-radius-small: 2px;\\n --shape-radius-medium: 4px;\\n --shape-radius-large: 8px;\\n\\n / Palette /\\n --primary-color-faint: #c0c0c0;\\n --primary-color: #008cff;\\n --primary-color-strong: #008cff;\\n\\n --secondary-color-faint: #c0c0c0;\\n --secondary-color: #008cff;\\n --secondary-color-strong: #008cff;\\n\\n --tertiary-color-faint: #c0c0c0;\\n --tertiary-color: #008cff;\\n --tertiary-color-strong: #008cff;\\n\\n --quaternary-color-faint: #c0c0c0;\\n --quaternary-color: #008cff;\\n --quaternary-color-strong: #008cff;\\n\\n --background-color-primary: #ffffff;\\n --background-color-secondary: #ffffff;\\n --background-color-tertiary: #ffffff;\\n --background-color-quaternary: #ffffff;\\n\\n --foreground-color-primary: #aaa;\\n --foreground-color-secondary: #222222;\\n --foreground-color-tertiary: #222222;\\n --foreground-color-quaternary: #222222;\\n\\n --material-disabled: var(--ergo-grey-light);\\n --on-material-disabled: var(--ergo-ink-inverse);\\n --ink-disabled: var(--ergo-grey-light);\\n\\n --material-line: var(--ergo-grey);\\n\\n / Default Material /\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n --action: var(--ergo-primary);\\n --on-action: var(--ergo-white);\\n --material: var(--ergo-white);\\n --on-material: var(--ergo-accent-blue);\\n }\\n\\n / ===== Actions ===== /\\n\\n .tcn-interactive {\\n cursor: pointer;\\n user-select: none;\\n transition:\\n transform 0.1s,\\n background 0.1s,\\n color 0.1s;\\n\\n --ink: var(--on-material);\\n --act: var(--action);\\n --mat: var(--material);\\n\\n --act-down: color-mix(in srgb, var(--mat), black 12%);\\n --act-raised: color-mix(in srgb, var(--mat), var(--act) 12%);\\n --act-focus: color-mix(in srgb, var(--mat), var(--act) 16%);\\n --act-drag: color-mix(in srgb, var(--mat), var(--act) 24%);\\n\\n background: var(--mat);\\n color: var(--ink);\\n transition:\\n background 0.1s,\\n color 0.1s;\\n\\n &:focus-visible,\\n &[data-focus-visible] {\\n background: var(--act-focus);\\n outline: 2px solid var(--ergo-primary);\\n outline-offset: 2px;\\n }\\n\\n &:hover,\\n &[data-hover] {\\n background: var(--act-raised);\\n }\\n\\n &:active,\\n &[data-active] {\\n background: var(--act-down);\\n }\\n\\n &[data-is-disabled=\\\"true\\\"] {\\n pointer-events: none;\\n }\\n }\\n\\n / ===== Base Button ===== \\n * Shared between Button and Toggle.\\n * Primarily manages button dimensions and sizing ratios.\\n /\\n .tcn-base-button {\\n / TODO: btn size should look for \\\"--tcn-action-size\\\" variable before defaulting. /\\n --btn-size-base: 26px;\\n --btn-pad-base: 12px;\\n\\n --btn-pad-delta: 4px;\\n --btn-size-delta: 4px;\\n --btn-step: 1;\\n\\n / Increase size and pad by 4px for each size \\\"step\\\" from medium /\\n --btn-pad: calc(var(--btn-pad-base) + var(--btn-pad-delta) var(--btn-step));\\n --btn-size: calc(var(--btn-size-base) + var(--btn-size-delta) * var(--btn-step));\\n\\n border-radius: var(--shape-radius-medium);\\n min-height: var(--btn-size);\\n padding: var(--padding-small) var(--btn-pad);\\n\\n &[data-size=\\\"sm\\\"] {\\n --btn-step: -1;\\n }\\n &[data-size=\\\"md\\\"] {\\n --btn-step: 0;\\n }\\n &[data-size=\\\"lg\\\"] {\\n --btn-step: 1;\\n }\\n\\n &[data-is-utility=\\\"true\\\"] {\\n height: auto;\\n width: auto;\\n min-width: var(--btn-size);\\n padding: 0;\\n\\n /* Icon is 75% of the button size but minimum of 2px to account for border and 1px offset /\\n --util-ratio: 0.75;\\n --btn-size-base: 18px;\\n\\n .tcn-icon {\\n min-height: min(2px, calc(var(--btn-size) var(--util-ratio)));\\n min-width: min(2px, calc(var(--btn-size) * var(--util-ratio)));\\n }\\n }\\n }\\n\\n /* ===== Button ===== \\n * Manages Hierarchy and Severity.\\n /\\n .tcn-button {\\n --btn-primary: var(--action);\\n --btn-on-primary: var(--on-action);\\n --btn-variant: var(--on-material);\\n\\n &[data-severity=\\\"dangerous\\\"] {\\n --btn-primary: var(--action-severity-dangerous);\\n --btn-variant: var(--ergo-status-red-dark);\\n }\\n &[data-severity=\\\"cautious\\\"] {\\n --btn-primary: var(--action-severity-cautious);\\n --btn-on-primary: var(--ergo-accent-blue);\\n --btn-variant: var(--ergo-status-yellow-dark);\\n }\\n &[data-severity=\\\"suggested\\\"] {\\n --btn-primary: var(--action-severity-suggested);\\n --btn-variant: var(--ergo-status-blue-dark);\\n }\\n &[data-severity=\\\"encouraged\\\"] {\\n --btn-primary: var(--action-severity-encouraged);\\n --btn-variant: var(--ergo-status-green-dark);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n --act: var(--ergo-white);\\n --ink: var(--tcn-button-text-color, var(--btn-on-primary));\\n --mat: var(--tcn-button-color, var(--btn-primary));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"],\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n --act: var(--tcn-button-color, var(--btn-variant));\\n --ink: var(--tcn-button-color, var(--btn-variant));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n }\\n\\n / Decorations /\\n &[data-hierarchy=\\\"tertiary\\\"]:hover {\\n text-decoration: underline;\\n text-decoration-color: var(--ink);\\n text-decoration-thickness: 1px;\\n text-underline-offset: 4px;\\n }\\n\\n &[data-hierarchy=\\\"tertiary\\\"] {\\n border: 1px solid transparent;\\n }\\n\\n &[data-hierarchy=\\\"secondary\\\"] {\\n border: 1px solid var(--ink);\\n }\\n\\n &[data-hierarchy=\\\"primary\\\"] {\\n border: 1px solid var(--mat);\\n }\\n\\n transition:\\n box-shadow 0.1s,\\n transform 0.1s;\\n\\n &:hover,\\n &[data-hover] {\\n transform: translateY(-1px);\\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.12);\\n\\n / Increases the clickable area by 2px on hover to avoid click events not firing due to the button transform y - or slight mouse wiggles /\\n &::before,\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n height: 4px;\\n }\\n\\n &::before {\\n top: -2px;\\n }\\n\\n &::after {\\n bottom: -2px;\\n }\\n }\\n\\n &:active,\\n &[data-active] {\\n transform: translateY(1px);\\n box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.12);\\n }\\n }\\n\\n / @deprecated - use Button with utility prop instead /\\n .tcn-slim-button {\\n height: auto;\\n width: auto;\\n padding: 0;\\n\\n &[data-size=\\\"sm\\\"] {\\n min-height: 12px;\\n min-width: 12px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 10px;\\n min-width: 10px;\\n }\\n }\\n &[data-size=\\\"md\\\"] {\\n min-height: 18px;\\n min-width: 18px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 14px;\\n min-width: 14px;\\n }\\n }\\n\\n &[data-size=\\\"lg\\\"] {\\n min-height: 24px;\\n min-width: 24px;\\n padding: 0;\\n .tcn-icon {\\n min-height: 20px;\\n min-width: 20px;\\n }\\n }\\n }\\n\\n .tcn-button[data-size].tcn-select {\\n padding-inline-end: 26px;\\n }\\n\\n / Toggle /\\n .tcn-toggle {\\n --tgl-false: var(--ergo-accent-blue);\\n --tgl-true: var(--ergo-accent-blue);\\n --on-tgl-true: var(--ergo-white);\\n\\n --ink: var(--tcn-button-color, var(--tgl-false));\\n --act: var(--tcn-button-color, var(--tgl-false));\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-grey-light);\\n }\\n &[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--tgl-true));\\n --ink: var(--tcn-button-text-color, var(--ergo-white));\\n --act: var(--ergo-white);\\n &[data-is-disabled=\\\"true\\\"] {\\n --ink: var(--ergo-white);\\n --mat: var(--ergo-grey-light);\\n }\\n }\\n }\\n\\n .tcn-button-group {\\n .tcn-button-group-button:hover,\\n .tcn-button-group-button:active {\\n transform: none;\\n }\\n\\n .tcn-button-group-button {\\n border-radius: 0;\\n }\\n .tcn-button-group-button:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"] {\\n border: 0;\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"tertiary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--on-mat-faint);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:last-child) {\\n border-right: 1px solid var(--act-down);\\n }\\n .tcn-button-group-button[data-hierarchy=\\\"primary\\\"]:not(:first-child) {\\n border-left: 1px solid var(--act-down);\\n }\\n }\\n\\n .tcn-select-group {\\n .tcn-select-group-option:hover,\\n .tcn-select-group-option:active {\\n transform: none;\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"] {\\n color: var(--act);\\n border-color: var(--act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: var(--act-faint);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"]:active {\\n background: var(--act-down);\\n color: var(--on-act);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: var(--material-disabled);\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n background: var(--material-disabled);\\n color: white;\\n border: 1px solid var(--material-disabled);\\n }\\n\\n .tcn-select-group-option {\\n border-radius: 0;\\n }\\n .tcn-select-group-option:first-child {\\n border-top-left-radius: var(--shape-radius-medium);\\n border-bottom-left-radius: var(--shape-radius-medium);\\n }\\n .tcn-select-group-option:last-child {\\n border-top-right-radius: var(--shape-radius-medium);\\n border-bottom-right-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n / ===== Tabs ===== /\\n .tcn-tabs-bar {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n min-height: 24px;\\n padding: 0px var(--padding-medium);\\n text-decoration: none;\\n text-overflow: ellipsis;\\n overflow: hidden;\\n white-space: nowrap;\\n }\\n }\\n }\\n\\n / Default /\\n .tcn-tabs-bar[data-variant=\\\"default\\\"] {\\n .tcn-tabs-list {\\n .tcn-tab-item {\\n box-sizing: border-box;\\n border: none;\\n padding: 0px var(--padding-medium);\\n border-radius: 0;\\n }\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n --mat: var(--tcn-button-color, var(--material));\\n --ink: var(--tcn-button-text-color, var(--ergo-primary));\\n --act: var(--ergo-primary);\\n }\\n\\n .tcn-tab-item:focus-visible {\\n z-index: 2;\\n }\\n / Hover Indicator /\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:hover::after,\\n .tcn-tab-item[data-is-selected=\\\"false\\\"]:focus-visible::after {\\n content: \\\"\\\";\\n display: block;\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0px;\\n height: 1px;\\n background: var(--ergo-accent-blue);\\n pointer-events: none;\\n width: 100%;\\n z-index: 3;\\n }\\n\\n / Indicator /\\n &::after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: -1px;\\n left: 0;\\n min-height: 2px;\\n transform: translateX(var(--tabs-active-rectangle-position-x, 0));\\n width: var(--tabs-active-rectangle-width, 0);\\n background: var(--ergo-primary);\\n pointer-events: none;\\n border-bottom-left-radius: 2px;\\n border-bottom-right-radius: 2px;\\n transition:\\n transform 300ms ease-in-out,\\n width 300ms ease-in-out;\\n will-change: transform, width;\\n z-index: 2;\\n }\\n }\\n\\n / Rail /\\n &::before {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: 0px;\\n left: 0;\\n width: 100%;\\n height: 1px;\\n background: var(--material-line);\\n pointer-events: none;\\n z-index: 1;\\n }\\n }\\n\\n / Inline /\\n .tcn-tabs-bar[data-variant=\\\"inline\\\"] {\\n min-width: min-content;\\n width: auto;\\n flex-grow: 0;\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--on-material);\\n\\n .tcn-tabs-list {\\n gap: var(--gap-small);\\n padding: var(--padding-small);\\n .tcn-tab-item {\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n }\\n\\n / ===== MATERIAL ===== /\\n\\n .material {\\n background-color: var(--material);\\n color: var(--on-material);\\n }\\n\\n / ===== SURFACES ===== /\\n .tcn-draggable[data-is-draggable=\\\"true\\\"] {\\n .tcn-drag-handle {\\n cursor: move;\\n }\\n }\\n\\n .tcn-frame[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n .tcn-tooltip {\\n background: rgba(57, 85, 120, 0.85);\\n box-shadow: 0px 4px 7px 0px rgba(65, 65, 65, 0.66);\\n color: rgba(255, 255, 255, 1);\\n border-radius: var(--shape-radius-medium);\\n padding: var(--padding-medium);\\n }\\n\\n .tcn-list {\\n gap: var(--gap-medium);\\n .tcn-item {\\n height: 24px;\\n padding: 0px var(--padding-medium);\\n border-radius: var(--shape-radius-medium);\\n }\\n }\\n\\n / Scaffold: /\\n .tcn-scaffold {\\n --scaffold-v-inset: var(--v-inset, var(--padding-large));\\n --scaffold-header-size: var(--header-size, 40px);\\n --scaffold-footer-size: var(--footer-size, 40px);\\n --scaffold-utility-bar-size: var(--utility-bar-size, 32px);\\n --scaffold-divide-footer: var(--divide-footer, 1);\\n --scaffold-divide-header: var(--divide-header, 1);\\n\\n :where(.tcn-header) {\\n min-height: var(--scaffold-header-size);\\n padding: 0 var(--scaffold-v-inset);\\n gap: var(--gap-medium);\\n }\\n\\n / Border appears on body only when it follows header or utility-bar /\\n :where(.tcn-header) + :where(.tcn-body),\\n :where(.tcn-utility-bar) + :where(.tcn-body) {\\n border-top: calc(var(--scaffold-divide-header) 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n /* Border appears on footer only when it follows body and --scaffold-divide-footer is 1 /\\n :where(.tcn-body) + :where(.tcn-footer) {\\n border-top: calc(var(--scaffold-divide-footer) 1px) solid\\n var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-utility-bar) {\\n min-height: var(--scaffold-utility-bar-size);\\n padding: 0 var(--scaffold-v-inset);\\n gap: var(--gap-medium);\\n }\\n\\n :where(.tcn-body) {\\n --section-tab-start: var(--scaffold-v-inset);\\n\\n gap: var(--gap-medium);\\n .tcn-section {\\n --section-tab-start: var(--scaffold-v-inset);\\n }\\n }\\n\\n :where(.tcn-footer) {\\n gap: var(--gap-medium);\\n min-height: var(--scaffold-footer-size);\\n padding: 0 var(--scaffold-v-inset);\\n }\\n }\\n\\n .tcn-frame-veil[data-is-veil=\\\"true\\\"] {\\n background-color: rgba(0, 0, 0, 0.5);\\n }\\n\\n /* MODAL: /\\n .tcn-modal {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 1px solid var(--foreground-color-primary);\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n / WINDOW: /\\n .tcn-window {\\n --divide-header: 0;\\n\\n :where(.tcn-scaffold) {\\n box-shadow: 0px 4px 34px 0px #00000096;\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n border: 2px solid white;\\n }\\n\\n :where(.tcn-header) {\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-pop-confirm {\\n --divide-header: 0;\\n --v-inset: var(--padding-medium);\\n\\n :where(.tcn-scaffold) {\\n box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4);\\n border-radius: var(--shape-radius-medium);\\n background-color: var(--background-color-primary);\\n overflow: hidden;\\n }\\n\\n :where(.tcn-header) {\\n min-height: 32px;\\n\\n --material: var(--ergo-secondary-dark);\\n --on-material: var(--ergo-white);\\n --action: var(--ergo-tertiary);\\n --on-action: var(--ergo-secondary-dark);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n .tcn-confirm {\\n background-color: var(--background-color-primary);\\n }\\n\\n / PANEL /\\n .tcn-panel {\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n overflow: hidden;\\n }\\n\\n / Card /\\n .tcn-card {\\n --header-size: 32px;\\n --footer-size: 32px;\\n --utility-bar-size: 24px;\\n --divide-header: 0;\\n\\n background-color: var(--background-color-primary);\\n border-radius: var(--shape-radius-medium);\\n border: 1px solid var(--foreground-color-primary);\\n overflow: hidden;\\n\\n :where(.tcn-header) {\\n min-height: 32px;\\n\\n --material: var(--ergo-secondary-light);\\n --on-material: var(--ergo-accent-blue);\\n --action: var(--ergo-secondary);\\n --on-action: var(--ergo-white);\\n\\n background-color: var(--material);\\n color: var(--on-material);\\n :where(.tcn-typography) {\\n color: inherit;\\n }\\n }\\n }\\n\\n / SECTION /\\n .tcn-section {\\n --max-section-depth: 4;\\n --section-tab-width: 4px;\\n --section-tab-start: 8px;\\n --section-tab-depth: 0;\\n --section-tab: calc(\\n var(--section-tab-start) +\\n (var(--section-tab-width) var(--section-tab-depth))\\n );\\n --section-action: var(--ergo-secondary);\\n --section-mat: var(--ergo-secondary-light);\\n --section-on-mat: var(--ergo-ink-primary);\\n }\\n\\n .tcn-heading {\\n background-color: #f1f1f1;\\n padding-inline-start: 8px;\\n height: 30px;\\n z-index: 5;\\n }\\n\\n .tcn-section > .tcn-heading {\\n z-index: calc(var(--max-section-depth) - var(--section-tab-depth));\\n padding-inline-start: var(--section-tab);\\n --material: var(--section-mat);\\n --on-material: var(--section-on-mat);\\n --action: var(--section-action);\\n background-color: var(--material);\\n color: var(--on-material);\\n gap: var(--gap-small);\\n }\\n\\n .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: var(--section-tab);\\n }\\n\\n .tcn-section > .tcn-section {\\n --section-tab-depth: 1;\\n --section-mat: var(--ergo-accent-blue-light);\\n --section-action: var(--ergo-accent-blue);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 2;\\n --section-mat: var(--ergo-accent-green-light);\\n --section-action: var(--ergo-accent-green-dark);\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section {\\n --section-tab-depth: 3;\\n --section-mat: var(--ergo-tertiary-light);\\n --section-action: var(--ergo-tertiary-dark);\\n }\\n\\n .tcn-caret {\\n --caret-size: 12px;\\n --caret-triangle-height: calc(var(--caret-size) / 2);\\n --caret-triangle-width: var(--caret-size);\\n --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n --caret-triangle-peak: var(--caret-triangle-width) solid var(--material);\\n\\n width: 0;\\n height: 0;\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n }\\n}\\n\"","import css from './ergo_theme.css?raw';\nimport '@fontsource/lato';\n\nexport const ergoStyleSheet = new CSSStyleSheet();\nergoStyleSheet.replaceSync(css);\n"],"names":["css","ergoStyleSheet"],"mappings":";AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCGFC,IAAiB,IAAI,cAAA;AAClCA,EAAe,YAAYD,CAAG;"}

package/dist/themes/themes/windows_98/windows_98.css CHANGED Viewed

	@@ -1 +1 @@
1	- @layer tcn-theme{:root{--scalar: 1;--gap-small: 2px;--gap-medium: 4px;--gap-large: 8px;--padding-small: 2px;--padding-medium: 4px;--padding-large: 8px;--status-color-disabled: #7f7f7f;--status-color-info: #000080;--status-color-warning: #000080;--status-color-error: #be0000;--async-color-initial: #c0c0c0;--async-color-pending: #000080;--async-color-success: #00ff00;--async-color-failed: #be0000;--primary-color-faint: #c0c0c0;--primary-color: #000080;--primary-color-strong: #000080;--secondary-color-faint: #c0c0c0;--secondary-color: #000080;--secondary-color-strong: #000080;--tertiary-color-faint: #c0c0c0;--tertiary-color: #000080;--tertiary-color-strong: #000080;--quaternary-color-faint: #c0c0c0;--quaternary-color: #000080;--quaternary-color-strong: #000080;--background-color-primary: #c0c0c0;--background-color-secondary: #c0c0c0;--background-color-tertiary: #c0c0c0;--background-color-quaternary: #c0c0c0;--foreground-color-primary: #222222;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #000080;--font-color: #222222;--font-family: "Microsoft Sans Serif", "Arial", sans-serif;--font-size: 12px}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);-webkit-font-smoothing:none}.tcn-title[data-size=sm]{font-size:10px}.tcn-title[data-size=md]{font-size:12px}.tcn-title[data-size=lg]{font-size:14px}.tcn-body-text[data-size=sm]{font-size:10px}.tcn-body-text[data-size=md]{font-size:11px}.tcn-body-text[data-size=lg]{font-size:12px}.tcn-button-text{position:relative;opacity:1;font-size:12px!important}.tcn-base-button,.tcn-button,.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=primary]:hover,.tcn-button[data-hierarchy=secondary]:hover{background:silver;border:none;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;box-sizing:border-box;color:#222;min-height:23px;min-width:0;padding:0 12px;font-size:12px;text-decoration:none;outline:none}.tcn-button[data-is-disabled=true]{text-shadow:1px 1px 0 #fff}.tcn-button[data-hierarchy=primary]>,.tcn-button[data-hierarchy=secondary]>{position:relative}.tcn-button[data-hierarchy=primary]:active>,.tcn-button[data-hierarchy=secondary]:active>{position:relative;top:0;left:1px}.tcn-button[data-hierarchy=primary]:focus:not(:active):before,.tcn-button[data-hierarchy=secondary]:focus:not(:active):before{content:"";position:absolute;inset:1px 2px 2px 1px;outline:1px dotted #222;outline-offset:-3px}.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=primary]:hover{box-shadow:inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset -3px -3px gray,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary]:active,.tcn-button[data-hierarchy=secondary]:active{background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#222;border:none;text-decoration:none}.tcn-button[data-hierarchy=primary]:focus,.tcn-button[data-hierarchy=secondary]:focus,.tcn-button[data-hierarchy=primary]:focus:not(:active),.tcn-button[data-hierarchy=secondary]:focus:not(:active){background:silver;border:none;text-decoration:none}.tcn-button[data-hierarchy=tertiary]{padding:0 4px;background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:hover{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:active{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:#00008099;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:focus,.tcn-button[data-hierarchy=tertiary]:focus:not(:active){background:none;outline:1px dotted #000080;outline-offset:0;border:none;text-decoration:none}.tcn-button[data-hierarchy=secondary][data-is-disabled=true]{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{box-shadow:inset -2px -2px #717171,inset 1px 1px #717171,inset -3px -3px #999,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true],.tcn-button[data-hierarchy=secondary][data-is-disabled=true],.tcn-button[data-hierarchy=tertiary][data-is-disabled=true]{color:#7f7f7f;cursor:not-allowed}.tcn-button.select,.tcn-button.select:hover{position:relative;padding-inline-end:20px;padding-inline-start:4px}.tcn-button.select:dir(ltr):after{content:"";position:absolute;right:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-button.select:dir(rtl):after{content:"";position:absolute;left:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:#222;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-slim-button,.tcn-slim-button[data-hierarchy=primary],.tcn-slim-button[data-hierarchy=secondary],.tcn-slim-button[data-hierarchy=primary]:hover,.tcn-slim-button[data-hierarchy=secondary]:hover{padding:2px;min-width:0;min-height:0;height:auto;width:auto}.tcn-slim-button[data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm],.tcn-slim-button[data-hierarchy=secondary][data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=sm]:hover{padding:1px}.tcn-slim-button[data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md],.tcn-slim-button[data-hierarchy=secondary][data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=md]:hover{padding:2px}.tcn-slim-button[data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg],.tcn-slim-button[data-hierarchy=secondary][data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=lg]:hover{padding:4px}.tcn-select-group .tcn-button[data-hierarchy=primary],.tcn-select-group .tcn-button[data-hierarchy=primary]:hover,.tcn-select-group .tcn-button[data-hierarchy=primary]:focus{background-color:navy;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;color:#fff}.tcn-select-group .tcn-button:hover,.tcn-select-group .tcn-button:focus,.tcn-button-group .tcn-button:hover,.tcn-button-group .tcn-button:focus{z-index:1}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input,.tcn-multi-combo-box-values-container,.tcn-multiselect-values-container{border-radius:0;outline:none;border:none;background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}.tcn-suggestion-list-search-input{box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a,0 -2px 0 2px silver}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input{height:23px}.tcn-input:is(:focus,:focus-visible,:active,:hover),.tcn-input:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false],.tcn-textarea:is(:focus,:focus-visible,:active,:hover),.tcn-textarea:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false]{outline:none;border:none}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true],.tcn-input[data-is-disabled=true]::placeholder,.tcn-textarea[data-is-disabled=true]::placeholder,.tcn-suggestion-list-search-input[data-is-disabled=true]::placeholder,.tcn-multiselect-values-container[data-is-disabled=true]::placeholder{color:#7f7f7f;cursor:not-allowed;background-color:silver}.tcn-select-group .tcn-button[data-hierarchy=primary]:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#fff}.tcn-select-group .tcn-button[data-hierarchy=primary]:focus:not(:active):before{outline:1px dotted #fcfcfc}.tcn-suggestion-list{padding:2px}.tcn-suggestion-item{padding:0;background:transparent;border:none;min-height:0}.tcn-suggestion-item:hover{background:navy;color:#fff}.tcn-suggestion-item[data-is-selected=true],.tcn-suggestion-item[data-is-focused=true]{padding:0;background:navy;color:#fff;border:none}.tcn-suggestion-list-search-input{border-radius:0;padding:4px;height:24px;min-height:24px}.tcn-title{color:#000}.header .tcn-title{color:#fff}.header[data-kind=window]{padding:4px;background:linear-gradient(90deg,navy,#1084d0);border:none;color:#fff}.header[data-kind=window]>.tcn-button{color:#222}.header[data-kind=toolbar],.header[data-kind=app],.header[data-kind=nav]{padding:4px 0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5;padding-inline-start:4px}.header[data-kind=panel]{padding:4px;background:linear-gradient(90deg,#7c7c7c,#aeaeae);border:none;color:#fff}.tcn-main[data-kind=window],.tcn-main[data-kind=app],.tcn-main[data-kind=nav],.tcn-main[data-kind=toolbar],.tcn-main[data-kind=section],.tcn-main[data-kind=panel],.tcn-main[data-kind=drawer],.tcn-main[data-kind=card],.tcn-panel,.tcn-h-panel,.tcn-v-panel,.tcn-sidebar-start[data-hierarchy],.tcn-sidebar-end[data-hierarchy]{border-radius:0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5}.tcn-column:after{content:"";position:absolute;bottom:var(--padding);top:var(--padding);right:0;width:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-column:last-child:after{display:none}.tcn-main[data-kind=panel],.tcn-sidebar-start[data-kind=panel],.tcn-sidebar-end[data-kind=panel]{padding:0}.tcn-sidebar-start[data-hierarchy=tertiary],.tcn-sidebar-start[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-start[data-kind=nav],.tcn-v-nav{background:#fff;padding:2px;border-top:1px solid #808080;border-bottom:1px solid #f5f5f5;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-sidebar-end[data-hierarchy=tertiary],.tcn-sidebar-end[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-end[data-hierarchy=primary],.tcn-sidebar-start[data-hierarchy=primary]{background:#fff;color:#222}.tcn-footer[data-kind=window]{padding:4px;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver;color:#222}.tcn-window,.tcn-date-picker-popover,.tcn-date-picker-year-selector,.tcn-menu,.tcn-suggestion-list{border-radius:0;background:silver;padding:4px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #f5f5f5,inset -2px -2px gray,inset 2px 2px silver}.tcn-suggestion-list-header{background:silver}.tcn-date-picker-box{background:silver;padding:0}.tcn-date-picker-date,.tcn-date-picker-year-button{box-shadow:none!important}.tcn-date-picker-header{height:20px}.tcn-button.tcn-phone-number-input-select,.tcn-button.tcn-phone-number-input-select:hover{min-width:0}.tcn-phone-number-input[data-has-phone-book=false]{border-end-end-radius:0px;border-start-end-radius:0px}.tcn-button.tcn-phone-number-input-phone-book{max-width:23px!important;max-height:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}.tcn-button.tcn-date-picker-year-select{padding-inline-end:20px}.tcn-button.tcn-date-picker-year-select:dir(ltr):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-button.tcn-date-picker-year-select:dir(rtl):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-time-box{border-radius:0;background:#fff;border:none;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-time-box-title-container{min-height:25px;height:25px}.tcn-field-set{padding:8px 12px 12px;margin-top:10px;border-radius:0;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #f5f5f5,inset -2px -2px gray}.tcn-field-set>.tcn-field-set-body{background:transparent;padding:0;gap:8px}.tcn-field-set>.tcn-field-set-legend{position:relative;top:-7px;left:-4px;height:0}.tcn-field-set-legend-text{background:silver;padding:0;font-size:12px}.tcn-chip{background:silver;border-radius:0;color:#222;border:none;font-size:12px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-checkbox{outline:none;border-radius:0;background:#fff;border:none;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-checkbox:focus{outline:none}.tcn-checkbox[data-checked=true]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=false]:active{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=true]{background-color:silver}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E")}.tcn-radio,.tcn-radio[data-checked=true],.tcn-radio[checked=true]{width:14px;height:14px;min-width:14px;min-height:14px;border-inline-end:1px solid #fff;border-inline-start:1px solid #222;border-block-end:1px solid #fff;border-block-start:1px solid #222}.tcn-radio:focus{outline:none}.tcn-radio:before{content:"";background:transparent;position:absolute;border-radius:50%;inset:0;border-inline-end:1px solid #dfdfdf;border-inline-start:1px solid #808080;border-block-end:1px solid #dfdfdf;border-block-start:1px solid #808080}.tcn-radio[data-checked=true]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;background:#222;border-radius:50%}.tcn-switch:focus,.tcn-switch:focus-visible,.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:none}.tcn-switch-wrapper{border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;border-color:silver;background-color:#fff;transition:background-color .2s ease-out;margin-top:2px;margin-bottom:3px}.tcn-switch-wrapper[data-is-checked=false]>.tcn-switch-icon{color:#222}.tcn-switch:after{content:"";cursor:pointer;position:absolute;top:0;transition:transform .2s ease-out;width:calc(16px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-switch-wrapper[data-is-checked=true][data-is-disabled=false]{background-color:var(--accent-color);border-color:silver}.tcn-switch-wrapper[data-is-disabled=true]{background-color:silver;border-color:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #7f7f7f}.tcn-switch[data-is-disabled=true]:after{box-shadow:inset -1px -1px #666,inset 1px 1px #fff,inset -2px -2px #949494,inset 2px 2px silver}.tcn-switch-wrapper[data-is-disabled=true]>.tcn-switch-icon{color:#707070}.tcn-slider::-webkit-slider-runnable-track{border-radius:0;height:5px;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-webkit-slider-runnable-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-webkit-slider-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-slider[data-is-disabled=false]:active::-webkit-slider-thumb{background-color:silver}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-slider::-moz-range-track{border-radius:0;height:5px;border:none;background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-moz-range-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-moz-range-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;cursor:pointer}.tcn-slider[data-is-disabled=false]:active::-moz-range-thumb,.tcn-slider[data-is-disabled=false]:focus::-moz-range-thumb{background-color:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;outline:none}.tcn-slider[data-is-disabled=true]::-moz-range-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver;cursor:not-allowed}.tcn-nav-item,.tcn-nav-item[data-is-selected],.tcn-menu-item{border-radius:0;font-size:12px}.tcn-nav-item,.tcn-menu-item .tcn-body-text{font-size:12px}.tcn-main[data-hierarchy=primary],.tcn-main[data-hierarchy=secondary],.tcn-main[data-hierarchy=tertiary]{background:silver;padding:0}.tcn-h-nav{border:none}.tcn-h-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-footer{border:none}.tcn-footer:after{content:"";position:absolute;left:0;right:0;top:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-section{background:silver;gap:0px;font-size:12px}.tcn-heading{background:silver;padding-inline-start:8px;height:23px;z-index:5;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-section>.tcn-heading{top:0;padding-inline-start:8px;z-index:4}.tcn-section>.tcn-section>.tcn-heading{top:23px;padding-inline-start:12px;z-index:3}.tcn-section>.tcn-section>.tcn-section>.tcn-heading{top:46px;padding-inline-start:16px;z-index:2}.tcn-section>.tcn-section>.tcn-section>.tcn-section .tcn-heading{top:69px;padding-inline-start:20px;z-index:1}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:8px}.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:12px}.tcn-section>.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:16px}.tcn-section>.tcn-section>.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:20px}.tcn-section>.tcn-row{background:#fff;padding:4px;font-size:12px;gap:4px}.tcn-base-carrot{--carrot-size: 12px;--carrot-triangle-height: calc(var(--carrot-size) / 2);--carrot-triangle-width: var(--carrot-size);--carrot-triangle-base: var(--carrot-triangle-height) solid transparent;--carrot-triangle-peak: var(--carrot-triangle-width) solid #000;width:0;height:0;flex-grow:0;display:inline-block}.tcn-base-carrot[data-direction=top]{border-bottom:var(--carrot-triangle-peak);border-left:var(--carrot-triangle-base);border-right:var(--carrot-triangle-base)}.tcn-base-carrot[data-direction=bottom]{border-top:var(--carrot-triangle-peak);border-left:var(--carrot-triangle-base);border-right:var(--carrot-triangle-base)}.tcn-base-carrot[data-direction=start]{border-right:var(--carrot-triangle-peak);border-top:var(--carrot-triangle-base);border-bottom:var(--carrot-triangle-base)}.tcn-base-carrot[data-direction=end]{border-left:var(--carrot-triangle-peak);border-top:var(--carrot-triangle-base);border-bottom:var(--carrot-triangle-base)}}.tcn-tabs-list{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0}.tcn-tabs-list .tcn-tab-item{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 gray,inset 2px 2px #fff}.tcn-tabs-list .tcn-tab-item[data-is-selected=true]{background-color:silver;margin-left:-3px;margin-top:-2px;padding-bottom:2px;position:relative;z-index:8}
1	+ @layer tcn-theme{:root{--scalar: 1;--gap-small: 2px;--gap-medium: 4px;--gap-large: 8px;--padding-small: 2px;--padding-medium: 4px;--padding-large: 8px;--status-color-disabled: #7f7f7f;--status-color-info: #000080;--status-color-warning: #000080;--status-color-error: #be0000;--async-color-initial: #c0c0c0;--async-color-pending: #000080;--async-color-success: #00ff00;--async-color-failed: #be0000;--primary-color-faint: #c0c0c0;--primary-color: #000080;--primary-color-strong: #000080;--secondary-color-faint: #c0c0c0;--secondary-color: #000080;--secondary-color-strong: #000080;--tertiary-color-faint: #c0c0c0;--tertiary-color: #000080;--tertiary-color-strong: #000080;--quaternary-color-faint: #c0c0c0;--quaternary-color: #000080;--quaternary-color-strong: #000080;--background-color-primary: #c0c0c0;--background-color-secondary: #c0c0c0;--background-color-tertiary: #c0c0c0;--background-color-quaternary: #c0c0c0;--foreground-color-primary: #222222;--foreground-color-secondary: #222222;--foreground-color-tertiary: #222222;--foreground-color-quaternary: #222222;--accent-color: #000080;--font-color: #222222;--font-family: "Microsoft Sans Serif", "Arial", sans-serif;--font-size: 12px}.tcn-theme-root{font-family:var(--font-family);color:var(--font-color);-webkit-font-smoothing:none}.tcn-title[data-size=sm]{font-size:10px}.tcn-title[data-size=md]{font-size:12px}.tcn-title[data-size=lg]{font-size:14px}.tcn-body-text[data-size=sm]{font-size:10px}.tcn-body-text[data-size=md]{font-size:11px}.tcn-body-text[data-size=lg]{font-size:12px}.tcn-button-text{position:relative;opacity:1;font-size:12px!important}.tcn-base-button,.tcn-button,.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=secondary],.tcn-button[data-hierarchy=primary]:hover,.tcn-button[data-hierarchy=secondary]:hover{background:silver;border:none;border-radius:0;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;box-sizing:border-box;color:#222;min-height:23px;min-width:0;padding:0 12px;font-size:12px;text-decoration:none;outline:none}.tcn-button[data-is-disabled=true]{text-shadow:1px 1px 0 #fff}.tcn-button[data-hierarchy=primary]>,.tcn-button[data-hierarchy=secondary]>{position:relative}.tcn-button[data-hierarchy=primary]:active>,.tcn-button[data-hierarchy=secondary]:active>{position:relative;top:0;left:1px}.tcn-button[data-hierarchy=primary]:focus:not(:active):before,.tcn-button[data-hierarchy=secondary]:focus:not(:active):before{content:"";position:absolute;inset:1px 2px 2px 1px;outline:1px dotted #222;outline-offset:-3px}.tcn-button[data-hierarchy=primary],.tcn-button[data-hierarchy=primary]:hover{box-shadow:inset -2px -2px #0a0a0a,inset 1px 1px #0a0a0a,inset -3px -3px gray,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary]:active,.tcn-button[data-hierarchy=secondary]:active{background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#222;border:none;text-decoration:none}.tcn-button[data-hierarchy=primary]:focus,.tcn-button[data-hierarchy=secondary]:focus,.tcn-button[data-hierarchy=primary]:focus:not(:active),.tcn-button[data-hierarchy=secondary]:focus:not(:active){background:silver;border:none;text-decoration:none}.tcn-button[data-hierarchy=tertiary]{padding:0 4px;background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:hover{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:navy;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:active{background:none;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;color:#00008099;min-height:auto;min-width:auto;text-decoration:none}.tcn-button[data-hierarchy=tertiary]:focus,.tcn-button[data-hierarchy=tertiary]:focus:not(:active){background:none;outline:1px dotted #000080;outline-offset:0;border:none;text-decoration:none}.tcn-button[data-hierarchy=secondary][data-is-disabled=true]{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true]{box-shadow:inset -2px -2px #717171,inset 1px 1px #717171,inset -3px -3px #999,inset 2px 2px #fff,inset 3px 3px silver}.tcn-button[data-hierarchy=primary][data-is-disabled=true],.tcn-button[data-hierarchy=secondary][data-is-disabled=true],.tcn-button[data-hierarchy=tertiary][data-is-disabled=true]{color:#7f7f7f;cursor:not-allowed}.tcn-button.select,.tcn-button.select:hover{position:relative;padding-inline-end:20px;padding-inline-start:4px}.tcn-button.select:dir(ltr):after{content:"";position:absolute;right:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:currentColor;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-button.select:dir(rtl):after{content:"";position:absolute;left:calc(4px * var(--scalar, 1));top:50%;transform:translateY(-50%);width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));background-color:#222;-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;pointer-events:none}.tcn-slim-button,.tcn-slim-button[data-hierarchy=primary],.tcn-slim-button[data-hierarchy=secondary],.tcn-slim-button[data-hierarchy=primary]:hover,.tcn-slim-button[data-hierarchy=secondary]:hover{padding:2px;min-width:0;min-height:0;height:auto;width:auto}.tcn-slim-button[data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm],.tcn-slim-button[data-hierarchy=secondary][data-size=sm],.tcn-slim-button[data-hierarchy=primary][data-size=sm]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=sm]:hover{padding:1px}.tcn-slim-button[data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md],.tcn-slim-button[data-hierarchy=secondary][data-size=md],.tcn-slim-button[data-hierarchy=primary][data-size=md]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=md]:hover{padding:2px}.tcn-slim-button[data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg],.tcn-slim-button[data-hierarchy=secondary][data-size=lg],.tcn-slim-button[data-hierarchy=primary][data-size=lg]:hover,.tcn-slim-button[data-hierarchy=secondary][data-size=lg]:hover{padding:4px}.tcn-select-group .tcn-button[data-hierarchy=primary],.tcn-select-group .tcn-button[data-hierarchy=primary]:hover,.tcn-select-group .tcn-button[data-hierarchy=primary]:focus{background-color:navy;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;color:#fff}.tcn-select-group .tcn-button:hover,.tcn-select-group .tcn-button:focus,.tcn-button-group .tcn-button:hover,.tcn-button-group .tcn-button:focus{z-index:1}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input,.tcn-multi-combo-box-values-container,.tcn-multiselect-values-container{border-radius:0;outline:none;border:none;background-color:#fff;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;box-sizing:border-box;padding:3px 4px}.tcn-suggestion-list-search-input{box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a,0 -2px 0 2px silver}.tcn-input,.tcn-textarea,.tcn-suggestion-list-search-input{height:23px}.tcn-input:is(:focus,:focus-visible,:active,:hover),.tcn-input:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false],.tcn-textarea:is(:focus,:focus-visible,:active,:hover),.tcn-textarea:is(:focus,:focus-visible,:active,:hover)[data-is-disabled=false]{outline:none;border:none}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-input[data-is-disabled=true],.tcn-textarea[data-is-disabled=true],.tcn-suggestion-list-search-input[data-is-disabled=true],.tcn-multiselect-values-container[data-is-disabled=true],.tcn-input[data-is-disabled=true]::placeholder,.tcn-textarea[data-is-disabled=true]::placeholder,.tcn-suggestion-list-search-input[data-is-disabled=true]::placeholder,.tcn-multiselect-values-container[data-is-disabled=true]::placeholder{color:#7f7f7f;cursor:not-allowed;background-color:silver}.tcn-select-group .tcn-button[data-hierarchy=primary]:active{box-shadow:inset -1px -1px #fff,inset 1px 1px #0a0a0a,inset -2px -2px silver,inset 2px 2px gray;color:#fff}.tcn-select-group .tcn-button[data-hierarchy=primary]:focus:not(:active):before{outline:1px dotted #fcfcfc}.tcn-suggestion-list{padding:2px}.tcn-suggestion-item{padding:0;background:transparent;border:none;min-height:0}.tcn-suggestion-item:hover{background:navy;color:#fff}.tcn-suggestion-item[data-is-selected=true],.tcn-suggestion-item[data-is-focused=true]{padding:0;background:navy;color:#fff;border:none}.tcn-suggestion-list-search-input{border-radius:0;padding:4px;height:24px;min-height:24px}.tcn-title{color:#000}.header .tcn-title{color:#fff}.header[data-kind=window]{padding:4px;background:linear-gradient(90deg,navy,#1084d0);border:none;color:#fff}.header[data-kind=window]>.tcn-button{color:#222}.header[data-kind=toolbar],.header[data-kind=app],.header[data-kind=nav]{padding:4px 0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5;padding-inline-start:4px}.header[data-kind=panel]{padding:4px;background:linear-gradient(90deg,#7c7c7c,#aeaeae);border:none;color:#fff}.tcn-main[data-kind=window],.tcn-main[data-kind=app],.tcn-main[data-kind=nav],.tcn-main[data-kind=toolbar],.tcn-main[data-kind=section],.tcn-main[data-kind=panel],.tcn-main[data-kind=drawer],.tcn-main[data-kind=card],.tcn-panel,.tcn-h-panel,.tcn-v-panel,.tcn-sidebar-start[data-hierarchy],.tcn-sidebar-end[data-hierarchy]{border-radius:0;background:silver;color:#222;border-bottom:1px solid #808080;border-top:1px solid #f5f5f5;border-right:1px solid #808080;border-left:1px solid #f5f5f5}.tcn-column:after{content:"";position:absolute;bottom:var(--padding);top:var(--padding);right:0;width:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-column:last-child:after{display:none}.tcn-main[data-kind=panel],.tcn-sidebar-start[data-kind=panel],.tcn-sidebar-end[data-kind=panel]{padding:0}.tcn-sidebar-start[data-hierarchy=tertiary],.tcn-sidebar-start[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-start[data-kind=nav],.tcn-v-nav{background:#fff;padding:2px;border-top:1px solid #808080;border-bottom:1px solid #f5f5f5;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-sidebar-end[data-hierarchy=tertiary],.tcn-sidebar-end[data-hierarchy=secondary]{background:silver;color:#222}.tcn-sidebar-end[data-hierarchy=primary],.tcn-sidebar-start[data-hierarchy=primary]{background:#fff;color:#222}.tcn-footer[data-kind=window]{padding:4px;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver;color:#222}.tcn-window,.tcn-date-picker-popover,.tcn-date-picker-year-selector,.tcn-menu,.tcn-suggestion-list{border-radius:0;background:silver;padding:4px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #f5f5f5,inset -2px -2px gray,inset 2px 2px silver}.tcn-suggestion-list-header{background:silver}.tcn-date-picker-box{background:silver;padding:0}.tcn-date-picker-date,.tcn-date-picker-year-button{box-shadow:none!important}.tcn-date-picker-header{height:20px}.tcn-button.tcn-phone-number-input-select,.tcn-button.tcn-phone-number-input-select:hover{min-width:0}.tcn-phone-number-input[data-has-phone-book=false]{border-end-end-radius:0px;border-start-end-radius:0px}.tcn-button.tcn-phone-number-input-phone-book{max-width:23px!important;max-height:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important}.tcn-button.tcn-date-picker-year-select{padding-inline-end:20px}.tcn-button.tcn-date-picker-year-select:dir(ltr):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-button.tcn-date-picker-year-select:dir(rtl):after{width:calc(12px * var(--scalar, 1));height:calc(12px * var(--scalar, 1));-webkit-mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E")}.tcn-time-box{border-radius:0;background:#fff;border:none;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-time-box-title-container{min-height:25px;height:25px}.tcn-field-set{padding:8px 12px 12px;margin-top:10px;border-radius:0;background:silver;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #f5f5f5,inset -2px -2px gray}.tcn-field-set>.tcn-field-set-body{background:transparent;padding:0;gap:8px}.tcn-field-set>.tcn-field-set-legend{position:relative;top:-7px;left:-4px;height:0}.tcn-field-set-legend-text{background:silver;padding:0;font-size:12px}.tcn-chip{background:silver;border-radius:0;color:#222;border:none;font-size:12px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-checkbox{outline:none;border-radius:0;background:#fff;border:none;background-position:center;background-repeat:no-repeat;box-shadow:inset 1px 1px gray,inset -1px -1px #f5f5f5,inset 2px 2px #c1c1c1,inset -2px -2px silver}.tcn-checkbox:focus{outline:none}.tcn-checkbox[data-checked=true]{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=false]:active{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E")}.tcn-checkbox[data-is-disabled=true]{background-color:silver}.tcn-checkbox[data-checked=true][data-is-disabled=true]{background-image:url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E")}.tcn-radio,.tcn-radio[data-checked=true],.tcn-radio[checked=true]{width:14px;height:14px;min-width:14px;min-height:14px;border-inline-end:1px solid #fff;border-inline-start:1px solid #222;border-block-end:1px solid #fff;border-block-start:1px solid #222}.tcn-radio:focus{outline:none}.tcn-radio:before{content:"";background:transparent;position:absolute;border-radius:50%;inset:0;border-inline-end:1px solid #dfdfdf;border-inline-start:1px solid #808080;border-block-end:1px solid #dfdfdf;border-block-start:1px solid #808080}.tcn-radio[data-checked=true]:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40%;height:40%;background:#222;border-radius:50%}.tcn-switch:focus,.tcn-switch:focus-visible,.tcn-switch-wrapper[data-focused=true][data-is-checked=false],.tcn-switch-wrapper[data-focused=true][data-is-checked=true]{outline:none}.tcn-switch-wrapper{border-radius:0;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;border-color:silver;background-color:#fff;transition:background-color .2s ease-out;margin-top:2px;margin-bottom:3px}.tcn-switch-wrapper[data-is-checked=false]>.tcn-switch-icon{color:#222}.tcn-switch:after{content:"";cursor:pointer;position:absolute;top:0;transition:transform .2s ease-out;width:calc(16px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-switch-wrapper[data-is-checked=true][data-is-disabled=false]{background-color:var(--accent-color);border-color:silver}.tcn-switch-wrapper[data-is-disabled=true]{background-color:silver;border-color:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #7f7f7f}.tcn-switch[data-is-disabled=true]:after{box-shadow:inset -1px -1px #666,inset 1px 1px #fff,inset -2px -2px #949494,inset 2px 2px silver}.tcn-switch-wrapper[data-is-disabled=true]>.tcn-switch-icon{color:#707070}.tcn-slider::-webkit-slider-runnable-track{border-radius:0;height:5px;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-webkit-slider-runnable-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-webkit-slider-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-slider[data-is-disabled=false]:active::-webkit-slider-thumb{background-color:silver}.tcn-slider[data-is-disabled=true]::-webkit-slider-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver}.tcn-slider::-moz-range-track{border-radius:0;height:5px;border:none;background:silver;box-shadow:inset -1px -1px #fff,inset 1px 1px gray,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a}.tcn-slider::-moz-range-track [data-is-disabled=true]{box-shadow:inset -1px -1px #fff,inset 1px 1px #999,inset -2px -2px #dfdfdf,inset 2px 2px #717171}.tcn-slider::-moz-range-thumb{outline:none;width:calc(12px * var(--scalar, 1));height:calc(16px * var(--scalar, 1));border-radius:0;border:none;background-color:silver;box-sizing:border-box;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;cursor:pointer}.tcn-slider[data-is-disabled=false]:active::-moz-range-thumb,.tcn-slider[data-is-disabled=false]:focus::-moz-range-thumb{background-color:silver;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver;outline:none}.tcn-slider[data-is-disabled=true]::-moz-range-thumb{box-shadow:inset -1px -1px #717171,inset 1px 1px #fff,inset -2px -2px #999,inset 2px 2px silver;cursor:not-allowed}.tcn-nav-item,.tcn-nav-item[data-is-selected],.tcn-menu-item{border-radius:0;font-size:12px}.tcn-nav-item,.tcn-menu-item .tcn-body-text{font-size:12px}.tcn-main[data-hierarchy=primary],.tcn-main[data-hierarchy=secondary],.tcn-main[data-hierarchy=tertiary]{background:silver;padding:0}.tcn-h-nav{border:none}.tcn-h-nav:after{content:"";position:absolute;left:0;right:0;bottom:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-footer{border:none}.tcn-footer:after{content:"";position:absolute;left:0;right:0;top:0;height:0px;border-bottom:1px solid #f5f5f5;border-top:1px solid #808080;border-right:1px solid #f5f5f5;border-left:1px solid #808080}.tcn-section{background:silver;gap:0px;font-size:12px}.tcn-heading{background:silver;padding-inline-start:8px;height:23px;z-index:5;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px gray,inset 2px 2px silver}.tcn-section>.tcn-heading{top:0;padding-inline-start:8px;z-index:4}.tcn-section>.tcn-section>.tcn-heading{top:23px;padding-inline-start:12px;z-index:3}.tcn-section>.tcn-section>.tcn-section>.tcn-heading{top:46px;padding-inline-start:16px;z-index:2}.tcn-section>.tcn-section>.tcn-section>.tcn-section .tcn-heading{top:69px;padding-inline-start:20px;z-index:1}.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:8px}.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:12px}.tcn-section>.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:16px}.tcn-section>.tcn-section>.tcn-section>.tcn-section>:not(.tcn-heading,.tcn-section){padding-inline-start:20px}.tcn-section>.tcn-row{background:#fff;padding:4px;font-size:12px;gap:4px}.tcn-caret{--caret-size: 12px;--caret-triangle-height: calc(var(--caret-size) / 2);--caret-triangle-width: var(--caret-size);--caret-triangle-base: var(--caret-triangle-height) solid transparent;--caret-triangle-peak: var(--caret-triangle-width) solid #000;width:0;height:0;flex-grow:0;display:inline-block}.tcn-caret[data-direction=top]{border-bottom:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=bottom]{border-top:var(--caret-triangle-peak);border-left:var(--caret-triangle-base);border-right:var(--caret-triangle-base)}.tcn-caret[data-direction=start]{border-right:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}.tcn-caret[data-direction=end]{border-left:var(--caret-triangle-peak);border-top:var(--caret-triangle-base);border-bottom:var(--caret-triangle-base)}}.tcn-tabs-list{display:flex;list-style-type:none;margin:0 0 -2px;padding-left:3px;position:relative;text-indent:0}.tcn-tabs-list .tcn-tab-item{border-top-left-radius:3px;border-top-right-radius:3px;box-shadow:inset -1px 0 #0a0a0a,inset 1px 1px #dfdfdf,inset -2px 0 gray,inset 2px 2px #fff}.tcn-tabs-list .tcn-tab-item[data-is-selected=true]{background-color:silver;margin-left:-3px;margin-top:-2px;padding-bottom:2px;position:relative;z-index:8}

package/dist/themes/themes/windows_98/windows_98_theme.js CHANGED Viewed

@@ -1107,12 +1107,12 @@ const n = `@layer tcn-theme {
     gap: 4px;
   }
-  .tcn-base-carrot {
-    --carrot-size: 12px;
-    --carrot-triangle-height: calc(var(--carrot-size) / 2);
-    --carrot-triangle-width: var(--carrot-size);
-    --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;
-    --carrot-triangle-peak: var(--carrot-triangle-width) solid #000;
+  .tcn-caret {
+    --caret-size: 12px;
+    --caret-triangle-height: calc(var(--caret-size) / 2);
+    --caret-triangle-width: var(--caret-size);
+    --caret-triangle-base: var(--caret-triangle-height) solid transparent;
+    --caret-triangle-peak: var(--caret-triangle-width) solid #000;
     width: 0;
     height: 0;
@@ -1120,27 +1120,27 @@ const n = `@layer tcn-theme {
     display: inline-block;
     &[data-direction="top"] {
-      border-bottom: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-bottom: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
     &[data-direction="bottom"] {
-      border-top: var(--carrot-triangle-peak);
-      border-left: var(--carrot-triangle-base);
-      border-right: var(--carrot-triangle-base);
+      border-top: var(--caret-triangle-peak);
+      border-left: var(--caret-triangle-base);
+      border-right: var(--caret-triangle-base);
     }
     &[data-direction="start"] {
-      border-right: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-right: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
     &[data-direction="end"] {
-      border-left: var(--carrot-triangle-peak);
-      border-top: var(--carrot-triangle-base);
-      border-bottom: var(--carrot-triangle-base);
+      border-left: var(--caret-triangle-peak);
+      border-top: var(--caret-triangle-base);
+      border-bottom: var(--caret-triangle-base);
     }
   }
 }

package/dist/themes/themes/windows_98/windows_98_theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"windows_98_theme.js","sources":["../../../../src/themes/themes/windows_98/windows_98.css?raw","../../../../src/themes/themes/windows_98/windows_98_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== /\\n :root {\\n --scalar: 1;\\n --gap-small: 2px;\\n --gap-medium: 4px;\\n --gap-large: 8px;\\n\\n --padding-small: 2px;\\n --padding-medium: 4px;\\n --padding-large: 8px;\\n\\n --status-color-disabled: #7f7f7f;\\n --status-color-info: #000080;\\n --status-color-warning: #000080;\\n --status-color-error: #be0000;\\n\\n --async-color-initial: #c0c0c0;\\n --async-color-pending: #000080;\\n --async-color-success: #00ff00;\\n --async-color-failed: #be0000;\\n\\n --primary-color-faint: #c0c0c0;\\n --primary-color: #000080;\\n --primary-color-strong: #000080;\\n\\n --secondary-color-faint: #c0c0c0;\\n --secondary-color: #000080;\\n --secondary-color-strong: #000080;\\n\\n --tertiary-color-faint: #c0c0c0;\\n --tertiary-color: #000080;\\n --tertiary-color-strong: #000080;\\n\\n --quaternary-color-faint: #c0c0c0;\\n --quaternary-color: #000080;\\n --quaternary-color-strong: #000080;\\n\\n --background-color-primary: #c0c0c0;\\n --background-color-secondary: #c0c0c0;\\n --background-color-tertiary: #c0c0c0;\\n --background-color-quaternary: #c0c0c0;\\n\\n --foreground-color-primary: #222222;\\n --foreground-color-secondary: #222222;\\n --foreground-color-tertiary: #222222;\\n --foreground-color-quaternary: #222222;\\n\\n --accent-color: #000080;\\n\\n --font-color: #222222;\\n --font-family: \\\"Microsoft Sans Serif\\\", \\\"Arial\\\", sans-serif;\\n --font-size: 12px;\\n }\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n -webkit-font-smoothing: none;\\n }\\n\\n / ===== TYPOGRAPHY ===== /\\n .tcn-title[data-size=\\\"sm\\\"] {\\n font-size: 10px;\\n }\\n .tcn-title[data-size=\\\"md\\\"] {\\n font-size: 12px;\\n }\\n .tcn-title[data-size=\\\"lg\\\"] {\\n font-size: 14px;\\n }\\n\\n .tcn-body-text[data-size=\\\"sm\\\"] {\\n font-size: 10px;\\n }\\n .tcn-body-text[data-size=\\\"md\\\"] {\\n font-size: 11px;\\n }\\n .tcn-body-text[data-size=\\\"lg\\\"] {\\n font-size: 12px;\\n }\\n\\n .tcn-button-text {\\n position: relative;\\n opacity: 1;\\n font-size: 12px !important;\\n }\\n\\n / ===== BUTTONS ===== /\\n / Base button styles /\\n .tcn-base-button,\\n .tcn-button,\\n .tcn-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-button[data-hierarchy=\\\"secondary\\\"],\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: silver;\\n border: none;\\n border-radius: 0;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n box-sizing: border-box;\\n color: #222;\\n min-height: 23px;\\n min-width: 0;\\n padding: 0 12px;\\n font-size: 12px;\\n text-decoration: none;\\n outline: none;\\n }\\n\\n .tcn-button[data-is-disabled=\\\"true\\\"] {\\n text-shadow: 1px 1px 0 #fff;\\n }\\n\\n / Button content positioning /\\n .tcn-button[data-hierarchy=\\\"primary\\\"] > ,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"] > * {\\n position: relative;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:active > ,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:active > {\\n position: relative;\\n top: 0;\\n left: 1px;\\n }\\n\\n /* Button focus states /\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active)::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: 1px;\\n bottom: 2px;\\n left: 1px;\\n right: 2px;\\n outline: 1px dotted #222;\\n outline-offset: -3px;\\n }\\n\\n / Primary button specific styles /\\n .tcn-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:hover {\\n box-shadow:\\n inset -2px -2px #0a0a0a,\\n inset 1px 1px #0a0a0a,\\n inset -3px -3px grey,\\n inset 2px 2px #fff,\\n inset 3px 3px #c0c0c0;\\n }\\n\\n / Active states /\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:active,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:active {\\n background: silver;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #0a0a0a,\\n inset -2px -2px #c0c0c0,\\n inset 2px 2px grey;\\n color: #222;\\n border: none;\\n text-decoration: none;\\n }\\n\\n / Focus states /\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:focus,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus,\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active),\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active) {\\n background: silver;\\n border: none;\\n text-decoration: none;\\n }\\n\\n / Tertiary button styles /\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"] {\\n padding: 0 4px;\\n background: none;\\n border: none;\\n border-radius: 0;\\n box-shadow: none;\\n box-sizing: border-box;\\n color: #000080;\\n min-height: auto;\\n min-width: auto;\\n text-decoration: none;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:hover {\\n background: none;\\n border: none;\\n border-radius: 0;\\n box-shadow: none;\\n box-sizing: border-box;\\n color: #000080;\\n min-height: auto;\\n min-width: auto;\\n text-decoration: none;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:active {\\n background: none;\\n border: none;\\n border-radius: 0;\\n box-shadow: none;\\n box-sizing: border-box;\\n color: rgba(0, 0, 128, 0.6);\\n min-height: auto;\\n min-width: auto;\\n text-decoration: none;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus,\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus:not(:active) {\\n background: none;\\n outline: 1px dotted #000080;\\n outline-offset: 0;\\n border: none;\\n text-decoration: none;\\n }\\n\\n / Disabled states /\\n .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #717171,\\n inset 1px 1px #fff,\\n inset -2px -2px #999,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -2px -2px #717171,\\n inset 1px 1px #717171,\\n inset -3px -3px #999,\\n inset 2px 2px #fff,\\n inset 3px 3px #c0c0c0;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"],\\n .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"],\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: #7f7f7f;\\n cursor: not-allowed;\\n }\\n\\n / Select button styles /\\n .tcn-button.select,\\n .tcn-button.select:hover {\\n position: relative;\\n padding-inline-end: 20px;\\n padding-inline-start: 4px;\\n }\\n\\n .tcn-button.select:dir(ltr)::after {\\n content: \\\"\\\";\\n position: absolute;\\n right: calc(4px var(--scalar, 1));\\n top: 50%;\\n transform: translateY(-50%);\\n width: calc(12px * var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n background-color: currentColor;\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E\\\");\\n mask-repeat: no-repeat;\\n mask-position: center;\\n mask-size: contain;\\n pointer-events: none;\\n }\\n\\n .tcn-button.select:dir(rtl)::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: calc(4px * var(--scalar, 1));\\n top: 50%;\\n transform: translateY(-50%);\\n width: calc(12px * var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n background-color: #222;\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n mask-repeat: no-repeat;\\n mask-position: center;\\n mask-size: contain;\\n pointer-events: none;\\n }\\n\\n /* Slim button styles /\\n .tcn-slim-button,\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n padding: 2px;\\n min-width: 0;\\n min-height: 0;\\n height: auto;\\n width: auto;\\n }\\n\\n .tcn-slim-button[data-size=\\\"sm\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"]:hover {\\n padding: 1px;\\n }\\n\\n .tcn-slim-button[data-size=\\\"md\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"]:hover {\\n padding: 2px;\\n }\\n\\n .tcn-slim-button[data-size=\\\"lg\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"]:hover {\\n padding: 4px;\\n }\\n\\n / Select group styles /\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus {\\n background-color: #000080;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n color: #fff;\\n }\\n\\n .tcn-select-group .tcn-button:hover,\\n .tcn-select-group .tcn-button:focus,\\n .tcn-button-group .tcn-button:hover,\\n .tcn-button-group .tcn-button:focus {\\n z-index: 1;\\n }\\n\\n / ===== INPUT FIELDS ===== /\\n .tcn-input,\\n .tcn-textarea,\\n .tcn-suggestion-list-search-input,\\n .tcn-multi-combo-box-values-container,\\n .tcn-multiselect-values-container {\\n border-radius: 0;\\n outline: none;\\n border: none;\\n background-color: #fff;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n box-sizing: border-box;\\n padding: 3px 4px;\\n }\\n\\n .tcn-suggestion-list-search-input {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a,\\n 0px -2px 0px 2px #c0c0c0;\\n }\\n\\n .tcn-input,\\n .tcn-textarea,\\n .tcn-suggestion-list-search-input {\\n height: 23px;\\n }\\n\\n .tcn-input:is(:focus, :focus-visible, :active, :hover),\\n .tcn-input:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"],\\n .tcn-textarea:is(:focus, :focus-visible, :active, :hover),\\n .tcn-textarea:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"] {\\n outline: none;\\n border: none;\\n }\\n\\n .tcn-input[data-is-disabled=\\\"true\\\"],\\n .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #717171;\\n }\\n\\n .tcn-input[data-is-disabled=\\\"true\\\"],\\n .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"],\\n .tcn-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n .tcn-textarea[data-is-disabled=\\\"true\\\"]::placeholder,\\n .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"]::placeholder {\\n color: #7f7f7f;\\n cursor: not-allowed;\\n background-color: #c0c0c0;\\n }\\n\\n / Select group active and focus states /\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:active {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #0a0a0a,\\n inset -2px -2px #c0c0c0,\\n inset 2px 2px grey;\\n color: #fff;\\n }\\n\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before {\\n outline: 1px dotted #fcfcfc;\\n }\\n\\n / ===== SUGGESTION LISTS ===== /\\n .tcn-suggestion-list {\\n padding: 2px;\\n }\\n\\n .tcn-suggestion-item {\\n padding: 0;\\n background: transparent;\\n border: none;\\n min-height: 0;\\n }\\n\\n .tcn-suggestion-item:hover {\\n background: #000080;\\n color: #fff;\\n }\\n\\n .tcn-suggestion-item[data-is-selected=\\\"true\\\"],\\n .tcn-suggestion-item[data-is-focused=\\\"true\\\"] {\\n padding: 0;\\n background: #000080;\\n color: #fff;\\n border: none;\\n }\\n\\n .tcn-suggestion-list-search-input {\\n border-radius: 0;\\n padding: 4px;\\n height: 24px;\\n min-height: 24px;\\n }\\n\\n / ===== LAYOUT COMPONENTS ===== /\\n\\n .tcn-title {\\n color: black;\\n }\\n\\n .header .tcn-title {\\n color: #fff;\\n }\\n / Headers /\\n .header[data-kind=\\\"window\\\"] {\\n padding: 4px;\\n background: linear-gradient(90deg, #000080, #1084d0);\\n border: none;\\n color: #fff;\\n }\\n\\n .header[data-kind=\\\"window\\\"] > .tcn-button {\\n color: #222;\\n }\\n\\n .header[data-kind=\\\"toolbar\\\"],\\n .header[data-kind=\\\"app\\\"],\\n .header[data-kind=\\\"nav\\\"] {\\n padding: 4px 0;\\n background: #c0c0c0;\\n color: #222222;\\n border-bottom: 1px solid #808080;\\n border-top: 1px solid #f5f5f5;\\n border-right: 1px solid #808080;\\n border-left: 1px solid #f5f5f5;\\n padding-inline-start: 4px;\\n }\\n\\n .header[data-kind=\\\"panel\\\"] {\\n padding: 4px;\\n background: linear-gradient(90deg, #7c7c7c, #aeaeae);\\n border: none;\\n color: #fff;\\n }\\n\\n / Main content areas /\\n .tcn-main[data-kind=\\\"window\\\"],\\n .tcn-main[data-kind=\\\"app\\\"],\\n .tcn-main[data-kind=\\\"nav\\\"],\\n .tcn-main[data-kind=\\\"toolbar\\\"],\\n .tcn-main[data-kind=\\\"section\\\"],\\n .tcn-main[data-kind=\\\"panel\\\"],\\n .tcn-main[data-kind=\\\"panel\\\"],\\n .tcn-main[data-kind=\\\"drawer\\\"],\\n .tcn-main[data-kind=\\\"card\\\"],\\n .tcn-panel,\\n .tcn-h-panel,\\n .tcn-v-panel,\\n .tcn-sidebar-start[data-hierarchy],\\n .tcn-sidebar-end[data-hierarchy] {\\n border-radius: 0;\\n background: #c0c0c0;\\n color: #222222;\\n border-bottom: 1px solid #808080;\\n border-top: 1px solid #f5f5f5;\\n border-right: 1px solid #808080;\\n border-left: 1px solid #f5f5f5;\\n }\\n\\n .tcn-column:after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: var(--padding);\\n top: var(--padding);\\n right: 0;\\n width: 0px;\\n border-bottom: 1px solid #f5f5f5;\\n border-top: 1px solid #808080;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n .tcn-column:last-child:after {\\n display: none;\\n }\\n\\n .tcn-main[data-kind=\\\"panel\\\"],\\n .tcn-sidebar-start[data-kind=\\\"panel\\\"],\\n .tcn-sidebar-end[data-kind=\\\"panel\\\"] {\\n padding: 0;\\n }\\n\\n / Sidebar styles /\\n .tcn-sidebar-start[data-hierarchy=\\\"tertiary\\\"],\\n .tcn-sidebar-start[data-hierarchy=\\\"secondary\\\"] {\\n background: #c0c0c0;\\n color: #222222;\\n }\\n\\n .tcn-sidebar-start[data-kind=\\\"nav\\\"],\\n .tcn-v-nav {\\n background: #fff;\\n padding: 2px;\\n border-top: 1px solid #808080;\\n border-bottom: 1px solid #f5f5f5;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n .tcn-sidebar-end[data-hierarchy=\\\"tertiary\\\"],\\n .tcn-sidebar-end[data-hierarchy=\\\"secondary\\\"] {\\n background: #c0c0c0;\\n color: #222222;\\n }\\n\\n .tcn-sidebar-end[data-hierarchy=\\\"primary\\\"],\\n .tcn-sidebar-start[data-hierarchy=\\\"primary\\\"] {\\n background: #fff;\\n color: #222222;\\n }\\n\\n / Footer /\\n .tcn-footer[data-kind=\\\"window\\\"] {\\n padding: 4px;\\n background: #c0c0c0;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #c1c1c1,\\n inset -2px -2px #c0c0c0;\\n color: #222222;\\n }\\n\\n / ===== WINDOWS AND POPOVERS ===== /\\n .tcn-window,\\n .tcn-date-picker-popover,\\n .tcn-date-picker-year-selector,\\n .tcn-menu,\\n .tcn-suggestion-list {\\n border-radius: 0;\\n background: #c0c0c0;\\n padding: 4px;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #f5f5f5,\\n inset -2px -2px #808080,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-suggestion-list-header {\\n background: #c0c0c0;\\n }\\n\\n / ===== DATE PICKER COMPONENTS ===== /\\n .tcn-date-picker-box {\\n background: #c0c0c0;\\n padding: 0;\\n }\\n\\n .tcn-date-picker-date {\\n box-shadow: none !important;\\n }\\n\\n .tcn-date-picker-year-button {\\n box-shadow: none !important;\\n }\\n\\n .tcn-date-picker-header {\\n height: 20px;\\n }\\n\\n .tcn-button.tcn-phone-number-input-select,\\n .tcn-button.tcn-phone-number-input-select:hover {\\n min-width: 0;\\n }\\n\\n .tcn-phone-number-input[data-has-phone-book=\\\"false\\\"] {\\n border-end-end-radius: 0px;\\n border-start-end-radius: 0px;\\n }\\n\\n .tcn-button.tcn-phone-number-input-phone-book {\\n max-width: 23px !important;\\n max-height: 23px !important;\\n height: 23px !important;\\n min-width: 23px !important;\\n min-height: 23px !important;\\n }\\n\\n .tcn-button.tcn-date-picker-year-select {\\n padding-inline-end: 20px;\\n }\\n\\n .tcn-button.tcn-date-picker-year-select:dir(ltr)::after {\\n width: calc(12px var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n }\\n\\n .tcn-button.tcn-date-picker-year-select:dir(rtl)::after {\\n width: calc(12px * var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n }\\n\\n /* ===== TIME BOX ===== /\\n .tcn-time-box {\\n border-radius: 0;\\n background: #fff;\\n border: none;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #c1c1c1,\\n inset -2px -2px #c0c0c0;\\n }\\n\\n .tcn-time-box-title-container {\\n min-height: 25px;\\n height: 25px;\\n }\\n\\n / ===== FORM COMPONENTS ===== /\\n .tcn-field-set {\\n padding: 8px 12px 12px 12px;\\n margin-top: 10px;\\n border-radius: 0;\\n background: #c0c0c0;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #f5f5f5,\\n inset -2px -2px #808080;\\n }\\n\\n .tcn-field-set > .tcn-field-set-body {\\n background: transparent;\\n padding: 0;\\n gap: 8px;\\n }\\n\\n .tcn-field-set > .tcn-field-set-legend {\\n position: relative;\\n top: -7px;\\n left: -4px;\\n height: 0;\\n }\\n\\n .tcn-field-set-legend-text {\\n background: #c0c0c0;\\n padding: 0;\\n font-size: 12px;\\n }\\n\\n / ===== CHIPS ===== /\\n .tcn-chip {\\n background: #c0c0c0;\\n border-radius: 0;\\n color: #222222;\\n border: none;\\n font-size: 12px;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n / ===== CHECKBOXES ===== /\\n .tcn-checkbox {\\n outline: none;\\n border-radius: 0;\\n background: #fff;\\n border: none;\\n background-position: center;\\n background-repeat: no-repeat;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #c1c1c1,\\n inset -2px -2px #c0c0c0;\\n }\\n\\n .tcn-checkbox:focus {\\n outline: none;\\n }\\n\\n .tcn-checkbox[data-checked=\\\"true\\\"] {\\n background-color: #fff;\\n background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n }\\n\\n .tcn-checkbox[data-is-disabled=\\\"false\\\"]:active {\\n background-color: #fff;\\n background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n }\\n\\n .tcn-checkbox[data-is-disabled=\\\"true\\\"] {\\n background-color: #c0c0c0;\\n }\\n\\n .tcn-checkbox[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E\\\");\\n }\\n\\n / ===== RADIO BUTTONS ===== /\\n .tcn-radio,\\n .tcn-radio[data-checked=\\\"true\\\"],\\n .tcn-radio[checked=\\\"true\\\"] {\\n width: 14px;\\n height: 14px;\\n min-width: 14px;\\n min-height: 14px;\\n border-inline-end: 1px solid #fff;\\n border-inline-start: 1px solid #222;\\n border-block-end: 1px solid #fff;\\n border-block-start: 1px solid #222;\\n }\\n\\n .tcn-radio:focus {\\n outline: none;\\n }\\n\\n .tcn-radio::before {\\n content: \\\"\\\";\\n background: transparent;\\n position: absolute;\\n border-radius: 50%;\\n inset: 0;\\n border-inline-end: 1px solid #dfdfdf;\\n border-inline-start: 1px solid #808080;\\n border-block-end: 1px solid #dfdfdf;\\n border-block-start: 1px solid #808080;\\n }\\n\\n .tcn-radio[data-checked=\\\"true\\\"]::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 40%;\\n height: 40%;\\n background: #222;\\n border-radius: 50%;\\n }\\n\\n / ===== SWITCHES ===== /\\n .tcn-switch:focus,\\n .tcn-switch:focus-visible,\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n outline: none;\\n }\\n\\n .tcn-switch-wrapper {\\n border-radius: 0;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n border-color: #c0c0c0;\\n background-color: #fff;\\n transition: background-color 200ms ease-out;\\n margin-top: 2px;\\n margin-bottom: 3px;\\n }\\n\\n .tcn-switch-wrapper[data-is-checked=\\\"false\\\"] > .tcn-switch-icon {\\n color: #222;\\n }\\n\\n .tcn-switch::after {\\n content: \\\"\\\";\\n cursor: pointer;\\n position: absolute;\\n top: 0;\\n transition: transform 200ms ease-out;\\n width: calc(16px var(--scalar, 1));\\n height: calc(16px * var(--scalar, 1));\\n border-radius: 0;\\n background-color: #c0c0c0;\\n box-sizing: border-box;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-switch-wrapper[data-is-checked=\\\"true\\\"][data-is-disabled=\\\"false\\\"] {\\n background-color: var(--accent-color);\\n border-color: #c0c0c0;\\n }\\n\\n .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] {\\n background-color: #c0c0c0;\\n border-color: #c0c0c0;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #7f7f7f;\\n }\\n\\n .tcn-switch[data-is-disabled=\\\"true\\\"]:after {\\n box-shadow:\\n inset -1px -1px #666666,\\n inset 1px 1px #fff,\\n inset -2px -2px #949494,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] > .tcn-switch-icon {\\n color: #707070;\\n }\\n\\n /* ===== SLIDERS ===== /\\n .tcn-slider::-webkit-slider-runnable-track {\\n border-radius: 0;\\n height: 5px;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n }\\n\\n .tcn-slider::-webkit-slider-runnable-track[data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #717171;\\n }\\n\\n .tcn-slider::-webkit-slider-thumb {\\n outline: none;\\n width: calc(12px var(--scalar, 1));\\n height: calc(16px * var(--scalar, 1));\\n border-radius: 0;\\n border: none;\\n background-color: #c0c0c0;\\n box-sizing: border-box;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-webkit-slider-thumb {\\n background-color: #c0c0c0;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"]::-webkit-slider-thumb {\\n box-shadow:\\n inset -1px -1px #717171,\\n inset 1px 1px #fff,\\n inset -2px -2px #999,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n /* Mozilla slider styles /\\n .tcn-slider::-moz-range-track {\\n border-radius: 0;\\n height: 5px;\\n border: none;\\n background: #c0c0c0;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n }\\n\\n .tcn-slider::-moz-range-track[data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #717171;\\n }\\n\\n .tcn-slider::-moz-range-thumb {\\n outline: none;\\n width: calc(12px var(--scalar, 1));\\n height: calc(16px * var(--scalar, 1));\\n border-radius: 0;\\n border: none;\\n background-color: #c0c0c0;\\n box-sizing: border-box;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n cursor: pointer;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-moz-range-thumb,\\n .tcn-slider[data-is-disabled=\\\"false\\\"]:focus::-moz-range-thumb {\\n background-color: #c0c0c0;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n outline: none;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"]::-moz-range-thumb {\\n box-shadow:\\n inset -1px -1px #717171,\\n inset 1px 1px #fff,\\n inset -2px -2px #999,\\n inset 2px 2px #c0c0c0;\\n cursor: not-allowed;\\n }\\n\\n .tcn-nav-item,\\n .tcn-nav-item[data-is-selected],\\n .tcn-menu-item {\\n border-radius: 0;\\n font-size: 12px;\\n }\\n\\n .tcn-nav-item,\\n .tcn-menu-item .tcn-body-text {\\n font-size: 12px;\\n }\\n\\n .tcn-main[data-hierarchy=\\\"primary\\\"] {\\n background: #c0c0c0;\\n padding: 0px;\\n }\\n\\n .tcn-main[data-hierarchy=\\\"secondary\\\"] {\\n background: #c0c0c0;\\n padding: 0px;\\n }\\n\\n .tcn-main[data-hierarchy=\\\"tertiary\\\"] {\\n background: #c0c0c0;\\n padding: 0px;\\n }\\n\\n .tcn-h-nav {\\n border: none;\\n }\\n\\n .tcn-h-nav:after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n height: 0px;\\n border-bottom: 1px solid #f5f5f5;\\n border-top: 1px solid #808080;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n .tcn-footer {\\n border: none;\\n }\\n\\n .tcn-footer:after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n top: 0;\\n height: 0px;\\n border-bottom: 1px solid #f5f5f5;\\n border-top: 1px solid #808080;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n /* ===== SECTIONS ===== /\\n\\n .tcn-section {\\n background: silver;\\n gap: 0px;\\n font-size: 12px;\\n }\\n\\n .tcn-heading {\\n background: silver;\\n padding-inline-start: 8px;\\n height: 23px;\\n z-index: 5;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-section > .tcn-heading {\\n top: 0;\\n padding-inline-start: 8px;\\n z-index: 4;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-heading {\\n top: 23px;\\n padding-inline-start: 12px;\\n z-index: 3;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-heading {\\n top: 46px;\\n padding-inline-start: 16px;\\n z-index: 2;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {\\n top: 69px;\\n padding-inline-start: 20px;\\n z-index: 1;\\n }\\n\\n .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 8px;\\n }\\n\\n .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 12px;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 16px;\\n }\\n\\n .tcn-section\\n > .tcn-section\\n > .tcn-section\\n > .tcn-section\\n > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 20px;\\n }\\n\\n .tcn-section > .tcn-row {\\n background: #fff;\\n padding: 4px;\\n font-size: 12px;\\n gap: 4px;\\n }\\n\\n .tcn-base-carrot {\\n --carrot-size: 12px;\\n --carrot-triangle-height: calc(var(--carrot-size) / 2);\\n --carrot-triangle-width: var(--carrot-size);\\n --carrot-triangle-base: var(--carrot-triangle-height) solid transparent;\\n --carrot-triangle-peak: var(--carrot-triangle-width) solid #000;\\n\\n width: 0;\\n height: 0;\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--carrot-triangle-peak);\\n border-left: var(--carrot-triangle-base);\\n border-right: var(--carrot-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--carrot-triangle-peak);\\n border-left: var(--carrot-triangle-base);\\n border-right: var(--carrot-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--carrot-triangle-peak);\\n border-top: var(--carrot-triangle-base);\\n border-bottom: var(--carrot-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--carrot-triangle-peak);\\n border-top: var(--carrot-triangle-base);\\n border-bottom: var(--carrot-triangle-base);\\n }\\n }\\n}\\n\\n/ ===== TABS ===== */\\n\\n.tcn-tabs-list {\\n display: flex;\\n list-style-type: none;\\n margin: 0 0 -2px;\\n padding-left: 3px;\\n position: relative;\\n text-indent: 0;\\n\\n .tcn-tab-item {\\n border-top-left-radius: 3px;\\n border-top-right-radius: 3px;\\n box-shadow:\\n inset -1px 0 #0a0a0a,\\n inset 1px 1px #dfdfdf,\\n inset -2px 0 grey,\\n inset 2px 2px #fff;\\n }\\n\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n background-color: silver;\\n margin-left: -3px;\\n margin-top: -2px;\\n padding-bottom: 2px;\\n position: relative;\\n z-index: 8;\\n }\\n}\\n\"","import css from './windows_98.css?raw';\n\nexport const windows98StyleSheet = new CSSStyleSheet();\nwindows98StyleSheet.replaceSync(css);\n"],"names":["css","windows98StyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAsB,IAAI,cAAA;AACvCA,EAAoB,YAAYD,CAAG;"}
1	+ {"version":3,"file":"windows_98_theme.js","sources":["../../../../src/themes/themes/windows_98/windows_98.css?raw","../../../../src/themes/themes/windows_98/windows_98_theme.ts"],"sourcesContent":["export default \"@layer tcn-theme {\\n /* ===== CSS VARIABLES ===== /\\n :root {\\n --scalar: 1;\\n --gap-small: 2px;\\n --gap-medium: 4px;\\n --gap-large: 8px;\\n\\n --padding-small: 2px;\\n --padding-medium: 4px;\\n --padding-large: 8px;\\n\\n --status-color-disabled: #7f7f7f;\\n --status-color-info: #000080;\\n --status-color-warning: #000080;\\n --status-color-error: #be0000;\\n\\n --async-color-initial: #c0c0c0;\\n --async-color-pending: #000080;\\n --async-color-success: #00ff00;\\n --async-color-failed: #be0000;\\n\\n --primary-color-faint: #c0c0c0;\\n --primary-color: #000080;\\n --primary-color-strong: #000080;\\n\\n --secondary-color-faint: #c0c0c0;\\n --secondary-color: #000080;\\n --secondary-color-strong: #000080;\\n\\n --tertiary-color-faint: #c0c0c0;\\n --tertiary-color: #000080;\\n --tertiary-color-strong: #000080;\\n\\n --quaternary-color-faint: #c0c0c0;\\n --quaternary-color: #000080;\\n --quaternary-color-strong: #000080;\\n\\n --background-color-primary: #c0c0c0;\\n --background-color-secondary: #c0c0c0;\\n --background-color-tertiary: #c0c0c0;\\n --background-color-quaternary: #c0c0c0;\\n\\n --foreground-color-primary: #222222;\\n --foreground-color-secondary: #222222;\\n --foreground-color-tertiary: #222222;\\n --foreground-color-quaternary: #222222;\\n\\n --accent-color: #000080;\\n\\n --font-color: #222222;\\n --font-family: \\\"Microsoft Sans Serif\\\", \\\"Arial\\\", sans-serif;\\n --font-size: 12px;\\n }\\n\\n .tcn-theme-root {\\n font-family: var(--font-family);\\n color: var(--font-color);\\n -webkit-font-smoothing: none;\\n }\\n\\n / ===== TYPOGRAPHY ===== /\\n .tcn-title[data-size=\\\"sm\\\"] {\\n font-size: 10px;\\n }\\n .tcn-title[data-size=\\\"md\\\"] {\\n font-size: 12px;\\n }\\n .tcn-title[data-size=\\\"lg\\\"] {\\n font-size: 14px;\\n }\\n\\n .tcn-body-text[data-size=\\\"sm\\\"] {\\n font-size: 10px;\\n }\\n .tcn-body-text[data-size=\\\"md\\\"] {\\n font-size: 11px;\\n }\\n .tcn-body-text[data-size=\\\"lg\\\"] {\\n font-size: 12px;\\n }\\n\\n .tcn-button-text {\\n position: relative;\\n opacity: 1;\\n font-size: 12px !important;\\n }\\n\\n / ===== BUTTONS ===== /\\n / Base button styles /\\n .tcn-base-button,\\n .tcn-button,\\n .tcn-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-button[data-hierarchy=\\\"secondary\\\"],\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n background: silver;\\n border: none;\\n border-radius: 0;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n box-sizing: border-box;\\n color: #222;\\n min-height: 23px;\\n min-width: 0;\\n padding: 0 12px;\\n font-size: 12px;\\n text-decoration: none;\\n outline: none;\\n }\\n\\n .tcn-button[data-is-disabled=\\\"true\\\"] {\\n text-shadow: 1px 1px 0 #fff;\\n }\\n\\n / Button content positioning /\\n .tcn-button[data-hierarchy=\\\"primary\\\"] > ,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"] > * {\\n position: relative;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:active > ,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:active > {\\n position: relative;\\n top: 0;\\n left: 1px;\\n }\\n\\n /* Button focus states /\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active)::before {\\n content: \\\"\\\";\\n position: absolute;\\n top: 1px;\\n bottom: 2px;\\n left: 1px;\\n right: 2px;\\n outline: 1px dotted #222;\\n outline-offset: -3px;\\n }\\n\\n / Primary button specific styles /\\n .tcn-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:hover {\\n box-shadow:\\n inset -2px -2px #0a0a0a,\\n inset 1px 1px #0a0a0a,\\n inset -3px -3px grey,\\n inset 2px 2px #fff,\\n inset 3px 3px #c0c0c0;\\n }\\n\\n / Active states /\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:active,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:active {\\n background: silver;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #0a0a0a,\\n inset -2px -2px #c0c0c0,\\n inset 2px 2px grey;\\n color: #222;\\n border: none;\\n text-decoration: none;\\n }\\n\\n / Focus states /\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:focus,\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus,\\n .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active),\\n .tcn-button[data-hierarchy=\\\"secondary\\\"]:focus:not(:active) {\\n background: silver;\\n border: none;\\n text-decoration: none;\\n }\\n\\n / Tertiary button styles /\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"] {\\n padding: 0 4px;\\n background: none;\\n border: none;\\n border-radius: 0;\\n box-shadow: none;\\n box-sizing: border-box;\\n color: #000080;\\n min-height: auto;\\n min-width: auto;\\n text-decoration: none;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:hover {\\n background: none;\\n border: none;\\n border-radius: 0;\\n box-shadow: none;\\n box-sizing: border-box;\\n color: #000080;\\n min-height: auto;\\n min-width: auto;\\n text-decoration: none;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:active {\\n background: none;\\n border: none;\\n border-radius: 0;\\n box-shadow: none;\\n box-sizing: border-box;\\n color: rgba(0, 0, 128, 0.6);\\n min-height: auto;\\n min-width: auto;\\n text-decoration: none;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus,\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"]:focus:not(:active) {\\n background: none;\\n outline: 1px dotted #000080;\\n outline-offset: 0;\\n border: none;\\n text-decoration: none;\\n }\\n\\n / Disabled states /\\n .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #717171,\\n inset 1px 1px #fff,\\n inset -2px -2px #999,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -2px -2px #717171,\\n inset 1px 1px #717171,\\n inset -3px -3px #999,\\n inset 2px 2px #fff,\\n inset 3px 3px #c0c0c0;\\n }\\n\\n .tcn-button[data-hierarchy=\\\"primary\\\"][data-is-disabled=\\\"true\\\"],\\n .tcn-button[data-hierarchy=\\\"secondary\\\"][data-is-disabled=\\\"true\\\"],\\n .tcn-button[data-hierarchy=\\\"tertiary\\\"][data-is-disabled=\\\"true\\\"] {\\n color: #7f7f7f;\\n cursor: not-allowed;\\n }\\n\\n / Select button styles /\\n .tcn-button.select,\\n .tcn-button.select:hover {\\n position: relative;\\n padding-inline-end: 20px;\\n padding-inline-start: 4px;\\n }\\n\\n .tcn-button.select:dir(ltr)::after {\\n content: \\\"\\\";\\n position: absolute;\\n right: calc(4px var(--scalar, 1));\\n top: 50%;\\n transform: translateY(-50%);\\n width: calc(12px * var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n background-color: currentColor;\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='currentColor'/%3E%3C/svg%3E\\\");\\n mask-repeat: no-repeat;\\n mask-position: center;\\n mask-size: contain;\\n pointer-events: none;\\n }\\n\\n .tcn-button.select:dir(rtl)::after {\\n content: \\\"\\\";\\n position: absolute;\\n left: calc(4px * var(--scalar, 1));\\n top: 50%;\\n transform: translateY(-50%);\\n width: calc(12px * var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n background-color: #222;\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n mask-repeat: no-repeat;\\n mask-position: center;\\n mask-size: contain;\\n pointer-events: none;\\n }\\n\\n /* Slim button styles /\\n .tcn-slim-button,\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"]:hover {\\n padding: 2px;\\n min-width: 0;\\n min-height: 0;\\n height: auto;\\n width: auto;\\n }\\n\\n .tcn-slim-button[data-size=\\\"sm\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"sm\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"sm\\\"]:hover {\\n padding: 1px;\\n }\\n\\n .tcn-slim-button[data-size=\\\"md\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"md\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"md\\\"]:hover {\\n padding: 2px;\\n }\\n\\n .tcn-slim-button[data-size=\\\"lg\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"],\\n .tcn-slim-button[data-hierarchy=\\\"primary\\\"][data-size=\\\"lg\\\"]:hover,\\n .tcn-slim-button[data-hierarchy=\\\"secondary\\\"][data-size=\\\"lg\\\"]:hover {\\n padding: 4px;\\n }\\n\\n / Select group styles /\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"],\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:hover,\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus {\\n background-color: #000080;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n color: #fff;\\n }\\n\\n .tcn-select-group .tcn-button:hover,\\n .tcn-select-group .tcn-button:focus,\\n .tcn-button-group .tcn-button:hover,\\n .tcn-button-group .tcn-button:focus {\\n z-index: 1;\\n }\\n\\n / ===== INPUT FIELDS ===== /\\n .tcn-input,\\n .tcn-textarea,\\n .tcn-suggestion-list-search-input,\\n .tcn-multi-combo-box-values-container,\\n .tcn-multiselect-values-container {\\n border-radius: 0;\\n outline: none;\\n border: none;\\n background-color: #fff;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n box-sizing: border-box;\\n padding: 3px 4px;\\n }\\n\\n .tcn-suggestion-list-search-input {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a,\\n 0px -2px 0px 2px #c0c0c0;\\n }\\n\\n .tcn-input,\\n .tcn-textarea,\\n .tcn-suggestion-list-search-input {\\n height: 23px;\\n }\\n\\n .tcn-input:is(:focus, :focus-visible, :active, :hover),\\n .tcn-input:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"],\\n .tcn-textarea:is(:focus, :focus-visible, :active, :hover),\\n .tcn-textarea:is(:focus, :focus-visible, :active, :hover)[data-is-disabled=\\\"false\\\"] {\\n outline: none;\\n border: none;\\n }\\n\\n .tcn-input[data-is-disabled=\\\"true\\\"],\\n .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #717171;\\n }\\n\\n .tcn-input[data-is-disabled=\\\"true\\\"],\\n .tcn-textarea[data-is-disabled=\\\"true\\\"],\\n .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"],\\n .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"],\\n .tcn-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n .tcn-textarea[data-is-disabled=\\\"true\\\"]::placeholder,\\n .tcn-suggestion-list-search-input[data-is-disabled=\\\"true\\\"]::placeholder,\\n .tcn-multiselect-values-container[data-is-disabled=\\\"true\\\"]::placeholder {\\n color: #7f7f7f;\\n cursor: not-allowed;\\n background-color: #c0c0c0;\\n }\\n\\n / Select group active and focus states /\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:active {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #0a0a0a,\\n inset -2px -2px #c0c0c0,\\n inset 2px 2px grey;\\n color: #fff;\\n }\\n\\n .tcn-select-group .tcn-button[data-hierarchy=\\\"primary\\\"]:focus:not(:active)::before {\\n outline: 1px dotted #fcfcfc;\\n }\\n\\n / ===== SUGGESTION LISTS ===== /\\n .tcn-suggestion-list {\\n padding: 2px;\\n }\\n\\n .tcn-suggestion-item {\\n padding: 0;\\n background: transparent;\\n border: none;\\n min-height: 0;\\n }\\n\\n .tcn-suggestion-item:hover {\\n background: #000080;\\n color: #fff;\\n }\\n\\n .tcn-suggestion-item[data-is-selected=\\\"true\\\"],\\n .tcn-suggestion-item[data-is-focused=\\\"true\\\"] {\\n padding: 0;\\n background: #000080;\\n color: #fff;\\n border: none;\\n }\\n\\n .tcn-suggestion-list-search-input {\\n border-radius: 0;\\n padding: 4px;\\n height: 24px;\\n min-height: 24px;\\n }\\n\\n / ===== LAYOUT COMPONENTS ===== /\\n\\n .tcn-title {\\n color: black;\\n }\\n\\n .header .tcn-title {\\n color: #fff;\\n }\\n / Headers /\\n .header[data-kind=\\\"window\\\"] {\\n padding: 4px;\\n background: linear-gradient(90deg, #000080, #1084d0);\\n border: none;\\n color: #fff;\\n }\\n\\n .header[data-kind=\\\"window\\\"] > .tcn-button {\\n color: #222;\\n }\\n\\n .header[data-kind=\\\"toolbar\\\"],\\n .header[data-kind=\\\"app\\\"],\\n .header[data-kind=\\\"nav\\\"] {\\n padding: 4px 0;\\n background: #c0c0c0;\\n color: #222222;\\n border-bottom: 1px solid #808080;\\n border-top: 1px solid #f5f5f5;\\n border-right: 1px solid #808080;\\n border-left: 1px solid #f5f5f5;\\n padding-inline-start: 4px;\\n }\\n\\n .header[data-kind=\\\"panel\\\"] {\\n padding: 4px;\\n background: linear-gradient(90deg, #7c7c7c, #aeaeae);\\n border: none;\\n color: #fff;\\n }\\n\\n / Main content areas /\\n .tcn-main[data-kind=\\\"window\\\"],\\n .tcn-main[data-kind=\\\"app\\\"],\\n .tcn-main[data-kind=\\\"nav\\\"],\\n .tcn-main[data-kind=\\\"toolbar\\\"],\\n .tcn-main[data-kind=\\\"section\\\"],\\n .tcn-main[data-kind=\\\"panel\\\"],\\n .tcn-main[data-kind=\\\"panel\\\"],\\n .tcn-main[data-kind=\\\"drawer\\\"],\\n .tcn-main[data-kind=\\\"card\\\"],\\n .tcn-panel,\\n .tcn-h-panel,\\n .tcn-v-panel,\\n .tcn-sidebar-start[data-hierarchy],\\n .tcn-sidebar-end[data-hierarchy] {\\n border-radius: 0;\\n background: #c0c0c0;\\n color: #222222;\\n border-bottom: 1px solid #808080;\\n border-top: 1px solid #f5f5f5;\\n border-right: 1px solid #808080;\\n border-left: 1px solid #f5f5f5;\\n }\\n\\n .tcn-column:after {\\n content: \\\"\\\";\\n position: absolute;\\n bottom: var(--padding);\\n top: var(--padding);\\n right: 0;\\n width: 0px;\\n border-bottom: 1px solid #f5f5f5;\\n border-top: 1px solid #808080;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n .tcn-column:last-child:after {\\n display: none;\\n }\\n\\n .tcn-main[data-kind=\\\"panel\\\"],\\n .tcn-sidebar-start[data-kind=\\\"panel\\\"],\\n .tcn-sidebar-end[data-kind=\\\"panel\\\"] {\\n padding: 0;\\n }\\n\\n / Sidebar styles /\\n .tcn-sidebar-start[data-hierarchy=\\\"tertiary\\\"],\\n .tcn-sidebar-start[data-hierarchy=\\\"secondary\\\"] {\\n background: #c0c0c0;\\n color: #222222;\\n }\\n\\n .tcn-sidebar-start[data-kind=\\\"nav\\\"],\\n .tcn-v-nav {\\n background: #fff;\\n padding: 2px;\\n border-top: 1px solid #808080;\\n border-bottom: 1px solid #f5f5f5;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n .tcn-sidebar-end[data-hierarchy=\\\"tertiary\\\"],\\n .tcn-sidebar-end[data-hierarchy=\\\"secondary\\\"] {\\n background: #c0c0c0;\\n color: #222222;\\n }\\n\\n .tcn-sidebar-end[data-hierarchy=\\\"primary\\\"],\\n .tcn-sidebar-start[data-hierarchy=\\\"primary\\\"] {\\n background: #fff;\\n color: #222222;\\n }\\n\\n / Footer /\\n .tcn-footer[data-kind=\\\"window\\\"] {\\n padding: 4px;\\n background: #c0c0c0;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #c1c1c1,\\n inset -2px -2px #c0c0c0;\\n color: #222222;\\n }\\n\\n / ===== WINDOWS AND POPOVERS ===== /\\n .tcn-window,\\n .tcn-date-picker-popover,\\n .tcn-date-picker-year-selector,\\n .tcn-menu,\\n .tcn-suggestion-list {\\n border-radius: 0;\\n background: #c0c0c0;\\n padding: 4px;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #f5f5f5,\\n inset -2px -2px #808080,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-suggestion-list-header {\\n background: #c0c0c0;\\n }\\n\\n / ===== DATE PICKER COMPONENTS ===== /\\n .tcn-date-picker-box {\\n background: #c0c0c0;\\n padding: 0;\\n }\\n\\n .tcn-date-picker-date {\\n box-shadow: none !important;\\n }\\n\\n .tcn-date-picker-year-button {\\n box-shadow: none !important;\\n }\\n\\n .tcn-date-picker-header {\\n height: 20px;\\n }\\n\\n .tcn-button.tcn-phone-number-input-select,\\n .tcn-button.tcn-phone-number-input-select:hover {\\n min-width: 0;\\n }\\n\\n .tcn-phone-number-input[data-has-phone-book=\\\"false\\\"] {\\n border-end-end-radius: 0px;\\n border-start-end-radius: 0px;\\n }\\n\\n .tcn-button.tcn-phone-number-input-phone-book {\\n max-width: 23px !important;\\n max-height: 23px !important;\\n height: 23px !important;\\n min-width: 23px !important;\\n min-height: 23px !important;\\n }\\n\\n .tcn-button.tcn-date-picker-year-select {\\n padding-inline-end: 20px;\\n }\\n\\n .tcn-button.tcn-date-picker-year-select:dir(ltr)::after {\\n width: calc(12px var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n }\\n\\n .tcn-button.tcn-date-picker-year-select:dir(rtl)::after {\\n width: calc(12px * var(--scalar, 1));\\n height: calc(12px * var(--scalar, 1));\\n mask-image: url(\\\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 12 12' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4l4 4 4-4z' fill='black'/%3E%3C/svg%3E\\\");\\n }\\n\\n /* ===== TIME BOX ===== /\\n .tcn-time-box {\\n border-radius: 0;\\n background: #fff;\\n border: none;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #c1c1c1,\\n inset -2px -2px #c0c0c0;\\n }\\n\\n .tcn-time-box-title-container {\\n min-height: 25px;\\n height: 25px;\\n }\\n\\n / ===== FORM COMPONENTS ===== /\\n .tcn-field-set {\\n padding: 8px 12px 12px 12px;\\n margin-top: 10px;\\n border-radius: 0;\\n background: #c0c0c0;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #f5f5f5,\\n inset -2px -2px #808080;\\n }\\n\\n .tcn-field-set > .tcn-field-set-body {\\n background: transparent;\\n padding: 0;\\n gap: 8px;\\n }\\n\\n .tcn-field-set > .tcn-field-set-legend {\\n position: relative;\\n top: -7px;\\n left: -4px;\\n height: 0;\\n }\\n\\n .tcn-field-set-legend-text {\\n background: #c0c0c0;\\n padding: 0;\\n font-size: 12px;\\n }\\n\\n / ===== CHIPS ===== /\\n .tcn-chip {\\n background: #c0c0c0;\\n border-radius: 0;\\n color: #222222;\\n border: none;\\n font-size: 12px;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n / ===== CHECKBOXES ===== /\\n .tcn-checkbox {\\n outline: none;\\n border-radius: 0;\\n background: #fff;\\n border: none;\\n background-position: center;\\n background-repeat: no-repeat;\\n box-shadow:\\n inset 1px 1px #808080,\\n inset -1px -1px #f5f5f5,\\n inset 2px 2px #c1c1c1,\\n inset -2px -2px #c0c0c0;\\n }\\n\\n .tcn-checkbox:focus {\\n outline: none;\\n }\\n\\n .tcn-checkbox[data-checked=\\\"true\\\"] {\\n background-color: #fff;\\n background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n }\\n\\n .tcn-checkbox[data-is-disabled=\\\"false\\\"]:active {\\n background-color: #fff;\\n background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23222' stroke-width='2'/%3E%3C/svg%3E\\\");\\n }\\n\\n .tcn-checkbox[data-is-disabled=\\\"true\\\"] {\\n background-color: #c0c0c0;\\n }\\n\\n .tcn-checkbox[data-checked=\\\"true\\\"][data-is-disabled=\\\"true\\\"] {\\n background-image: url(\\\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='%23222' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5068 5.44714C20.8121 5.72703 20.8328 6.20146 20.5529 6.5068L9.55287 18.5068C9.41464 18.6576 9.22081 18.7454 9.01629 18.7498C8.81178 18.7543 8.61432 18.675 8.46967 18.5303L3.46967 13.5303C3.17678 13.2374 3.17678 12.7626 3.46967 12.4697C3.76256 12.1768 4.23744 12.1768 4.53033 12.4697L8.97644 16.9158L19.4471 5.49321C19.727 5.18787 20.2015 5.16724 20.5068 5.44714Z' stroke='%23707070' stroke-width='2'/%3E%3C/svg%3E\\\");\\n }\\n\\n / ===== RADIO BUTTONS ===== /\\n .tcn-radio,\\n .tcn-radio[data-checked=\\\"true\\\"],\\n .tcn-radio[checked=\\\"true\\\"] {\\n width: 14px;\\n height: 14px;\\n min-width: 14px;\\n min-height: 14px;\\n border-inline-end: 1px solid #fff;\\n border-inline-start: 1px solid #222;\\n border-block-end: 1px solid #fff;\\n border-block-start: 1px solid #222;\\n }\\n\\n .tcn-radio:focus {\\n outline: none;\\n }\\n\\n .tcn-radio::before {\\n content: \\\"\\\";\\n background: transparent;\\n position: absolute;\\n border-radius: 50%;\\n inset: 0;\\n border-inline-end: 1px solid #dfdfdf;\\n border-inline-start: 1px solid #808080;\\n border-block-end: 1px solid #dfdfdf;\\n border-block-start: 1px solid #808080;\\n }\\n\\n .tcn-radio[data-checked=\\\"true\\\"]::after {\\n content: \\\"\\\";\\n position: absolute;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n width: 40%;\\n height: 40%;\\n background: #222;\\n border-radius: 50%;\\n }\\n\\n / ===== SWITCHES ===== /\\n .tcn-switch:focus,\\n .tcn-switch:focus-visible,\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"false\\\"],\\n .tcn-switch-wrapper[data-focused=\\\"true\\\"][data-is-checked=\\\"true\\\"] {\\n outline: none;\\n }\\n\\n .tcn-switch-wrapper {\\n border-radius: 0;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n border-color: #c0c0c0;\\n background-color: #fff;\\n transition: background-color 200ms ease-out;\\n margin-top: 2px;\\n margin-bottom: 3px;\\n }\\n\\n .tcn-switch-wrapper[data-is-checked=\\\"false\\\"] > .tcn-switch-icon {\\n color: #222;\\n }\\n\\n .tcn-switch::after {\\n content: \\\"\\\";\\n cursor: pointer;\\n position: absolute;\\n top: 0;\\n transition: transform 200ms ease-out;\\n width: calc(16px var(--scalar, 1));\\n height: calc(16px * var(--scalar, 1));\\n border-radius: 0;\\n background-color: #c0c0c0;\\n box-sizing: border-box;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-switch-wrapper[data-is-checked=\\\"true\\\"][data-is-disabled=\\\"false\\\"] {\\n background-color: var(--accent-color);\\n border-color: #c0c0c0;\\n }\\n\\n .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] {\\n background-color: #c0c0c0;\\n border-color: #c0c0c0;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #7f7f7f;\\n }\\n\\n .tcn-switch[data-is-disabled=\\\"true\\\"]:after {\\n box-shadow:\\n inset -1px -1px #666666,\\n inset 1px 1px #fff,\\n inset -2px -2px #949494,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-switch-wrapper[data-is-disabled=\\\"true\\\"] > .tcn-switch-icon {\\n color: #707070;\\n }\\n\\n /* ===== SLIDERS ===== /\\n .tcn-slider::-webkit-slider-runnable-track {\\n border-radius: 0;\\n height: 5px;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n }\\n\\n .tcn-slider::-webkit-slider-runnable-track[data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #717171;\\n }\\n\\n .tcn-slider::-webkit-slider-thumb {\\n outline: none;\\n width: calc(12px var(--scalar, 1));\\n height: calc(16px * var(--scalar, 1));\\n border-radius: 0;\\n border: none;\\n background-color: #c0c0c0;\\n box-sizing: border-box;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-webkit-slider-thumb {\\n background-color: #c0c0c0;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"]::-webkit-slider-thumb {\\n box-shadow:\\n inset -1px -1px #717171,\\n inset 1px 1px #fff,\\n inset -2px -2px #999,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n /* Mozilla slider styles /\\n .tcn-slider::-moz-range-track {\\n border-radius: 0;\\n height: 5px;\\n border: none;\\n background: #c0c0c0;\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px grey,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #0a0a0a;\\n }\\n\\n .tcn-slider::-moz-range-track[data-is-disabled=\\\"true\\\"] {\\n box-shadow:\\n inset -1px -1px #fff,\\n inset 1px 1px #999,\\n inset -2px -2px #dfdfdf,\\n inset 2px 2px #717171;\\n }\\n\\n .tcn-slider::-moz-range-thumb {\\n outline: none;\\n width: calc(12px var(--scalar, 1));\\n height: calc(16px * var(--scalar, 1));\\n border-radius: 0;\\n border: none;\\n background-color: #c0c0c0;\\n box-sizing: border-box;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n cursor: pointer;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"false\\\"]:active::-moz-range-thumb,\\n .tcn-slider[data-is-disabled=\\\"false\\\"]:focus::-moz-range-thumb {\\n background-color: #c0c0c0;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n outline: none;\\n }\\n\\n .tcn-slider[data-is-disabled=\\\"true\\\"]::-moz-range-thumb {\\n box-shadow:\\n inset -1px -1px #717171,\\n inset 1px 1px #fff,\\n inset -2px -2px #999,\\n inset 2px 2px #c0c0c0;\\n cursor: not-allowed;\\n }\\n\\n .tcn-nav-item,\\n .tcn-nav-item[data-is-selected],\\n .tcn-menu-item {\\n border-radius: 0;\\n font-size: 12px;\\n }\\n\\n .tcn-nav-item,\\n .tcn-menu-item .tcn-body-text {\\n font-size: 12px;\\n }\\n\\n .tcn-main[data-hierarchy=\\\"primary\\\"] {\\n background: #c0c0c0;\\n padding: 0px;\\n }\\n\\n .tcn-main[data-hierarchy=\\\"secondary\\\"] {\\n background: #c0c0c0;\\n padding: 0px;\\n }\\n\\n .tcn-main[data-hierarchy=\\\"tertiary\\\"] {\\n background: #c0c0c0;\\n padding: 0px;\\n }\\n\\n .tcn-h-nav {\\n border: none;\\n }\\n\\n .tcn-h-nav:after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n bottom: 0;\\n height: 0px;\\n border-bottom: 1px solid #f5f5f5;\\n border-top: 1px solid #808080;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n .tcn-footer {\\n border: none;\\n }\\n\\n .tcn-footer:after {\\n content: \\\"\\\";\\n position: absolute;\\n left: 0;\\n right: 0;\\n top: 0;\\n height: 0px;\\n border-bottom: 1px solid #f5f5f5;\\n border-top: 1px solid #808080;\\n border-right: 1px solid #f5f5f5;\\n border-left: 1px solid #808080;\\n }\\n\\n /* ===== SECTIONS ===== /\\n\\n .tcn-section {\\n background: silver;\\n gap: 0px;\\n font-size: 12px;\\n }\\n\\n .tcn-heading {\\n background: silver;\\n padding-inline-start: 8px;\\n height: 23px;\\n z-index: 5;\\n box-shadow:\\n inset -1px -1px #0a0a0a,\\n inset 1px 1px #fff,\\n inset -2px -2px grey,\\n inset 2px 2px #c0c0c0;\\n }\\n\\n .tcn-section > .tcn-heading {\\n top: 0;\\n padding-inline-start: 8px;\\n z-index: 4;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-heading {\\n top: 23px;\\n padding-inline-start: 12px;\\n z-index: 3;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-heading {\\n top: 46px;\\n padding-inline-start: 16px;\\n z-index: 2;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > .tcn-section .tcn-heading {\\n top: 69px;\\n padding-inline-start: 20px;\\n z-index: 1;\\n }\\n\\n .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 8px;\\n }\\n\\n .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 12px;\\n }\\n\\n .tcn-section > .tcn-section > .tcn-section > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 16px;\\n }\\n\\n .tcn-section\\n > .tcn-section\\n > .tcn-section\\n > .tcn-section\\n > :not(.tcn-heading, .tcn-section) {\\n padding-inline-start: 20px;\\n }\\n\\n .tcn-section > .tcn-row {\\n background: #fff;\\n padding: 4px;\\n font-size: 12px;\\n gap: 4px;\\n }\\n\\n .tcn-caret {\\n --caret-size: 12px;\\n --caret-triangle-height: calc(var(--caret-size) / 2);\\n --caret-triangle-width: var(--caret-size);\\n --caret-triangle-base: var(--caret-triangle-height) solid transparent;\\n --caret-triangle-peak: var(--caret-triangle-width) solid #000;\\n\\n width: 0;\\n height: 0;\\n flex-grow: 0;\\n display: inline-block;\\n\\n &[data-direction=\\\"top\\\"] {\\n border-bottom: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"bottom\\\"] {\\n border-top: var(--caret-triangle-peak);\\n border-left: var(--caret-triangle-base);\\n border-right: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"start\\\"] {\\n border-right: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n\\n &[data-direction=\\\"end\\\"] {\\n border-left: var(--caret-triangle-peak);\\n border-top: var(--caret-triangle-base);\\n border-bottom: var(--caret-triangle-base);\\n }\\n }\\n}\\n\\n/ ===== TABS ===== */\\n\\n.tcn-tabs-list {\\n display: flex;\\n list-style-type: none;\\n margin: 0 0 -2px;\\n padding-left: 3px;\\n position: relative;\\n text-indent: 0;\\n\\n .tcn-tab-item {\\n border-top-left-radius: 3px;\\n border-top-right-radius: 3px;\\n box-shadow:\\n inset -1px 0 #0a0a0a,\\n inset 1px 1px #dfdfdf,\\n inset -2px 0 grey,\\n inset 2px 2px #fff;\\n }\\n\\n .tcn-tab-item[data-is-selected=\\\"true\\\"] {\\n background-color: silver;\\n margin-left: -3px;\\n margin-top: -2px;\\n padding-bottom: 2px;\\n position: relative;\\n z-index: 8;\\n }\\n}\\n\"","import css from './windows_98.css?raw';\n\nexport const windows98StyleSheet = new CSSStyleSheet();\nwindows98StyleSheet.replaceSync(css);\n"],"names":["css","windows98StyleSheet"],"mappings":"AAAA,MAAAA,IAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GCEFC,IAAsB,IAAI,cAAA;AACvCA,EAAoB,YAAYD,CAAG;"}

package/dist/utils/dnd/draggable/draggable.js CHANGED Viewed

@@ -1,25 +1,26 @@
-import { jsx as s } from "react/jsx-runtime";
+import { jsx as e } from "react/jsx-runtime";
 import i, { useMemo as n } from "react";
 import { DragContainerContext as g } from "../context.js";
-import l from "clsx";
-import { useMakeDragContainer as p } from "../hooks/use_drag_container.js";
-import '../../../draggable.css';const c = "_draggable_db40376", m = { draggable: c }, y = ({
-  children: a,
-  draggable: t = !0
+import p from "clsx";
+import { useMakeDragContainer as l } from "../hooks/use_drag_container.js";
+import { s as m } from "../../../draggable.module-BgelQsuJ.js";
+const y = ({
+  children: t,
+  draggable: r = !0
 }) => {
-  const o = p({}), e = n(
+  const o = l({}), a = n(
     () => ({
       "--position-x": `${o.position.x}px`,
       "--position-y": `${o.position.y}px`
     }),
     [o.position]
-  ), r = i.cloneElement(a, {
-    className: l("tcn-draggable", m.draggable, a.props.className),
-    style: { ...e, ...a.props.style },
+  ), s = i.cloneElement(t, {
+    className: p("tcn-draggable", m.draggable, t.props.className),
+    style: { ...a, ...t.props.style },
     "data-is-dragging": o.isDragging,
-    "data-is-draggable": t
+    "data-is-draggable": r
   });
-  return /* @__PURE__ */ s(g.Provider, { value: o, children: r });
+  return /* @__PURE__ */ e(g.Provider, { value: o, children: s });
 };
 export {
   y as Draggable

package/dist/utils/dnd/draggable/draggable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"draggable.js","sources":["../../../../src/utils/dnd/draggable/draggable.tsx"],"sourcesContent":["import React, { useMemo, type CSSProperties } from 'react';\n\nimport { DragContainerContext } from '../context.js';\nimport clsx from 'clsx';\nimport { useMakeDragContainer } from '../hooks/use_drag_container.js';\n\nimport styles from './draggable.module.css';\n\nexport interface DraggableProps {\n children: React.ReactElement;\n draggable?: boolean;\n}\n\nexport const Draggable: React.FC<DraggableProps> = ({\n children,\n draggable: isDraggable = true,\n}) => {\n const context = useMakeDragContainer({});\n\n const cssVariables = useMemo(\n () =>\n ({\n '--position-x': `${context.position.x}px`,\n '--position-y': `${context.position.y}px`,\n }) as CSSProperties,\n\n [context.position]\n );\n\n const clonedChildren = React.cloneElement(children, {\n className: clsx('tcn-draggable', styles.draggable, children.props.className),\n style: { ...cssVariables, ...children.props.style },\n 'data-is-dragging': context.isDragging,\n 'data-is-draggable': isDraggable,\n });\n\n return (\n <DragContainerContext.Provider value={context}>\n {clonedChildren}\n </DragContainerContext.Provider>\n );\n};\n"],"names":["Draggable","children","isDraggable","context","useMakeDragContainer","cssVariables","useMemo","clonedChildren","React","clsx","styles","DragContainerContext"],"mappings":"~~;;;;;sDAaaA~~,IAAsC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,WAAWC,IAAc;AAC3B,MAAM;AACJ,QAAMC,IAAUC,EAAqB,EAAE,GAEjCC,IAAeC;AAAA,IACnB,OACG;AAAA,MACC,gBAAgB,GAAGH,EAAQ,SAAS,CAAC;AAAA,MACrC,gBAAgB,GAAGA,EAAQ,SAAS,CAAC;AAAA,IAAA;AAAA,IAGzC,CAACA,EAAQ,QAAQ;AAAA,EAAA,GAGbI,IAAiBC,EAAM,aAAaP,GAAU;AAAA,IAClD,WAAWQ,EAAK,iBAAiBC,EAAO,WAAWT,EAAS,MAAM,SAAS;AAAA,IAC3E,OAAO,EAAE,GAAGI,GAAc,GAAGJ,EAAS,MAAM,MAAA;AAAA,IAC5C,oBAAoBE,EAAQ;AAAA,IAC5B,qBAAqBD;AAAA,EAAA,CACtB;AAED,2BACGS,EAAqB,UAArB,EAA8B,OAAOR,GACnC,UAAAI,GACH;AAEJ;"}
1	+ {"version":3,"file":"draggable.js","sources":["../../../../src/utils/dnd/draggable/draggable.tsx"],"sourcesContent":["import React, { useMemo, type CSSProperties } from 'react';\n\nimport { DragContainerContext } from '../context.js';\nimport clsx from 'clsx';\nimport { useMakeDragContainer } from '../hooks/use_drag_container.js';\n\nimport styles from './draggable.module.css';\n\nexport interface DraggableProps {\n children: React.ReactElement;\n draggable?: boolean;\n}\n\nexport const Draggable: React.FC<DraggableProps> = ({\n children,\n draggable: isDraggable = true,\n}) => {\n const context = useMakeDragContainer({});\n\n const cssVariables = useMemo(\n () =>\n ({\n '--position-x': `${context.position.x}px`,\n '--position-y': `${context.position.y}px`,\n }) as CSSProperties,\n\n [context.position]\n );\n\n const clonedChildren = React.cloneElement(children, {\n className: clsx('tcn-draggable', styles.draggable, children.props.className),\n style: { ...cssVariables, ...children.props.style },\n 'data-is-dragging': context.isDragging,\n 'data-is-draggable': isDraggable,\n });\n\n return (\n <DragContainerContext.Provider value={context}>\n {clonedChildren}\n </DragContainerContext.Provider>\n );\n};\n"],"names":["Draggable","children","isDraggable","context","useMakeDragContainer","cssVariables","useMemo","clonedChildren","React","clsx","styles","DragContainerContext"],"mappings":";;;;;;AAaO,MAAMA,IAAsC,CAAC;AAAA,EAClD,UAAAC;AAAA,EACA,WAAWC,IAAc;AAC3B,MAAM;AACJ,QAAMC,IAAUC,EAAqB,EAAE,GAEjCC,IAAeC;AAAA,IACnB,OACG;AAAA,MACC,gBAAgB,GAAGH,EAAQ,SAAS,CAAC;AAAA,MACrC,gBAAgB,GAAGA,EAAQ,SAAS,CAAC;AAAA,IAAA;AAAA,IAGzC,CAACA,EAAQ,QAAQ;AAAA,EAAA,GAGbI,IAAiBC,EAAM,aAAaP,GAAU;AAAA,IAClD,WAAWQ,EAAK,iBAAiBC,EAAO,WAAWT,EAAS,MAAM,SAAS;AAAA,IAC3E,OAAO,EAAE,GAAGI,GAAc,GAAGJ,EAAS,MAAM,MAAA;AAAA,IAC5C,oBAAoBE,EAAQ;AAAA,IAC5B,qBAAqBD;AAAA,EAAA,CACtB;AAED,2BACGS,EAAqB,UAArB,EAA8B,OAAOR,GACnC,UAAAI,GACH;AAEJ;"}

package/dist/utils/index.d.ts CHANGED Viewed

@@ -15,4 +15,6 @@ export * from './calendar/month.js';
 export * from './types/dimensions.js';
 export * from './types/variations.js';
 export * from './responsive/responsive_renderer.js';
+export * from './dnd/draggable/draggable.js';
+export * from './dnd/handle.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,qCAAqC,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAE/C,cAAc,oBAAoB,CAAC;AAEnC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC;AAEpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAEtC,cAAc,qCAAqC,CAAC;AAEpD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC"}