/* Seznam složek pod sebou */
/* Tento hlavní obal řídí, že jednotlivé odkazy se složkami budou řazené svisle pod sebou. */
.folder-list {
  display: flex;                  /* Aktivuje flexbox pro uspořádání prvků. */
  flex-direction: column;         /* Nastaví směr řazení prvků pod sebe. */
  gap: 14px;                      /* Určuje mezeru mezi jednotlivými řádky složek. */
}

/* Celý řádek jedné složky */
/* Toto je klikací odkaz, který obsahuje ikonu složky i text vedle ní. */
.folder-link {
  --folder-color: #8a8a8a;        /* Výchozí barva složky. Jednotlivé složky ji níže přepisují vlastní barvou. */

  display: inline-flex;           /* Ikona a text se zobrazí vedle sebe v jednom řádku. */
  align-items: center;            /* Svisle zarovná ikonu a text na střed. */
  gap: 12px;                      /* Nastaví mezeru mezi ikonou složky a textem. */
  width: fit-content;             /* Šířka odkazu se přizpůsobí pouze obsahu, nebude přes celou stránku. */
  text-decoration: none;          /* Odstraní klasické podtržení odkazu. */
  color: #333333;                 /* Nastaví barvu textu odkazu. */
  font-size: 18px;                /* Nastaví velikost textu. */
  font-weight: 500;               /* Nastaví střední sílu písma. */
  cursor: pointer;                /* Po najetí myší se zobrazí kurzor ruky. */
}

/* Obal samotné ikony */
/* Tento prvek drží velikost SVG ikony složky. */
.folder-icon {
  display: inline-flex;           /* Pomáhá správnému zarovnání SVG ikony. */
  width: 48px;                    /* Určuje šířku ikony složky. Zde lze měnit velikost celé ikony. */
  height: auto;                   /* Výška se dopočítá automaticky podle poměru SVG. */
  flex-shrink: 0;                 /* Zabrání tomu, aby se ikona při nedostatku místa zmenšovala. */
}

/* SVG ikona složky */
/* Nastavení samotného SVG obrázku uvnitř obalu. */
.folder-svg {
  display: block;                 /* Odstraní drobnou spodní mezeru, kterou SVG někdy vytváří. */
  width: 100%;                    /* SVG vyplní celou šířku svého obalu. */
  height: auto;                   /* Zachová správný poměr stran ikony. */
  overflow: visible;              /* Zabrání nechtěnému oříznutí silnějšího obrysu. */
}

/* Obrys složky */
/* Tato část kreslí pouze vnější linku složky. */
.folder-outline {
  fill: none;                     /* Obrys nemá žádnou vnitřní výplň. */
  stroke: var(--folder-color);    /* Barva obrysu se bere z proměnné konkrétní složky. */
  stroke-width: 5;                /* Nastaví sílu obrysové linky. */
  stroke-linejoin: round;         /* Zaoblí spoje jednotlivých částí obrysu. */
  stroke-linecap: round;          /* Zaoblí konce linek. */
}

/* Výplň složky */
/* Tato vrstva je vnitřní barva složky, která se zobrazí až při hover efektu. */
.folder-fill {
  fill: var(--folder-color);      /* Výplň má stejnou barvu jako obrys složky. */
  opacity: 1;                     /* Výplň je plně sytá, bez průhlednosti. */
}

/* Maska výplně před hover efektem */
/* Maska určuje, že výplň je na začátku skrytá a při hoveru se postupně odkrývá zleva doprava. */
.folder-fill-mask {
  transform: scaleX(0);           /* Na začátku je šířka výplně nulová, tedy výplň není vidět. */
  transform-origin: left center;  /* Animace začíná z levé strany ikony. */
  transition: transform 0.45s ease; /* Nastaví rychlost a plynulost animace výplně. */
}

/* Efekt výplně při najetí myší */
/* Po najetí myší se maska roztáhne a tím odkryje barevnou výplň složky. */
.folder-link:hover .folder-fill-mask {
  transform: scaleX(1);           /* Výplň se roztáhne na celou šířku ikony. */
}

/* Textový obal */
/* Obal pro dva texty: výchozí text a text, který se zobrazí při hoveru. */
.folder-text {
  position: relative;             /* Umožní umístit hover text přes výchozí text. */
  display: inline-block;          /* Textový blok si zachová vlastní rozměry. */
  min-width: 120px;               /* Rezerva šířky, aby se text při změně nepřeskakoval. */
  color: #333333;                 /* Barva textu vedle složky. */
}

/* Výchozí text Dokumenty 1 až Dokumenty 5 */
/* Tento text je viditelný před najetím myší. */
.text-default {
  display: inline-block;          /* Umožní animaci posunu textu. */
  opacity: 1;                     /* Text je plně viditelný. */
  visibility: visible;            /* Text je viditelný a aktivní. */
  transform: translateY(0);       /* Výchozí poloha textu bez posunu. */
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; /* Plynulé skrytí a posun textu. */
}

/* Text Otevřít */
/* Tento text je na začátku skrytý a zobrazí se až při najetí myší. */
.text-hover {
  position: absolute;             /* Umístí hover text přes původní text. */
  left: 0;                        /* Zarovná hover text vlevo. */
  top: 0;                         /* Zarovná hover text nahoru. */
  opacity: 0;                     /* Text je na začátku neviditelný. */
  visibility: hidden;             /* Text je na začátku skrytý. */
  transform: translateY(6px);     /* Hover text je mírně posunutý dolů. */
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; /* Plynulé zobrazení a posun textu. */
}

/* Při hoveru se výchozí text skryje */
/* Původní text například „Dokumenty 1“ zmizí a lehce se posune nahoru. */
.folder-link:hover .text-default {
  opacity: 0;                     /* Výchozí text zmizí. */
  visibility: hidden;             /* Výchozí text se skryje. */
  transform: translateY(-6px);    /* Výchozí text se posune mírně nahoru. */
}

/* Při hoveru se zobrazí text Otevřít */
/* Skrytý hover text se zobrazí a najede do své pozice. */
.folder-link:hover .text-hover {
  opacity: 1;                     /* Hover text se zobrazí. */
  visibility: visible;            /* Hover text bude viditelný. */
  transform: translateY(0);       /* Hover text se vrátí do základní polohy. */
}

/* Složka 1 — šedá */
/* Nastavení individuální barvy první složky. */
.folder-1 {
  --folder-color: #8a8a8a;
}

/* Složka 2 — pastelová bordó */
/* Nastavení individuální barvy druhé složky. */
.folder-2 {
  --folder-color: #b86b7a;
}

/* Složka 3 — pastelová petrolejová */
/* Nastavení individuální barvy třetí složky. */
.folder-3 {
  --folder-color: #4f8f91;
}

/* Složka 4 — tlumená tmavě modrá */
/* Nastavení individuální barvy čtvrté složky. */
.folder-4 {
  --folder-color: #526f9f;
}

/* Složka 5 — pastelová okrová */
/* Nastavení individuální barvy páté složky. */
.folder-5 {
  --folder-color: #c79a45;
}