/* .storybook/customUI.css */
:root {
  --bg-primary: #ffffff;
  --icon: #1e40af;
  --border: rgba(38, 85, 115, .15);
  --text-primary: #020202;
  --text-secondary: #6b7280;
  --box-shadow: rgb(0 0 0 / 12%);
}
body.dark {
  --bg-primary: #1b1c1d;
  --icon: #ffffff;
  --border: rgb(20, 20, 20);
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --box-shadow: #00000040;
  --gray: #dddddd08;
  .container.sidebar-container {
    background:
      linear-gradient(
        86deg,
        #1c2a38,
        #121d2d);
  }
  div[role=combobox] {
    background: var(--gray);
    box-shadow: var(--gray) 0 0 0 1px inset;
  }
  div[data-selected=true] {
    background: var(--gray) !important;
    box-shadow: var(--gray) 1px 3px;
    a {
      color: #60a5fa !important;
    }
  }
  div:has(.container.sidebar-container) {
    background-color: #354a5f0f;
    border-right: 1px solid #354a5f1a;
  }
  button[title="Tag filters"] {
    background: #121d2d;
    box-shadow: #121d2d 0 1px 3px;
  }
}
#storybook-explorer-tree,
#storybook-explorer-menu {
  svg {
    display: none;
  }
  svg[fill=none] {
    display: block;
  }
  div:has(svg[fill=none]) {
    margin-top: 0;
  }
  button {
    padding-top: 4px;
    align-items: center;
  }
}
nav img {
  margin: 0 auto;
  width: 115px;
}
div[role=combobox] {
  border-radius: 6px;
  background: #1e40af0d;
  box-shadow: #1e40af0d 0 0 0 1px inset;
}
div:has(+ .container.sidebar-container):after {
  background: none;
}
div:has(.container.sidebar-container) {
  border-right: 1px solid var(--border);
}
.container.sidebar-container {
  background:
    radial-gradient(
      circle,
      #1e40af00,
      #94bbe91f);
}
.sidebar-subheading {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
  font-weight: 500 !important;
  opacity: .4;
  button:hover {
    background: unset !important;
  }
}
div[data-selected=true] {
  background: var(--bg-primary) !important;
  font-weight: 500 !important;
  box-shadow: var(--box-shadow) 0 1px 3px;
  border-radius: 6px;
  transition:
    background .2s ease,
    box-shadow .3s ease,
    font-weight .3s ease;
  &:hover {
    background: var(--bg-primary);
  }
  a {
    color: var(--text-primary) !important;
  }
}
button[title="Tag filters"] {
  margin-right: 6px;
  background: var(--bg-primary);
  padding: 4px;
  box-shadow: var(--box-shadow) 0 1px 3px;
  height: 22px;
}
.sidebar-item a {
  color: var(--text-primary) !important;
}