/* https://storybook.js.org/docs/react/configure/theming */

body[data-mwc-theme='light'] {
  --theme-bg-color: #fff;
  --theme-color: #252a2e;
  --theme-sbdocs-table-head-bg-color: #f1f1f6;
  --theme-sbdocs-table-stripe-bg-color: #f8f8f8;
  --theme-sbdocs-table-border-color: #b7b9c3;
  --theme-docblock-source-color: #252a2e;
  --theme-docblock-source-bg-color: #fff;
  --theme-sidebar-subheading-color: #495057;
  --theme-sbdocs-link-color: #217cbb;
  --theme-code-color: #333;
  --theme-code-bg-color: #f8f8f8;
  --theme-code-border-color: #eee;
  --theme-header-underline-color: rgba(0, 0, 0, 0.1);
  --icon-fill: #252a2e;
}

body[data-mwc-theme='dark'] {
  --theme-bg-color: #252a2e;
  --theme-color: #f1f1f6;
  --theme-sbdocs-table-head-bg-color: #171c1e;
  --theme-sbdocs-table-stripe-bg-color: #252a2e;
  --theme-sbdocs-table-border-color: #464b52;
  --theme-docblock-source-color: #f1f1f6;
  --theme-docblock-source-bg-color: #6a6e79;
  --theme-sidebar-subheading-color: #495057;
  --theme-sbdocs-link-color: #217cbb;
  --theme-code-color: #f1f1f6;
  --theme-code-bg-color: #6a6e79;
  --theme-code-border-color: #6a6e79;
  --theme-header-underline-color: rgba(255, 255, 255, 0.2);
  --icon-fill: #ffffff;
}

body.sb-show-main,
#docs-root,
.sbdocs,
.sbdocs-h1,
.sbdocs-h2,
.sbdocs-li,
.sbdocs-p,
.sbdocs-ul {
  background-color: var(--theme-bg-color) !important;
  color: var(--theme-color) !important;
}

.sbdocs-h1 + h2:not(.sbdocs-h2),
.sbdocs-h2,
hr {
  border-color: var(--theme-header-underline-color) !important;
}

.sbdocs-table {
  width: 100%;
}

.sbdocs-table td {
  color: var(--theme-color) !important;
}

.sbdocs-table thead tr th {
  background-color: var(--theme-sbdocs-table-head-bg-color);
  border: 1px solid var(--theme-sbdocs-table-border-color);
  border-bottom-width: 2px;
  color: var(--theme-color);
  font-weight: 600;
  text-align: left;
}

.sbdocs-table tbody tr:nth-of-type(2n) {
  background-color: var(--theme-sbdocs-table-stripe-bg-color);
}

.sbdocs-table tbody tr td {
  border: 1px solid var(--theme-sbdocs-table-border-color);
}

.sbdocs-table tbody tr td:first-of-type {
  max-width: 160px;
  width: 160px;
}

.docblock-source {
  background-color: var(--theme-docblock-source-bg-color) !important;
  color: var(--theme-docblock-source-color) !important;
}

[data-mwc-theme='dark'] .docblock-source pre span,
[data-mwc-theme='dark'] .docblock-source button {
  color: var(--theme-docblock-source-color) !important;
}

[data-mwc-theme='dark'] .docblock-source button {
  background-color: var(--theme-docblock-source-bg-color);
  border-color: var(--theme-docblock-source-color);
}

.sidebar-subheading {
  color: var(--theme-sidebar-subheading-color) !important;
}

.token.comment {
  opacity: 0.8;
}

body .sbdocs-a {
  color: var(--theme-sbdocs-link-color) !important;
}

/* Fixes code block z-index issue */
pre .os-padding {
  z-index: inherit !important;
}

pre .os-content {
  max-height: 500px;
}

code {
  background-color: var(--theme-code-bg-color) !important;
  border-color: var(--theme-code-border-color) !important;
  color: var(--theme-code-color) !important;
}

.sidebar-header a[title='Storybook'] {
  background-image: url('/trimble-logo.svg');
  background-position: center;
  background-repeat: no-repeat;
}

body.dark .sidebar-header a[title='Storybook'] {
  filter: invert(1) brightness(999%) saturate(0);
}

.sidebar-header a[title='Storybook'] svg {
  opacity: 0;
}

html:has(body.dark) {
  color-scheme: dark;
}

.sbdocs kbd {
  background-color: var(--theme-color) !important;
  border-radius: 4px;
  color: var(--theme-bg-color) !important;
  opacity: 0.7;
  padding: 0 4px;
}

@media (forced-colors: active) {
  #panel-tab-content input,
  #panel-tab-content select,
  #panel-tab-content textarea {
    border: 1px solid transparent;
  }

  .sidebar-container {
    border-right: 1px solid transparent;
  }

  a[href='/?path=/settings/about'] {
    border: 1px solid transparent;
  }
}