@tcn/ui 0.3.1 → 0.3.3

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

@@ -1,1171 +1,1075 @@
-const n = `/* https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-legend {
-  all: unset;
-  display: block;
-  margin: 0;
-  padding: 0;
-  font: inherit;
-  color: inherit;
-}
-
-* {
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* ===== CSS VARIABLES ===== */
-: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;
-
-  --font-color: #222222;
-  --font-family: "Pixelated MS Sans Serif", Arial;
-  --font-size: 12px;
-
-  --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;
-}
-
-/* ===== TYPOGRAPHY ===== */
-.title[data-size="sm"] {
-  font-size: 10px;
-}
-.title[data-size="md"] {
-  font-size: 12px;
-}
-.title[data-size="lg"] {
-  font-size: 14px;
-}
-
-.body-text[data-size="sm"] {
-  font-size: 10px;
-}
-.body-text[data-size="md"] {
-  font-size: 11px;
-}
-.body-text[data-size="lg"] {
-  font-size: 12px;
-}
-
-.button-text {
-  position: relative;
-  opacity: 1;
-  font-size: 12px !important;
-}
-
-/* ===== BUTTONS ===== */
-/* Base button styles */
-.button,
-.button[data-hierarchy="primary"],
-.button[data-hierarchy="secondary"],
-.button[data-hierarchy="primary"]:hover,
-.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 grey,
-    inset 2px 2px #c0c0c0;
-  box-sizing: border-box;
-  color: #222;
-  min-height: 23px;
-  min-width: 0;
-  padding: 0 12px;
-  font-size: 12px;
-  text-decoration: none;
-  outline: none;
-}
-
-/* Button content positioning */
-.button[data-hierarchy="primary"] > *,
-.button[data-hierarchy="secondary"] > * {
-  position: relative;
-}
-
-.button[data-hierarchy="primary"]:active > *,
-.button[data-hierarchy="secondary"]:active > * {
-  position: relative;
-  top: 0;
-  left: 1px;
-}
-
-/* Button focus states */
-.button[data-hierarchy="primary"]:focus:not(:active)::before,
-.button[data-hierarchy="secondary"]:focus:not(:active)::before {
-  content: "";
-  position: absolute;
-  top: 1px;
-  bottom: 2px;
-  left: 1px;
-  right: 2px;
-  outline: 1px dotted #222;
-  outline-offset: -3px;
-}
-
-/* Primary button specific styles */
-.button[data-hierarchy="primary"],
-.button[data-hierarchy="primary"]:hover {
-  box-shadow:
-    inset -2px -2px #0a0a0a,
-    inset 1px 1px #0a0a0a,
-    inset -3px -3px grey,
-    inset 2px 2px #fff,
-    inset 3px 3px #c0c0c0;
-}
-
-/* Active states */
-.button[data-hierarchy="primary"]:active,
-.button[data-hierarchy="secondary"]:active {
-  background: silver;
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px #0a0a0a,
-    inset -2px -2px #c0c0c0,
-    inset 2px 2px grey;
-  color: #222;
-  border: none;
-  text-decoration: none;
-}
-
-/* Focus states */
-.button[data-hierarchy="primary"]:focus,
-.button[data-hierarchy="secondary"]:focus,
-.button[data-hierarchy="primary"]:focus:not(:active),
-.button[data-hierarchy="secondary"]:focus:not(:active) {
-  background: silver;
-  border: none;
-  text-decoration: none;
-}
-
-/* Tertiary button styles */
-.button[data-hierarchy="tertiary"] {
-  padding: 0 4px;
-  background: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #000080;
-  min-height: auto;
-  min-width: auto;
-  text-decoration: none;
-}
-
-.button[data-hierarchy="tertiary"]:hover {
-  background: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: #000080;
-  min-height: auto;
-  min-width: auto;
-  text-decoration: none;
-}
-
-.button[data-hierarchy="tertiary"]:active {
-  background: none;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: rgba(0, 0, 128, 0.6);
-  min-height: auto;
-  min-width: auto;
-  text-decoration: none;
-}
-
-.button[data-hierarchy="tertiary"]:focus,
-.button[data-hierarchy="tertiary"]:focus:not(:active) {
-  background: none;
-  outline: 1px dotted #000080;
-  outline-offset: 0;
-  border: none;
-  text-decoration: none;
-}
-
-/* Disabled states */
-.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 #c0c0c0;
-}
-
-.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 #c0c0c0;
-}
-
-.button[data-hierarchy="primary"][data-is-disabled="true"],
-.button[data-hierarchy="secondary"][data-is-disabled="true"],
-.button[data-hierarchy="tertiary"][data-is-disabled="true"] {
-  color: #7f7f7f;
-  cursor: not-allowed;
-}
-
-/* Select button styles */
-.button.select,
-.button.select:hover {
-  position: relative;
-  padding-inline-end: 20px;
-  padding-inline-start: 4px;
-}
-
-.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;
-  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-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none;
-}
-
-.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;
-  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-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  pointer-events: none;
-}
-
-/* Slim button styles */
-.slim-button,
-.slim-button[data-hierarchy="primary"],
-.slim-button[data-hierarchy="secondary"],
-.slim-button[data-hierarchy="primary"]:hover,
-.slim-button[data-hierarchy="secondary"]:hover {
-  padding: 2px;
-  min-width: 0;
-  min-height: 0;
-  height: auto;
-  width: auto;
-}
-
-.slim-button[data-size="sm"],
-.slim-button[data-hierarchy="primary"][data-size="sm"],
-.slim-button[data-hierarchy="secondary"][data-size="sm"],
-.slim-button[data-hierarchy="primary"][data-size="sm"]:hover,
-.slim-button[data-hierarchy="secondary"][data-size="sm"]:hover {
-  padding: 1px;
-}
-
-.slim-button[data-size="md"],
-.slim-button[data-hierarchy="primary"][data-size="md"],
-.slim-button[data-hierarchy="secondary"][data-size="md"],
-.slim-button[data-hierarchy="primary"][data-size="md"]:hover,
-.slim-button[data-hierarchy="secondary"][data-size="md"]:hover {
-  padding: 2px;
-}
-
-.slim-button[data-size="lg"],
-.slim-button[data-hierarchy="primary"][data-size="lg"],
-.slim-button[data-hierarchy="secondary"][data-size="lg"],
-.slim-button[data-hierarchy="primary"][data-size="lg"]:hover,
-.slim-button[data-hierarchy="secondary"][data-size="lg"]:hover {
-  padding: 4px;
-}
-
-/* Select group styles */
-.select-group .button[data-hierarchy="primary"],
-.select-group .button[data-hierarchy="primary"]:hover,
-.select-group .button[data-hierarchy="primary"]:focus {
-  background-color: #000080;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset 1px 1px #fff,
-    inset -2px -2px grey,
-    inset 2px 2px #c0c0c0;
-  color: #fff;
-}
-
-.select-group .button:hover,
-.select-group .button:focus,
-.button-group .button:hover,
-.button-group .button:focus {
-  z-index: 1;
-}
-
-/* ===== INPUT FIELDS ===== */
-.input,
-.textarea,
-.suggestion-list-search-input,
-.multi-combo-box-values-container,
-.multiselect-values-container {
-  border-radius: 0;
-  outline: none;
-  border: none;
-  background-color: #fff;
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px grey,
-    inset -2px -2px #dfdfdf,
-    inset 2px 2px #0a0a0a;
-  box-sizing: border-box;
-  padding: 3px 4px;
-}
-
-.suggestion-list-search-input {
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px grey,
-    inset -2px -2px #dfdfdf,
-    inset 2px 2px #0a0a0a,
-    0px -2px 0px 2px #c0c0c0;
-}
-
-.input,
-.textarea,
-.suggestion-list-search-input {
-  height: 23px;
-}
-
-.input:is(:focus, :focus-visible, :active, :hover),
-.input:is(:focus, :focus-visible, :active, :hover)[data-is-disabled="false"],
-.textarea:is(:focus, :focus-visible, :active, :hover),
-.textarea:is(:focus, :focus-visible, :active, :hover)[data-is-disabled="false"] {
-  outline: none;
-  border: none;
-}
-
-.input[data-is-disabled="true"],
-.textarea[data-is-disabled="true"],
-.suggestion-list-search-input[data-is-disabled="true"],
-.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;
-}
-
-.input[data-is-disabled="true"],
-.textarea[data-is-disabled="true"],
-.suggestion-list-search-input[data-is-disabled="true"],
-.multiselect-values-container[data-is-disabled="true"],
-.input[data-is-disabled="true"]::placeholder,
-.textarea[data-is-disabled="true"]::placeholder,
-.suggestion-list-search-input[data-is-disabled="true"]::placeholder,
-.multiselect-values-container[data-is-disabled="true"]::placeholder {
-  color: #7f7f7f;
-  cursor: not-allowed;
-  background-color: #c0c0c0;
-}
-
-/* Select group active and focus states */
-.select-group .button[data-hierarchy="primary"]:active {
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px #0a0a0a,
-    inset -2px -2px #c0c0c0,
-    inset 2px 2px grey;
-  color: #fff;
-}
-
-.select-group .button[data-hierarchy="primary"]:focus:not(:active)::before {
-  outline: 1px dotted #fcfcfc;
-}
-
-/* ===== SUGGESTION LISTS ===== */
-.suggestion-list {
-  padding: 2px;
-}
-
-.suggestion-item {
-  padding: 0;
-  background: transparent;
-  border: none;
-  min-height: 0;
-}
-
-.suggestion-item:hover {
-  background: #000080;
-  color: #fff;
-}
-
-.suggestion-item[data-is-selected="true"],
-.suggestion-item[data-is-focused="true"] {
-  padding: 0;
-  background: #000080;
-  color: #fff;
-  border: none;
-}
-
-.suggestion-list-search-input {
-  border-radius: 0;
-  padding: 4px;
-  height: 24px;
-  min-height: 24px;
-}
-
-/* ===== LAYOUT COMPONENTS ===== */
-
-.title {
-  color: black;
-}
-
-.header .title {
-  color: #fff;
-}
-/* Headers */
-.header[data-kind="window"] {
-  padding: 4px;
-  background: linear-gradient(90deg, #000080, #1084d0);
-  border: none;
-  color: #fff;
-}
-
-.header[data-kind="window"] > .button {
-  color: #222;
-}
-
-.header[data-kind="toolbar"],
-.header[data-kind="app"],
-.header[data-kind="nav"] {
-  padding: 4px 0;
-  background: #c0c0c0;
-  color: #222222;
-  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;
-}
-
-/* Main content areas */
-.main[data-kind="window"],
-.main[data-kind="app"],
-.main[data-kind="nav"],
-.main[data-kind="toolbar"],
-.main[data-kind="section"],
-.main[data-kind="panel"],
-.main[data-kind="panel"],
-.main[data-kind="drawer"],
-.main[data-kind="card"],
-.panel,
-.h-panel,
-.v-panel,
-.sidebar-start[data-hierarchy],
-.sidebar-end[data-hierarchy] {
-  border-radius: 0;
-  background: #c0c0c0;
-  color: #222222;
-  border-bottom: 1px solid #808080;
-  border-top: 1px solid #f5f5f5;
-  border-right: 1px solid #808080;
-  border-left: 1px solid #f5f5f5;
-}
-
-.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;
-}
-
-.column:last-child:after {
-  display: none;
-}
-
-.main[data-kind="panel"],
-.sidebar-start[data-kind="panel"],
-.sidebar-end[data-kind="panel"] {
-  padding: 0;
-}
-
-/* Sidebar styles */
-.sidebar-start[data-hierarchy="tertiary"],
-.sidebar-start[data-hierarchy="secondary"] {
-  background: #c0c0c0;
-  color: #222222;
-}
-
-.sidebar-start[data-kind="nav"],
-.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;
-}
-
-.sidebar-end[data-hierarchy="tertiary"],
-.sidebar-end[data-hierarchy="secondary"] {
-  background: #c0c0c0;
-  color: #222222;
-}
-
-.sidebar-end[data-hierarchy="primary"],
-.sidebar-start[data-hierarchy="primary"] {
-  background: #fff;
-  color: #222222;
-}
-
-/* Footer */
-.footer[data-kind="window"] {
-  padding: 4px;
-  background: #c0c0c0;
-  box-shadow:
-    inset 1px 1px #808080,
-    inset -1px -1px #f5f5f5,
-    inset 2px 2px #c1c1c1,
-    inset -2px -2px #c0c0c0;
-  color: #222222;
-}
-
-/* ===== WINDOWS AND POPOVERS ===== */
-.window,
-.date-picker-popover,
-.date-picker-year-selector,
-.menu,
-.suggestion-list {
-  border-radius: 0;
-  background: #c0c0c0;
-  padding: 4px;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset 1px 1px #f5f5f5,
-    inset -2px -2px #808080,
-    inset 2px 2px #c0c0c0;
-}
-
-.suggestion-list-header {
-  background: #c0c0c0;
-}
-
-/* ===== DATE PICKER COMPONENTS ===== */
-.date-picker-box {
-  background: #c0c0c0;
-  padding: 0;
-}
-
-.date-picker-date {
-  box-shadow: none !important;
-}
-
-.date-picker-year-button {
-  box-shadow: none !important;
-}
-
-.date-picker-header {
-  height: 20px;
-}
-
-.button.phone-number-input-select,
-.button.phone-number-input-select:hover {
-  min-width: 0;
-}
-
-.phone-number-input[data-has-phone-book="false"] {
-  border-end-end-radius: 0px;
-  border-start-end-radius: 0px;
-}
-
-.button.phone-number-input-phone-book {
-  max-width: 23px !important;
-  max-height: 23px !important;
-  height: 23px !important;
-  min-width: 23px !important;
-  min-height: 23px !important;
-}
-
-.button.date-picker-year-select {
-  padding-inline-end: 20px;
-}
-
-.button.date-picker-year-select:dir(ltr)::after {
-  width: calc(12px * var(--scalar, 1));
-  height: calc(12px * var(--scalar, 1));
-  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");
-}
-
-.button.date-picker-year-select:dir(rtl)::after {
-  width: calc(12px * var(--scalar, 1));
-  height: calc(12px * var(--scalar, 1));
-  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");
-}
-
-/* ===== TIME BOX ===== */
-.time-box {
-  border-radius: 0;
-  background: #fff;
-  border: none;
-  box-shadow:
-    inset 1px 1px #808080,
-    inset -1px -1px #f5f5f5,
-    inset 2px 2px #c1c1c1,
-    inset -2px -2px #c0c0c0;
-}
-
-.time-box-title-container {
-  min-height: 25px;
-  height: 25px;
-}
-
-/* ===== FORM COMPONENTS ===== */
-.field-set {
-  padding: 8px 12px 12px 12px;
-  margin-top: 10px;
-  border-radius: 0;
-  background: #c0c0c0;
-  box-shadow:
-    inset 1px 1px #808080,
-    inset -1px -1px #f5f5f5,
-    inset 2px 2px #f5f5f5,
-    inset -2px -2px #808080;
-}
-
-.field-set > .field-set-body {
-  background: transparent;
-  padding: 0;
-  gap: 8px;
-}
-
-.field-set > .field-set-legend {
+const n = `@layer tcn-theme {
+  /* ===== CSS VARIABLES ===== */
+  :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;
+    background-color: var(--background-color-primary);
+  }
+
+  /* ===== TYPOGRAPHY ===== */
+  .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;
+  }
+
+  /* ===== BUTTONS ===== */
+  /* Base button styles */
+  .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 grey,
+      inset 2px 2px #c0c0c0;
+    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;
+  }
+
+  /* Button content positioning */
+  .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;
+  }
+
+  /* Button focus states */
+  .tcn-button[data-hierarchy="primary"]:focus:not(:active)::before,
+  .tcn-button[data-hierarchy="secondary"]:focus:not(:active)::before {
+    content: "";
+    position: absolute;
+    top: 1px;
+    bottom: 2px;
+    left: 1px;
+    right: 2px;
+    outline: 1px dotted #222;
+    outline-offset: -3px;
+  }
+
+  /* Primary button specific styles */
+  .tcn-button[data-hierarchy="primary"],
+  .tcn-button[data-hierarchy="primary"]:hover {
+    box-shadow:
+      inset -2px -2px #0a0a0a,
+      inset 1px 1px #0a0a0a,
+      inset -3px -3px grey,
+      inset 2px 2px #fff,
+      inset 3px 3px #c0c0c0;
+  }
+
+  /* Active states */
+  .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 #c0c0c0,
+      inset 2px 2px grey;
+    color: #222;
+    border: none;
+    text-decoration: none;
+  }
+
+  /* Focus states */
+  .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;
+  }
+
+  /* Tertiary button styles */
+  .tcn-button[data-hierarchy="tertiary"] {
+    padding: 0 4px;
+    background: none;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    box-sizing: border-box;
+    color: #000080;
+    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: #000080;
+    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: rgba(0, 0, 128, 0.6);
+    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;
+  }
+
+  /* Disabled states */
+  .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 #c0c0c0;
+  }
+
+  .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 #c0c0c0;
+  }
+
+  .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;
+  }
+
+  /* Select button styles */
+  .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;
+    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-repeat: no-repeat;
+    mask-position: center;
+    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;
+    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-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    pointer-events: none;
+  }
+
+  /* Slim button styles */
+  .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;
+  }
+
+  /* Select group styles */
+  .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: #000080;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+    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;
+  }
+
+  /* ===== INPUT FIELDS ===== */
+  .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 grey,
+      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 grey,
+      inset -2px -2px #dfdfdf,
+      inset 2px 2px #0a0a0a,
+      0px -2px 0px 2px #c0c0c0;
+  }
+
+  .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: #c0c0c0;
+  }
+
+  /* Select group active and focus states */
+  .tcn-select-group .tcn-button[data-hierarchy="primary"]:active {
+    box-shadow:
+      inset -1px -1px #fff,
+      inset 1px 1px #0a0a0a,
+      inset -2px -2px #c0c0c0,
+      inset 2px 2px grey;
+    color: #fff;
+  }
+
+  .tcn-select-group .tcn-button[data-hierarchy="primary"]:focus:not(:active)::before {
+    outline: 1px dotted #fcfcfc;
+  }
+
+  /* ===== SUGGESTION LISTS ===== */
+  .tcn-suggestion-list {
+    padding: 2px;
+  }
+
+  .tcn-suggestion-item {
+    padding: 0;
+    background: transparent;
+    border: none;
+    min-height: 0;
+  }
+
+  .tcn-suggestion-item:hover {
+    background: #000080;
+    color: #fff;
+  }
+
+  .tcn-suggestion-item[data-is-selected="true"],
+  .tcn-suggestion-item[data-is-focused="true"] {
+    padding: 0;
+    background: #000080;
+    color: #fff;
+    border: none;
+  }
+
+  .tcn-suggestion-list-search-input {
+    border-radius: 0;
+    padding: 4px;
+    height: 24px;
+    min-height: 24px;
+  }
+
+  /* ===== LAYOUT COMPONENTS ===== */
+
+  .tcn-title {
+    color: black;
+  }
+
+  .header .tcn-title {
+    color: #fff;
+  }
+  /* Headers */
+  .header[data-kind="window"] {
+    padding: 4px;
+    background: linear-gradient(90deg, #000080, #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: #c0c0c0;
+    color: #222222;
+    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;
+  }
+
+  /* Main content areas */
+  .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="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: #c0c0c0;
+    color: #222222;
+    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;
+  }
+
+  /* Sidebar styles */
+  .tcn-sidebar-start[data-hierarchy="tertiary"],
+  .tcn-sidebar-start[data-hierarchy="secondary"] {
+    background: #c0c0c0;
+    color: #222222;
+  }
+
+  .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: #c0c0c0;
+    color: #222222;
+  }
+
+  .tcn-sidebar-end[data-hierarchy="primary"],
+  .tcn-sidebar-start[data-hierarchy="primary"] {
+    background: #fff;
+    color: #222222;
+  }
+
+  /* Footer */
+  .tcn-footer[data-kind="window"] {
+    padding: 4px;
+    background: #c0c0c0;
+    box-shadow:
+      inset 1px 1px #808080,
+      inset -1px -1px #f5f5f5,
+      inset 2px 2px #c1c1c1,
+      inset -2px -2px #c0c0c0;
+    color: #222222;
+  }
+
+  /* ===== WINDOWS AND POPOVERS ===== */
+  .tcn-window,
+  .tcn-date-picker-popover,
+  .tcn-date-picker-year-selector,
+  .tcn-menu,
+  .tcn-suggestion-list {
+    border-radius: 0;
+    background: #c0c0c0;
+    padding: 4px;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #f5f5f5,
+      inset -2px -2px #808080,
+      inset 2px 2px #c0c0c0;
+  }
+
+  .tcn-suggestion-list-header {
+    background: #c0c0c0;
+  }
+
+  /* ===== DATE PICKER COMPONENTS ===== */
+  .tcn-date-picker-box {
+    background: #c0c0c0;
+    padding: 0;
+  }
+
+  .tcn-date-picker-date {
+    box-shadow: none !important;
+  }
+
+  .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));
+    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));
+    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");
+  }
+
+  /* ===== TIME BOX ===== */
+  .tcn-time-box {
+    border-radius: 0;
+    background: #fff;
+    border: none;
+    box-shadow:
+      inset 1px 1px #808080,
+      inset -1px -1px #f5f5f5,
+      inset 2px 2px #c1c1c1,
+      inset -2px -2px #c0c0c0;
+  }
+
+  .tcn-time-box-title-container {
+    min-height: 25px;
+    height: 25px;
+  }
+
+  /* ===== FORM COMPONENTS ===== */
+  .tcn-field-set {
+    padding: 8px 12px 12px 12px;
+    margin-top: 10px;
+    border-radius: 0;
+    background: #c0c0c0;
+    box-shadow:
+      inset 1px 1px #808080,
+      inset -1px -1px #f5f5f5,
+      inset 2px 2px #f5f5f5,
+      inset -2px -2px #808080;
+  }
+
+  .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: #c0c0c0;
+    padding: 0;
+    font-size: 12px;
+  }
+
+  /* ===== CHIPS ===== */
+  .tcn-chip {
+    background: #c0c0c0;
+    border-radius: 0;
+    color: #222222;
+    border: none;
+    font-size: 12px;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+  }
+
+  /* ===== CHECKBOXES ===== */
+  .tcn-checkbox {
+    outline: none;
+    border-radius: 0;
+    background: #fff;
+    border: none;
+    background-position: center;
+    background-repeat: no-repeat;
+    box-shadow:
+      inset 1px 1px #808080,
+      inset -1px -1px #f5f5f5,
+      inset 2px 2px #c1c1c1,
+      inset -2px -2px #c0c0c0;
+  }
+
+  .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: #c0c0c0;
+  }
+
+  .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");
+  }
+
+  /* ===== RADIO BUTTONS ===== */
+  .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%;
+  }
+
+  /* ===== SWITCHES ===== */
+  .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 grey,
+      inset -2px -2px #dfdfdf,
+      inset 2px 2px #0a0a0a;
+    border-color: #c0c0c0;
+    background-color: #fff;
+    transition: background-color 200ms 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 200ms ease-out;
+    width: calc(16px * var(--scalar, 1));
+    height: calc(16px * var(--scalar, 1));
+    border-radius: 0;
+    background-color: #c0c0c0;
+    box-sizing: border-box;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+  }
+
+  .tcn-switch-wrapper[data-is-checked="true"][data-is-disabled="false"] {
+    background-color: var(--accent-color);
+    border-color: #c0c0c0;
+  }
+
+  .tcn-switch-wrapper[data-is-disabled="true"] {
+    background-color: #c0c0c0;
+    border-color: #c0c0c0;
+    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 #666666,
+      inset 1px 1px #fff,
+      inset -2px -2px #949494,
+      inset 2px 2px #c0c0c0;
+  }
+
+  .tcn-switch-wrapper[data-is-disabled="true"] > .tcn-switch-icon {
+    color: #707070;
+  }
+
+  /* ===== SLIDERS ===== */
+  .tcn-slider::-webkit-slider-runnable-track {
+    border-radius: 0;
+    height: 5px;
+    box-shadow:
+      inset -1px -1px #fff,
+      inset 1px 1px grey,
+      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: #c0c0c0;
+    box-sizing: border-box;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+  }
+
+  .tcn-slider[data-is-disabled="false"]:active::-webkit-slider-thumb {
+    background-color: #c0c0c0;
+  }
+
+  .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 #c0c0c0;
+  }
+
+  /* Mozilla slider styles */
+  .tcn-slider::-moz-range-track {
+    border-radius: 0;
+    height: 5px;
+    border: none;
+    background: #c0c0c0;
+    box-shadow:
+      inset -1px -1px #fff,
+      inset 1px 1px grey,
+      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: #c0c0c0;
+    box-sizing: border-box;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+    cursor: pointer;
+  }
+
+  .tcn-slider[data-is-disabled="false"]:active::-moz-range-thumb,
+  .tcn-slider[data-is-disabled="false"]:focus::-moz-range-thumb {
+    background-color: #c0c0c0;
+    box-shadow:
+      inset -1px -1px #0a0a0a,
+      inset 1px 1px #fff,
+      inset -2px -2px grey,
+      inset 2px 2px #c0c0c0;
+    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 #c0c0c0;
+    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"] {
+    background: #c0c0c0;
+    padding: 0px;
+  }
+
+  .tcn-main[data-hierarchy="secondary"] {
+    background: #c0c0c0;
+    padding: 0px;
+  }
+
+  .tcn-main[data-hierarchy="tertiary"] {
+    background: #c0c0c0;
+    padding: 0px;
+  }
+
+  .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;
+  }
+}
+
+/* ===== TABS ===== */
+
+.tcn-tabs-list {
+  display: flex;
+  list-style-type: none;
+  margin: 0 0 -2px;
+  padding-left: 3px;
   position: relative;
-  top: -7px;
-  left: -4px;
-  height: 0;
-}
-
-.field-set-legend-text {
-  background: #c0c0c0;
-  padding: 0;
-  font-size: 12px;
-}
-
-/* ===== CHIPS ===== */
-.chip {
-  background: #c0c0c0;
-  border-radius: 0;
-  color: #222222;
-  border: none;
-  font-size: 12px;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset 1px 1px #fff,
-    inset -2px -2px grey,
-    inset 2px 2px #c0c0c0;
-}
-
-/* ===== CHECKBOXES ===== */
-.checkbox {
-  outline: none;
-  border-radius: 0;
-  background: #fff;
-  border: none;
-  background-position: center;
-  background-repeat: no-repeat;
-  box-shadow:
-    inset 1px 1px #808080,
-    inset -1px -1px #f5f5f5,
-    inset 2px 2px #c1c1c1,
-    inset -2px -2px #c0c0c0;
-}
-
-.checkbox:focus {
-  outline: none;
-}
-
-.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");
-}
-
-.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");
-}
-
-.checkbox[data-is-disabled="true"] {
-  background-color: #c0c0c0;
-}
-
-.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");
-}
-
-/* ===== RADIO BUTTONS ===== */
-.radio,
-.radio[data-checked="true"],
-.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;
-}
-
-.radio:focus {
-  outline: none;
-}
-
-.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;
-}
-
-.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%;
-}
-
-/* ===== SWITCHES ===== */
-.switch:focus,
-.switch:focus-visible,
-.switch-wrapper[data-focused="true"][data-is-checked="false"],
-.switch-wrapper[data-focused="true"][data-is-checked="true"] {
-  outline: none;
-}
-
-.switch-wrapper {
-  border-radius: 0;
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px grey,
-    inset -2px -2px #dfdfdf,
-    inset 2px 2px #0a0a0a;
-  border-color: #c0c0c0;
-  background-color: #fff;
-  transition: background-color 200ms ease-out;
-  margin-top: 2px;
-  margin-bottom: 3px;
-}
-
-.switch-wrapper[data-is-checked="false"] > .switch-icon {
-  color: #222;
-}
-
-.switch::after {
-  content: "";
-  cursor: pointer;
-  position: absolute;
-  top: 0;
-  transition: transform 200ms ease-out;
-  width: calc(16px * var(--scalar, 1));
-  height: calc(16px * var(--scalar, 1));
-  border-radius: 0;
-  background-color: #c0c0c0;
-  box-sizing: border-box;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset 1px 1px #fff,
-    inset -2px -2px grey,
-    inset 2px 2px #c0c0c0;
-}
-
-.switch-wrapper[data-is-checked="true"][data-is-disabled="false"] {
-  background-color: var(--accent-color);
-  border-color: #c0c0c0;
-}
-
-.switch-wrapper[data-is-disabled="true"] {
-  background-color: #c0c0c0;
-  border-color: #c0c0c0;
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px #999,
-    inset -2px -2px #dfdfdf,
-    inset 2px 2px #7f7f7f;
-}
-
-.switch[data-is-disabled="true"]:after {
-  box-shadow:
-    inset -1px -1px #666666,
-    inset 1px 1px #fff,
-    inset -2px -2px #949494,
-    inset 2px 2px #c0c0c0;
-}
-
-.switch-wrapper[data-is-disabled="true"] > .switch-icon {
-  color: #707070;
-}
-
-/* ===== SLIDERS ===== */
-.slider::-webkit-slider-runnable-track {
-  border-radius: 0;
-  height: 5px;
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px grey,
-    inset -2px -2px #dfdfdf,
-    inset 2px 2px #0a0a0a;
-}
-
-.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;
-}
-
-.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: #c0c0c0;
-  box-sizing: border-box;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset 1px 1px #fff,
-    inset -2px -2px grey,
-    inset 2px 2px #c0c0c0;
-}
-
-.slider[data-is-disabled="false"]:active::-webkit-slider-thumb {
-  background-color: #c0c0c0;
-}
-
-.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 #c0c0c0;
-}
-
-/* Mozilla slider styles */
-.slider::-moz-range-track {
-  border-radius: 0;
-  height: 5px;
-  border: none;
-  background: #c0c0c0;
-  box-shadow:
-    inset -1px -1px #fff,
-    inset 1px 1px grey,
-    inset -2px -2px #dfdfdf,
-    inset 2px 2px #0a0a0a;
-}
-
-.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;
-}
-
-.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: #c0c0c0;
-  box-sizing: border-box;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset 1px 1px #fff,
-    inset -2px -2px grey,
-    inset 2px 2px #c0c0c0;
-  cursor: pointer;
-}
-
-.slider[data-is-disabled="false"]:active::-moz-range-thumb,
-.slider[data-is-disabled="false"]:focus::-moz-range-thumb {
-  background-color: #c0c0c0;
-  box-shadow:
-    inset -1px -1px #0a0a0a,
-    inset 1px 1px #fff,
-    inset -2px -2px grey,
-    inset 2px 2px #c0c0c0;
-  outline: none;
-}
-
-.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 #c0c0c0;
-  cursor: not-allowed;
-}
-
-.nav-item,
-.nav-item[data-is-selected],
-.menu-item {
-  border-radius: 0;
-  font-size: 12px;
-}
-
-.nav-item,
-.menu-item .body-text {
-  font-size: 12px;
-}
-
-.main[data-hierarchy="primary"] {
-  background: #c0c0c0;
-  padding: 0px;
-}
-
-.main[data-hierarchy="secondary"] {
-  background: #c0c0c0;
-  padding: 0px;
-}
-
-.main[data-hierarchy="tertiary"] {
-  background: #c0c0c0;
-  padding: 0px;
-}
-
-.h-nav {
-  border: none;
-}
-
-.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;
-}
-
-.footer {
-  border: none;
-}
-
-.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;
-}
-`, e = new CSSStyleSheet();
-e.replaceSync(n);
+  text-indent: 0;
+
+  .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 grey,
+      inset 2px 2px #fff;
+  }
+
+  .tcn-tab-item[data-is-selected="true"] {
+    background-color: silver;
+    margin-left: -3px;
+    margin-top: -2px;
+    padding-bottom: 2px;
+    position: relative;
+    z-index: 8;
+  }
+}
+`, t = new CSSStyleSheet();
+t.replaceSync(n);
 export {
-  e as windows98StyleSheet
+  t as windows98StyleSheet
 };
 //# sourceMappingURL=windows_98_theme.js.map