@tcn/ui 0.0.1

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

@@ -0,0 +1,1171 @@
+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 {
+  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);
+export {
+  e as windows98StyleSheet
+};
+//# sourceMappingURL=windows_98_theme.js.map