/* Listen in Karten: kurze Listen (Startseite, neueste Dateien) und der Verlauf. */

@layer bauteile {
  /* Kurze Listen: Kürzel oder Symbol, Name mit Zusatz, rechts das Datum */
  .kurzliste {
    display: grid;
    align-content: start;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: flex; align-items: first baseline; gap: var(--a3); padding: 0.45rem 0.4rem; border-radius: var(--rund-s); }
    & li:hover { background: var(--tinte-flaeche); }
    & span { display: grid; min-width: 0; line-height: 1.3; }
    & a { overflow: hidden; color: var(--text); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
    & a:hover { text-decoration: underline; }
    & small { overflow: hidden; font-size: var(--gr-13); color: var(--text-leise); text-overflow: ellipsis; white-space: nowrap; }
    & .rechts { margin-left: auto; justify-items: end; font-size: var(--gr-14); white-space: nowrap; }
    & .kurzliste-symbol { flex: none; align-self: center; display: flex; color: var(--text-leise); & .icon { width: 1.1rem; height: 1.1rem; } }
  }

  /* Verlauf: Einträge untereinander mit Linie links */
  .verlauf {
    display: grid;
    gap: var(--a3);
    margin: 0;
    padding: 0;
    list-style: none;

    & li { display: grid; gap: 0.1rem; padding-left: var(--a3); border-left: 2px solid var(--linie-stark); }
    & small { font-size: var(--gr-13); color: var(--text-leise); }

    /* Als Zeitleiste: je Vorgang ein Icon im Kreis, dazwischen eine senkrechte Linie */
    &.zeitleiste { gap: var(--a4); }
    &.zeitleiste li { position: relative; min-height: 2rem; padding-left: 2.75rem; border: 0; }
    &.zeitleiste li:not(:last-child)::before {
      content: "";
      position: absolute;
      top: 2.2rem;
      bottom: calc(0.2rem - var(--a4));
      left: calc(1rem - 1px);
      width: 2px;
      background: var(--linie);
    }
    &.zeitleiste li > .icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 2rem;
      height: 2rem;
      padding: 0.45rem;
      color: var(--akzent);
      background: var(--fokus-schein);
      border-radius: 50%;
    }
  }
}