/**
 * AE Picture Wall plugin for Shaarli.
 *
 * Version 0.1.6
 *
 * Fabio Lichinchi (mukka) - https://alterego.cc/
 *
 * Only the optional links-list fallback slot is styled. Native images and
 * the Picture Wall keep their existing layout and dimensions.
 *
 * SPDX-License-Identifier: Unlicense
 */
#linklist .linklist-item-thumbnail.aepw-list-fallback {
  position:relative; display:block !important; overflow:hidden; max-width:100%;
}
#linklist .aepw-list-visual {
  --aepw-list-hue:200;
  position:absolute; inset:0; display:block; box-sizing:border-box; overflow:hidden;
  margin:0; padding:0; border:0; border-radius:4px; text-decoration:none !important;
  background:hsl(var(--aepw-list-hue),35%,20%); color:#fff; isolation:isolate;
}
#linklist .aepw-list-visual[hidden] {display:none !important}
#linklist .aepw-list-fallback > .thumbnail {visibility:hidden}
#linklist .aepw-list-hue-0 {--aepw-list-hue:0} #linklist .aepw-list-hue-1 {--aepw-list-hue:30}
#linklist .aepw-list-hue-2 {--aepw-list-hue:60} #linklist .aepw-list-hue-3 {--aepw-list-hue:90}
#linklist .aepw-list-hue-4 {--aepw-list-hue:120} #linklist .aepw-list-hue-5 {--aepw-list-hue:150}
#linklist .aepw-list-hue-6 {--aepw-list-hue:180} #linklist .aepw-list-hue-7 {--aepw-list-hue:210}
#linklist .aepw-list-hue-8 {--aepw-list-hue:240} #linklist .aepw-list-hue-9 {--aepw-list-hue:270}
#linklist .aepw-list-hue-10 {--aepw-list-hue:300} #linklist .aepw-list-hue-11 {--aepw-list-hue:330}
#linklist .aepw-list-art {
  position:absolute; inset:0; display:flex; flex-direction:column; gap:3px;
  box-sizing:border-box; padding:8px; text-align:left;
  background:radial-gradient(circle at 100% 0,hsl(var(--aepw-list-hue),45%,32%) 0 28%,transparent 29%),
    radial-gradient(circle at 95% 5%,hsl(var(--aepw-list-hue),38%,27%) 0 52%,transparent 53%);
}
#linklist .aepw-list-initial {
  display:block; flex:1 1 0; min-height:0; overflow:hidden;
  font:700 23px/1.1 system-ui,sans-serif; text-transform:uppercase; opacity:.65;
}
#linklist .aepw-list-domain {
  display:block; flex:0 1 auto; min-height:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; font:700 11px/1.3 system-ui,sans-serif;
}
#linklist .aepw-list-tags {
  display:flex; flex:0 1 auto; gap:3px; overflow:hidden; min-height:0;
  max-height:14px; font:8px/1.3 system-ui,sans-serif;
}
#linklist .aepw-list-tags:empty {display:none}
#linklist .aepw-list-tags > span {
  background:#ffffff20; padding:1px 3px; border-radius:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#linklist img.aepw-list-image {
  position:absolute !important; inset:0 !important; display:block !important;
  width:100% !important; height:100% !important; max-width:none !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  object-fit:cover; background:#fff !important; opacity:0; pointer-events:none;
}
#linklist img.aepw-list-image.aepw-list-loaded {opacity:1}
#linklist .aepw-list-has-image:not([data-source="favicon"]) .aepw-list-art {visibility:hidden}
#linklist .aepw-list-visual[data-source="favicon"] img.aepw-list-image {
  inset:7px auto auto 8px !important; width:32px !important; height:32px !important;
  max-width:32% !important; max-height:42% !important; padding:4px !important;
  box-sizing:border-box; object-fit:contain; border-radius:6px; background:#718096 !important;
}
#linklist .aepw-list-visual[data-source="favicon"].aepw-list-has-image .aepw-list-initial {visibility:hidden}