/* GPLv3 license
FAS - Dataview Cards Deck
Author: ElsaTam (Kapirklaa in Discord)
*/
body {
  --workleaves-background: var(--background-primary);
  --workleaves-foreground: var(--text-normal);
}

.dataview-cards-deck {
  --card-gap: 50px;
  --card-width: 150px;
  --card-height: 300px;
  --deck-border-width: 0;
}

@scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) {
  ul.dataview-result-list-root-ul {
    --border-color-hover: var(--color-accent);
    --list-indent: 0;
    --list-spacing: 0;
    --link-decoration: none;
    --link-decoration-hover: none;
    --image-shadow-offset: 0;
    list-style-type: none;
    border: var(--deck-border-width) solid var(--background-secondary);
    padding-bottom: var(--padding-bottom) !important;
    padding-top: var(--padding-top) !important;
    padding-left: var(--padding-left) !important;
    padding-right: var(--padding-right) !important;
    --border-color: currentColor;
    --card-radius: var(--radius-l);
    --card-scale-hover: 1.1;
    --card-shadow-offset-y: 2px;
    --card-shadow-offset-x: -2px;
    --card-shadow-blur: 3px;
    --card-shadow-opacity: 0.2;
    --card-base-translation: calc(-0.5 * (var(--card-width) - var(--card-gap)));
    --deck-scrollbar-width: 10px;
    --padding-scale-factor: (var(--card-scale-hover) - 1) * var(--card-height);
    color: var(--text-muted);
    height: calc((var(--card-height) + var(--card-shadow-offset-y) * 2 + var(--card-shadow-blur) * 2) * var(--card-scale-hover) + var(--padding-bottom) + 2 * var(--deck-border-width));
    display: flex;
    align-items: center;
    justify-content: left;
    overflow-x: auto;
    --padding-bottom: max(0px, var(--card-shadow-blur) + var(--card-shadow-offset-y) + var(--padding-scale-factor));
    --padding-top: max(0px, var(--card-shadow-blur) - var(--card-shadow-offset-y) + var(--padding-scale-factor));
    --padding-left: calc(
        -1 * var(--card-base-translation) + max(0px, var(--card-shadow-blur) - var(--card-shadow-offset-x))
    );
    --padding-right: calc(
        -1 * var(--card-base-translation) + max(0px, var(--card-shadow-blur) + var(--card-shadow-offset-x))
    );
  }
  ul.dataview-result-list-root-ul > * {
    width: var(--card-gap);
    transition: transform 0.5s ease-in-out;
    transform: translateX(var(--card-base-translation));
    transform-origin: right;
  }
  .dataview-result-list-li {
    transition: transform 0.5s ease-in-out, filter 0.2s linear;
    height: var(--card-height);
    vertical-align: middle;
  }
  .markdown-embed {
    --embed-border-start: 0px;
    --embed-border-end: 0px;
    --embed-max-height: var(--card-height);
    --embed-padding: 0px;
  }
  .markdown-embed-title {
    border-top-left-radius: var(--card-radius);
    position: absolute;
    z-index: 1;
    writing-mode: vertical-rl;
    background-color: var(--workleaves-background);
    padding: var(--size-4-2) 0;
    top: 1px;
    left: 1px;
    box-shadow: 1px 1px 5px black;
  }
  .markdown-embed.markdown-embed .markdown-preview-view,
  .markdown-embed-content {
    box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(0, 0, 0, var(--card-shadow-opacity));
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
    outline: 4px solid var(--workleaves-background);
    --font-text-size: xx-small;
    width: var(--card-width);
    background: var(--workleaves-background);
    contain: strict;
    content-visibility: auto;
    overflow: hidden;
    padding: var(--size-2-2);
    height: var(--embed-max-height);
  }
  .dataview-result-list-li > span > a > .image-embed,
  .dataview-result-list-li > span > .image-embed {
    box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(0, 0, 0, var(--card-shadow-opacity));
    border-radius: var(--card-radius);
    border: 1px solid var(--border-color);
    outline: 4px solid var(--workleaves-background);
    width: var(--card-width);
    height: var(--card-height);
    display: block;
  }
  .dataview-result-list-li > span > a > .image-embed > img,
  .dataview-result-list-li > span > .image-embed > img {
    border-radius: var(--card-radius);
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .markdown-embed-content > .markdown-preview-view {
    overflow: hidden;
  }
  .markdown-embed-link {
    right: calc(var(--card-gap) - var(--card-width) + 4px);
    width: fit-content;
  }
  .markdown-embed img {
    max-height: 150px;
    max-width: 100%;
    object-fit: cover;
    object-position: center;
  }
}
@scope (body:not(.is-ios) .dataview-cards-deck) to (.markdown-embed .markdown-embed) {
  .ul.dataview-result-list-root-ul::-webkit-scrollbar {
    width: var(--deck-scrollbar-width);
    height: var(--deck-scrollbar-width);
  }
}
@media (hover: hover) {
  @scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) {
    ul.dataview-result-list-root-ul > *:hover {
      transform: translateX(var(--card-base-translation)) scale(var(--card-scale-hover));
    }
    ul.dataview-result-list-root-ul > *:hover ~ * {
      transform: translateX(var(--card-base-translation)) translateX(calc(var(--card-width) - var(--card-gap)));
    }
    .dataview-result-list-li:hover {
      --border-color: var(--border-color-hover);
    }
    .dataview-result-list-li:hover .markdown-embed-title {
      opacity: 0;
    }
  }
}
/* Remove code bellow in case of performance issues */
@scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) {
  .dataview-result-list-root-ul .markdown-preview-view:hover,
  .dataview-result-list-root-ul .markdown-embed-content:hover {
    outline: none;
  }
}
@media (hover: hover) {
  @scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) {
    .dataview-result-list-root-ul:hover > :not(:hover) {
      filter: saturate(0.2);
    }
    .dataview-result-list-root-ul:hover > :not(:hover), .dataview-result-list-root-ul:hover > :not(:hover) .markdown-preview-view {
      color: var(--text-faint);
    }
    .dataview-result-list-root-ul > *:hover ~ * {
      z-index: 0;
    }
    .dataview-result-list-root-ul:hover {
      z-index: 1;
    }
  }
}
/* Fixes for themes */
/* Minimal */ /*
@scope (.dataview-cards-deck) to (.markdown-embed .markdown-embed) {
    ul.dataview-result-list-root-ul .markdown-embed {
        padding: 0;
    }
}/**/
