@use "./base.scss";

// Explorer (left sidebar) — 긴 한국어 제목 구분성 개선
#explorer-content {
  & > ul.overflow > li {
    margin: 0.15rem 0;
  }

  a[data-for],
  .folder-container > div > span {
    display: block;
    padding: 0.45em 0.65em;
    border-left: 4px solid transparent;
    border-radius: 0 4px 4px 0;
    line-height: 1.35;
    transition: background 0.12s ease, border-color 0.12s ease;
  }

  // Cycling accent colors per item for quick visual distinction
  & > ul.overflow > li:nth-child(8n+1) a[data-for] { border-left-color: #e03131; }
  & > ul.overflow > li:nth-child(8n+2) a[data-for] { border-left-color: #f76707; }
  & > ul.overflow > li:nth-child(8n+3) a[data-for] { border-left-color: #f59f00; }
  & > ul.overflow > li:nth-child(8n+4) a[data-for] { border-left-color: #2f9e44; }
  & > ul.overflow > li:nth-child(8n+5) a[data-for] { border-left-color: #099268; }
  & > ul.overflow > li:nth-child(8n+6) a[data-for] { border-left-color: #1971c2; }
  & > ul.overflow > li:nth-child(8n+7) a[data-for] { border-left-color: #7048e8; }
  & > ul.overflow > li:nth-child(8n+8) a[data-for] { border-left-color: #c2255c; }

  a[data-for]:hover {
    background: var(--lightgray);
    border-left-width: 6px;
  }
}

// Subtle dotted separator between items
#explorer-content > ul.overflow > li + li {
  border-top: 1px dotted var(--lightgray);
  padding-top: 0.1rem;
}