:root {
  // Default blueish HUE used for surfaces, text, buttons and more
  --hue: 210;

  // assign HSL (hue, saturation, lightness) primary vars here for all three themes
  --hsl-primary-dark: var(--hue) 50% 45%;
  --hsl-primary-contrast: var(--hue) 45% 50%;
  --hsl-primary-light: var(--hue) 55% 55%;

  --popup-bg: #000;
  --popup-placeholder-bg: #222;
  --popup-timer-color: white;
  --popup-caption-max-width: 640px;
  --popup-caption-font-size: 0.9rem;
  --popup-caption-font-weight: 300;
  --popup-caption-line-height: 135%;
  --popup-caption-color: black;
  --popup-caption-item-space: 0.35em;
  --popup-caption-line-clamp: 3;
  --files-data-top: 0;
  --files-data-display: none;
  --files-data-display-hover: block;
  --files-data-animation: opacity 0.2s;
  --grid-height: 100%;
  --grid-font-size: 12px; // default: 14px
  --list-max-width: 1040px;
  --rows-height: auto;
  --rows-justify-content: space-evenly;
  --rows-flex-grow: 1;
  --sidebar-width: calc(10vw + 180px);
  --sidebar-width-small: 85vw;
  --sidebar-width-hover: 480px;
  --menu-font-size: 16px;
  --menu-line-height: 30px;
  --menu-folder-icon-size: 22px;
  --menu-text-indent: 6px;
  --menu-icon-toggle-opacity: 0;
}

.files-grid .files-folder-preview,
.files-rows .files-folder-preview,
.files-columns .files-folder-preview {
  opacity: 1;
  max-width: none;
  max-height: none;
  left: 0;
  transform: none;
  width: 100%;
  bottom: 0;
  height: 100%;
  border: none;
  box-shadow: none;
  top: 0;
}
.files-imagelist .files-folder-preview,
.files-blocks .files-folder-preview {
  opacity: 1;
  max-width: none;
  max-height: none;
  left: unset;
  transform: none;
  aspect-ratio: 1;
  width: unset;
  bottom: unset;
  height: 100%;
  border: none;
  box-shadow: none;
  top: unset;
}
.files-grid .files-data,
.files-imagelist .files-data,
.files-blocks .files-data,
.files-rows .files-data,
.files-columns .files-data {
  z-index: 1;
}

.files-grid .files-data .name,
/* .files-imagelist .files-data .name, */
/* .files-blocks .files-data .name, */
.files-rows .files-data .name,
.files-columns .files-data .name {
  background: rgb(0 0 0 / 40%);
  color: white;
}
