/* -------------------- Storybook sidebar -------------------- */

.react-aria-Popover .sb-list,
.react-aria-Popover > div + div {
  border-radius: var(--rounded-lg);
}

.react-aria-Popover .sb-list > div > button {
  border-radius: var(--rounded-md);
}

.dark .react-aria-Popover .sb-list,
.dark .react-aria-Popover > div + div {
  background: var(--neutral-900) !important;
}

.light .react-aria-Popover .sb-list,
.light .react-aria-Popover > div + div {
  background: var(--white) !important;
}

.dark .sidebar-container {
  background: var(--neutral-950);
}

.sidebar-header img {
  width: 150px;
}

.sidebar-header a:focus {
  border: 1px solid transparent;
}

.sidebar-item {
  border-radius: var(--rounded-md) !important;
}

.dark .sidebar-item:hover {
  background: var(--neutral-900) !important;
}

.light .sidebar-item:hover {
  background: var(--neutral-100) !important;
}

.light .sidebar-item[data-selected="true"],
.light .sidebar-item[data-selected="true"]:hover {
  background: var(--neutral-200) !important;
  color: var(--neutral-800) !important;
}

.dark .sidebar-item[data-selected="true"],
.dark .sidebar-item[data-selected="true"]:hover {
  background: var(--neutral-800) !important;
}

button[data-testid="context-menu"] {
  box-shadow: none !important;
}

.dark button[data-testid="context-menu"] {
  background: var(--neutral-900);
}

.dark button[data-testid="context-menu"]:hover {
  background: var(--neutral-800);
}

.dark div[data-selected="true"] button[data-testid="context-menu"] {
  background: var(--neutral-800);
}

.dark div[data-selected="true"] button[data-testid="context-menu"]:hover {
  background: var(--neutral-700);
}

.light div[data-selected="true"] button[data-testid="context-menu"] > svg {
  color: var(--neutral-800);
}

.light button[data-testid="context-menu"] {
  background: var(--neutral-100);
}

.light button[data-testid="context-menu"]:hover {
  background: var(--neutral-200);
}

.light div[data-selected="true"] button[data-testid="context-menu"] {
  background: var(--neutral-200);
}

.light div[data-selected="true"] button[data-testid="context-menu"]:hover {
  background: var(--neutral-300);
}

.search-field,
.search-result-item {
  border-radius: var(--rounded-lg) !important;
}

.search-field:has(input:focus) {
  outline: none;
}

.dark .search-field button:hover {
  color: var(--neutral-400);
}

.dark [data-testid="sb-preview-toolbar"] button:hover {
  color: var(--neutral-400);
}

.sidebar-item,
.search-result-item {
  text-transform: capitalize;
}

.dark .sidebar-subheading-action:hover {
  color: var(--neutral-400);
}

.light .sidebar-item svg[type="document"],
.light .sidebar-item svg[type="component"],
.light .search-result-item svg[type="document"],
.light .search-result-item svg[type="component"],
.dark .search-result-item mark {
  color: var(--primary-500);
  font-weight: 600;
}

.dark .sidebar-item svg[type="document"],
.dark .sidebar-item svg[type="component"],
.dark .search-result-item svg[type="document"],
.dark .search-result-item svg[type="component"],
.light .search-result-item mark {
  color: var(--primary-600);
  font-weight: 600;
}

.light .sidebar-item svg[type="story"],
.light .search-result-item svg[type="document"],
.light .search-result-item svg[type="story"] {
  color: var(--neutral-400);
}

.dark .sidebar-item svg[type="story"],
.dark .search-result-item svg[type="document"],
.dark .search-result-item svg[type="story"] {
  color: var(--neutral-600);
}

.light .search-result-item--label {
  color: var(--neutral-500);
}

.dark .search-result-item--label {
  color: var(--neutral-400);
}

#sidebar-bottom-wrapper {
  display: none;
}

.sidebar-header + div > div {
  box-shadow: none !important;
}

.sidebar-header + div,
#storybook-checklist-widget,
.sidebar-header + div > div:before {
  display: none;
  border-radius: var(--rounded-lg);
}

.dark .sidebar-header button:hover {
  color: var(--neutral-400);
}

.dark #storybook-checklist-widget {
  background: var(--neutral-950);
}

.light #storybook-checklist-widget {
  background: var(--white);
}

/* -------------------- Storybook args -------------------- */

.dark,
.dark #panel-tab-content div,
.dark .docblock-argstable-body > tr > td {
  background: var(--neutral-950) !important;
}

.light,
.light #panel-tab-content div,
.light .docblock-argstable-body > tr > td {
  background: var(--neutral-50) !important;
}

.dark .docblock-argstable-head > tr {
  background: var(--neutral-800) !important;
}

.dark .docblock-argstable-body tr > td textarea,
.dark .docblock-argstable-body tr > td select,
.dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
  background: var(--neutral-900);
  border: solid 1px var(--neutral-800);
  box-shadow: none;
}

.light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
  background: var(--white);
}

/* -------------------- Storybook content -------------------- */

.dark [role="tabpanel"] [data-radix-scroll-area-content] > div {
  background: var(--neutral-950) !important;
}

.light [role="tabpanel"] [data-radix-scroll-area-content] > div {
  background: var(--white) !important;
}