/* GPLv3 license
FAS - Callout Cards deck
Author: ElsaTam (Kapirklaa in Discord)
*/
.callout[data-callout=cards-deck] {
  --callout-icon: lucide-layers;
  --deck-border-width: 1px;
  --callout-border-width: var(--deck-border-width);
  --border-color-hover: rgb(var(--callout-color));
  --p-spacing: 0;
  --card-gap: 30px;
  --card-width: 70px;
  --card-height: 100px;
}

.callout[data-callout=cards-deck] .callout-content {
  overflow: visible;
}

.callout[data-callout=cards-deck] .callout-content > p {
  padding-bottom: var(--padding-bottom);
  padding-top: var(--padding-top);
  padding-left: var(--padding-left);
  padding-right: var(--padding-right);
  --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))
  );
}
.callout[data-callout=cards-deck] .callout-content > p > * {
  width: var(--card-gap);
  transition: transform 0.5s ease-in-out;
  transform: translateX(var(--card-base-translation));
  transform-origin: right;
}
.callout[data-callout=cards-deck] .callout-content > p a {
  font-size: 0;
}
.callout[data-callout=cards-deck] .callout-content > p > span,
.callout[data-callout=cards-deck] .callout-content > p > a > span {
  transition: transform 0.5s ease-in-out, filter 0.2s linear;
  height: var(--card-height);
  vertical-align: middle;
}
.callout[data-callout=cards-deck] .callout-content > p img {
  border-radius: var(--card-radius);
  border: 1px solid var(--border-color);
  box-shadow: var(--card-shadow-offset-x) var(--card-shadow-offset-y) var(--card-shadow-blur) rgba(0, 0, 0, var(--card-shadow-opacity));
  max-width: var(--card-width);
  height: var(--card-height);
  object-fit: cover;
  object-position: center center;
}

@media (hover: hover) {
  .callout[data-callout=cards-deck] .callout-content > p > *:hover {
    transform: translateX(var(--card-base-translation)) scale(var(--card-scale-hover));
  }
  .callout[data-callout=cards-deck] .callout-content > p > *:hover ~ * {
    transform: translateX(var(--card-base-translation)) translateX(calc(var(--card-width) - var(--card-gap)));
  }
}
body:not(.is-ios) .callout[data-callout=cards-deck] .callout-content > p::-webkit-scrollbar {
  width: var(--deck-scrollbar-width);
  height: var(--deck-scrollbar-width);
}

/* Remove code bellow in case of performance issues */
.callout[data-callout=cards-deck] .callout-content > p:hover > :not(:hover) {
  filter: saturate(0.2);
}
.callout[data-callout=cards-deck] .callout-content > p:hover > :not(:hover), .callout[data-callout=cards-deck] .callout-content > p:hover > :not(:hover) .markdown-preview-view {
  color: var(--text-faint);
}
.callout[data-callout=cards-deck] .callout-content > p > *:hover ~ * {
  z-index: 0;
}
.callout[data-callout=cards-deck] .callout-content > p:hover {
  z-index: 1;
}

@media (hover: hover) {
  .callout[data-callout=cards-deck] .callout-content > p > span > img:hover,
  .callout[data-callout=cards-deck] .callout-content > p > a > span > img:hover {
    --border-color: var(--border-color-hover);
  }
}
/* Fixes for themes */
/* Minimal */ /*
.callout[data-callout=cards-deck] {
    --image-muted: 1;
}
.markdown-preview-view.is-readable-line-width .markdown-preview-sizer .callout[data-callout=cards-deck] img,
.markdown-source-view.mod-cm6.is-readable-line-width .cm-contentContainer.cm-contentContainer > .cm-content .callout[data-callout=cards-deck] img {
    max-width: unset;
}/**/
