body.colorful-folders-side {
  .nav-files-container {
    --collapse-icon-color: var(--text-normal);
  }
  .nav-files-container > div > .nav-folder {
    position: relative;
  }

  .nav-files-container > div > .nav-folder::before {
    position: absolute;
    content: "";
    width: 4px;
    height: -webkit-fill-available;
    top: 2px;
    bottom: 2px;
    left: -4px;
    border-radius: var(--radius-s);
  }

  .nav-files-container > div > .nav-folder:nth-child(8n + 2)::before {
    background-color: var(--color-red);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 3)::before {
    background-color: var(--color-orange);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 4)::before {
    background-color: var(--color-yellow);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 5)::before {
    background-color: var(--color-green);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 6)::before {
    background-color: var(--color-cyan);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 7)::before {
    background-color: var(--color-blue);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 8)::before {
    background-color: var(--color-purple);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 9)::before {
    background-color: var(--color-pink);
  }
}

body.colorful-folders-subtle {
  .nav-files-container {
    --collapse-icon-color: var(--text-normal);
  }
  .nav-files-container > div > .nav-folder {
    border-radius: var(--radius-s);
    --nav-item-color-hover: var(--nav-item-color);
    --nav-collapse-icon-color: var(--nav-item-color);
  }

  .nav-files-container > div > .nav-folder:nth-child(8n + 2) {
    --nav-item-color: color-mix(in srgb, var(--color-red), var(--color-base-100));
    background-color: rgba(var(--color-red-rgb), 0.1);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 3) {
    --nav-item-color: color-mix(in srgb, var(--color-orange), var(--color-base-100));
    background-color: rgba(var(--color-orange-rgb), 0.1);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 4) {
    --nav-item-color: color-mix(in srgb, var(--color-yellow), var(--color-base-100));
    background-color: rgba(var(--color-yellow-rgb), 0.1);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 5) {
    --nav-item-color: color-mix(in srgb, var(--color-green), var(--color-base-100));
    background-color: rgba(var(--color-green-rgb), 0.1);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 6) {
    --nav-item-color: color-mix(in srgb, var(--color-cyan), var(--color-base-100));
    background-color: rgba(var(--color-cyan-rgb), 0.1);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 7) {
    --nav-item-color: color-mix(in srgb, var(--color-blue), var(--color-base-100));
    background-color: rgba(var(--color-blue-rgb), 0.1);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 8) {
    --nav-item-color: color-mix(in srgb, var(--color-purple), var(--color-base-100));
    background-color: rgba(var(--color-purple-rgb), 0.1);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 9) {
    --nav-item-color: color-mix(in srgb, var(--color-pink), var(--color-base-100));
    background-color: rgba(var(--color-pink-rgb), 0.1);
  }
}

body.colorful-folders-strong {
  .nav-files-container {
    --collapse-icon-color: var(--text-normal);
  }
  .nav-files-container > div > .nav-folder {
    border-radius: var(--radius-s);
    --nav-item-color: white;
    --nav-item-color-hover: var(--nav-item-color);
    --nav-collapse-icon-color: var(--nav-item-color);
  }

  .nav-files-container > div > .nav-folder:nth-child(8n + 2) {
    background-color: rgba(var(--color-red-rgb), 0.75);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 3) {
    background-color: rgba(var(--color-orange-rgb), 0.75);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 4) {
    background-color: rgba(var(--color-yellow-rgb), 0.75);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 5) {
    background-color: rgba(var(--color-green-rgb), 0.75);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 6) {
    background-color: rgba(var(--color-cyan-rgb), 0.75);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 7) {
    background-color: rgba(var(--color-blue-rgb), 0.75);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 8) {
    background-color: rgba(var(--color-purple-rgb), 0.75);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 9) {
    background-color: rgba(var(--color-pink-rgb), 0.75);
  }
}

body.colorful-folders-mono {
  .nav-files-container {
    --collapse-icon-color: var(--text-normal);
  }
  .nav-files-container > div > .nav-folder {
    border-radius: var(--radius-s);
    --nav-item-color: var(--text-normal);
  }

  .nav-files-container > div > .nav-folder:nth-child(8n + 2) {
    background-color: rgba(var(--mono-rgb-100), 0.24);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 3) {
    background-color: rgba(var(--mono-rgb-100), 0.21);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 4) {
    background-color: rgba(var(--mono-rgb-100), 0.18);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 5) {
    background-color: rgba(var(--mono-rgb-100), 0.15);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 6) {
    background-color: rgba(var(--mono-rgb-100), 0.12);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 7) {
    background-color: rgba(var(--mono-rgb-100), 0.09);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 8) {
    background-color: rgba(var(--mono-rgb-100), 0.06);
  }
  .nav-files-container > div > .nav-folder:nth-child(8n + 9) {
    background-color: rgba(var(--mono-rgb-100), 0.03);
  }
}
