/* Define a class .dark-mode for dark mode styles */
.dark-mode {
  --background: #141D24;
  --alt-background: #283136;
  --surfacePrimary: #20292F;
  --surfaceSecondary: #3A4147;
  --divider: rgba(255, 255, 255, 0.12);
  --textPrimary: rgba(255, 255, 255, 0.87);
  --textSecondary: rgba(255, 255, 255, 0.6);
  --iconBackground: #1e1f20;
  --activeWhiteIcon: white;
}

.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 #input {
  border-color: white;
}
/* Search input */
.dark-mode #search #input {
  background: var(--surfaceSecondary);
  border-color: var(--surfaceSecondary);
}

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

/* Active Search input */
.dark-mode #search.active #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;
}

.dark-mode .action:hover {
  background-color: rgba(255, 255, 255, .1);
}

/* 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) !important;
  color: var(--textPrimary);
  border-color: var(--divider) !important;
}

.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);
}

/* Flat button hover */
.dark-mode .button--flat:hover {
  background: var(--surfaceSecondary);
}

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

.dark-mode .dashboard #nav ul li:hover {
  background: var(--surfaceSecondary);
}
#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);
}

.dark-mode .card#share input,
.dark-mode .card#share select,
.dark-mode .input {
  background: var(--surfaceSecondary);
  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);
}

/* File list item */
.dark-mode .file-list li:hover {
  background: var(--surfaceSecondary);
}

.dark-mode .file-list li:before {
  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;
}

/* Share box */
.dark-mode .share__box {
  background: var(--surfacePrimary) !important;
  color: var(--textPrimary);
}

/* Share box element */
.dark-mode .share__box__element {
  border-top-color: var(--divider);
}

/* 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;
}

/* Header with backdrop-filter support */
@supports (backdrop-filter: none) {
  .dark-mode-header {
    background-color: rgb(37 49 55 / 33%) !important;
    backdrop-filter: blur(16px) invert(0.1);
  }
  #sidebar.dark-mode {
    background-color: rgb(37 49 55 / 33%) !important;
    backdrop-filter: blur(16px) invert(0.1);
  }
}

#sidebar.dark-mode {
  background-color: var(--alt-background);
}