/* Define a class .dark-mode for dark mode styles */

.dark-mode #loading {
  background: var(--background);
}

.dark-mode #login {
  background: var(--background);
}
/* Loading */
.dark-mode #loading {
  background: var(--background);
}

/* Login */
.dark-mode #login {
  background: var(--background);
}

#search.dark-mode input {
  color:white
}

#search.active.dark-mode #search-input {
  border-color: white;
}
/* Search input */
.dark-mode #search #search-input {
  background: var(--surfaceSecondary);
  border-color: var(--surfaceSecondary);
}

.dark-mode #search #search-input input::placeholder {
  color: var(--textSecondary);
}

/* Active Search input */
.dark-mode #search.active #search-input {
  background: var(--surfacePrimary);
  border-color: white;
}

.dark-mode #search.active input {
  color: var(--textPrimary);
}

/* Search result */
.dark-mode #search #result {
  background: var(--background);
  color: var(--textPrimary);
}

/* Search boxes */
.dark-mode #search .boxes h3 {
  color: var(--textPrimary);
}

/* Action */
.dark-mode .action {
  color: var(--textPrimary) !important;
}

/* Action counter */
.dark-mode .action .counter {
  border-color: var(--surfacePrimary);
}

/* Navigation */
.dark-mode nav > div {
  border-color: var(--divider);
}

/* Listing items */
.dark-mode #listingView .item {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
  border-color: var(--divider);
}

.dark-mode #listingView.gallery .item .text {
  text-shadow: 0 0 2px black;
}

/* Listing item modified text */
.dark-mode #listingView .item .modified {
  color: var(--textSecondary);
}

/* Listing header and span */
.dark-mode #listingView h2,
.dark-mode #listingView.list .header span {
  color: var(--textPrimary) !important;
}

/* Message */
.dark-mode .message {
  color: var(--textPrimary);
}

/* Card */
.dark-mode .card {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
}

/* Dashboard navigation */
.dark-mode .dashboard #nav ul li {
  color: var(--textSecondary);
}

#search.active.dark-mode #result {
  background-color: black;
}
/* Result list */
.dark-mode #result-list {
  background-color: var(--surfacePrimary);
  color:white;
}

/* Card, Dashboard navigation, and label */
.dark-mode .card h3,
.dark-mode .dashboard #nav,
.dark-mode .dashboard p label {
  color: var(--textPrimary);
}

/* Input hover and focus */
.dark-mode .input:hover,
.dark-mode .input:focus {
  border-color: rgba(255, 255, 255, 0.15);
}

/* Red input */
.dark-mode .input--red {
  background: #73302D;
}

/* Green input */
.dark-mode .input--green {
  background: #147A41;
}

/* Collapsible and label */
.dark-mode .dashboard #nav .wrapper,
.dark-mode .collapsible {
  border-color: var(--divider);
}

.dark-mode .collapsible > label * {
  color: var(--textPrimary);
}

/* Table header */
.dark-mode table th {
  color: var(--textSecondary);
}

/* Shell */
.dark-mode .shell {
  background: var(--surfacePrimary);
  color: var(--textPrimary);
}

/* Shell result */
.dark-mode .shell__result {
  border-top: 1px solid var(--divider);
}

/* Editor container */
.dark-mode #editor-container {
  background: var(--background);
}

.dark-mode #editor-container .bar {
  background: var(--surfacePrimary);
}

/* Navigation */
.dark-mode nav {
  background: var(--surfaceSecondary) !important;
}

/* Dropdown */
.dark-mode #dropdown {
  background: var(--surfaceSecondary) !important;
}

/* Help button */
.dark-mode .helpButton {
  background: var(--background);
}

/* Size input wrapper */
.dark-mode .sizeInputWrapper {
  background: var(--background);
  color: white;
}

/* Button group button */
.dark-mode .button-group button {
  color: white;
  background-color:var(--background);
}

/* Result desktop */
.dark-mode #results #result-list {
  max-height: unset;
}

/* Result desktop background */
.dark-mode #results {
  background-color: var(--background);
}

/* Use the class .dark-mode to apply styles conditionally */
.dark-mode {
  background: var(--background);
  color: var(--textPrimary);
}

/* Header */
.dark-mode-header {
  color: white;
  background-color: #283136;
}