/* MIT License | Copyright (c) Stephan Ango (@kepano) 

Cards snippet for Obsidian

author: @kepano
version: 3.0.1

Support my work:
https://github.com/sponsors/kepano

*/

body {
  --cards-min-width: 160px;
  --cards-max-width: 1fr;
  --cards-mobile-width: 120px;
  --cards-image-height: 400px;
  --cards-image-fit: contain;
  --cards-background: transparent;
  --cards-background-hover: transparent;
  --cards-padding: 4px;
  --cards-aspect-ratio: auto;
  --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width)));
}

@media (max-width: 400pt) {
  body {
    --cards-min-width: var(--cards-mobile-width);
  }
}

.cards.table-100 table.dataview tbody,
.table-100 .cards table.dataview tbody {
  padding: 0 8px;
}

.cards {
  table.dataview.table-view-table {
    tbody {
      clear: both;
      display: grid;
      grid-template-columns: var(--cards-columns);
      grid-column-gap: 8px;
      grid-row-gap: 8px;
      background-color: transparent;
    }
    > tbody > tr {
      background-color: var(--cards-background);
      border: var(--table-border-width) solid var(--background-modifier-border);
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: var(--cards-padding);
      border-radius: var(--radius-s);
      overflow: hidden;
      transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
      max-width: var(--cards-max-width);
      height: auto;

      &:hover {
        background-color: var(--cards-background-hover);
      }
    }

    tbody > tr > td {
      text-wrap: wrap;

      &:first-child {
        font-weight: calc(var(--font-weight) + var(--bold-modifier));
      }
      &:not(:first-child) {
        font-size: var(--font-small);
        color: var(--text-muted);
      }

      /* Lists */
      > ul {
        width: 100%;
        margin: 0 auto !important;
      }
      img {
        aspect-ratio: var(--cards-aspect-ratio);
        width: 100%;
        object-fit: var(--cards-image-fit);
        max-height: var(--cards-image-height);
        background-color: var(--background-secondary);
        vertical-align: bottom;
      }
    }
  }
}

.markdown-source-view.mod-cm6.cards .dataview.table-view-table > tbody > tr > td,
.trim-cols .cards table.dataview tbody > tr > td {
  white-space: normal;
}

.links-int-on .cards table {
  --link-decoration: none;
}

/* ------------------- */
/* Sorting menu */

.cards.table-100 table.dataview thead > tr,
.table-100 .cards table.dataview thead > tr {
  right: 8px;
}
.table-100 .cards table.dataview thead:before,
.cards.table-100 table.dataview thead:before {
  margin-right: 8px;
}
.cards {
  table.dataview {
    thead {
      user-select: none;
      width: 160px;
      height: 24px;
      float: right;
      position: relative;
    }
    thead:after,
    thead:before {
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      width: var(--icon-size);
      height: var(--icon-size);
    }
    thead:before {
      background-color: var(--text-faint);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 16px;
      -webkit-mask-position: center center;
      -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><path fill="currentColor" d="M49.792 33.125l-5.892 5.892L33.333 28.45V83.333H25V28.45L14.438 39.017L8.542 33.125L29.167 12.5l20.625 20.625zm41.667 33.75L70.833 87.5l-20.625 -20.625l5.892 -5.892l10.571 10.567L66.667 16.667h8.333v54.883l10.567 -10.567l5.892 5.892z"></path></svg>');
    }
    thead > tr {
      transition: var(--anim-duration-moderate) var(--anim-motion-baseline);
      position: absolute;
      z-index: 1;
      border: 1px solid var(--background-modifier-border-hover);
      background-color: var(--background-secondary);
      box-shadow: var(--shadow-s);
      padding: 4px;
      border-radius: var(--radius-s);
      flex-direction: column;
      margin-top: 24px;
      width: 100%;
    }
    thead:not(:hover) > tr {
      opacity: 0;
      filter: blur(4px);
      transform: translateY(-8px);
      pointer-events: none;
    }
    thead:hover > tr {
      display: flex;
    }
    thead > tr > th {
      display: block;
      padding: 6px 8px;
      border-radius: var(--radius-s);
      font-weight: var(--font-normal);
      color: var(--text-normal);
      font-size: var(--font-ui-small);
    }
  }
}

/* ------------------- */
/* Card lists */

.list-cards.markdown-preview-view {
  .list-bullet,
  .list-collapse-indicator,
  &.markdown-rendered.show-indentation-guide li > ul::before {
    display: none;
  }
  div > ul {
    display: grid;
    gap: 8px;
    grid-template-columns: var(--cards-columns);
    padding: 0;
    line-height: var(--line-height-tight);

    > li.task-list-item > .task-list-item-checkbox {
      margin-inline-start: 4px;
    }

    > li {
      background-color: var(--cards-background);
      border-radius: var(--radius-s);
      border: var(--table-border-width) solid var(--background-modifier-border);
      overflow: hidden;
      padding: 8px;
      margin-inline-start: 0;
      transition: var(--anim-duration-moderate) var(--anim-motion-baseline);

      &:hover {
        background-color: var(--cards-background-hover);
      }
    }
    .image-embed {
      padding: 0;
      display: block;

      img {
        aspect-ratio: var(--cards-aspect-ratio);
        object-fit: var(--cards-image-fit);
        max-height: var(--cards-image-height);
        background-color: var(--background-secondary);
        vertical-align: bottom;
      }
    }
  }
  div > ul > li > a {
    --link-decoration: none;
    --link-external-decoration: none;
    font-weight: calc(var(--font-weight) + var(--bold-modifier));
  }
  div ul ul {
    display: block;
    width: 100%;
    color: var(--text-muted);
    font-size: var(--font-smallest);

    > li {
      display: block;
      margin-inline-start: 0;
    }
  }
}

/* ------------------- */
/* Helper classes */

.cards,
.list-cards {
  &.cards-16-9 {
    --cards-aspect-ratio: 16/9;
  }
  &.cards-1-1 {
    --cards-aspect-ratio: 1/1;
  }
  &.cards-2-1 {
    --cards-aspect-ratio: 2/1;
  }
  &.cards-2-3 {
    --cards-aspect-ratio: 2/3;
  }
  &.cards-cols-1 {
    --cards-columns: repeat(1, minmax(0, 1fr));
  }
  &.cards-cols-2 {
    --cards-columns: repeat(2, minmax(0, 1fr));
  }
  &.cards-cover {
    --cards-image-fit: cover;
    /* Images */
    tbody > tr > td:first-child {
      padding: 0 !important;
      background-color: var(--background-secondary);
      display: block;
      margin: calc(var(--cards-padding) * -1) calc(var(--cards-padding) * -1) 0;
      width: calc(100% + calc(var(--cards-padding) * 2));
      img {
        border-radius: 0;
      }
    }
  }
  &.cards-align-bottom table.dataview tbody > tr > td:last-child {
    margin-top: auto;
  }
}

@media (max-width: 400pt) {
  .cards table.dataview tbody > tr > td:not(:first-child) {
    font-size: 80%;
  }
}

@media (min-width: 400pt) {
  .cards-cols-3 {
    --cards-columns: repeat(3, minmax(0, 1fr));
  }
  .cards-cols-4 {
    --cards-columns: repeat(4, minmax(0, 1fr));
  }
  .cards-cols-5 {
    --cards-columns: repeat(5, minmax(0, 1fr));
  }
  .cards-cols-6 {
    --cards-columns: repeat(6, minmax(0, 1fr));
  }
  .cards-cols-7 {
    --cards-columns: repeat(7, minmax(0, 1fr));
  }
  .cards-cols-8 {
    --cards-columns: repeat(8, minmax(0, 1fr));
  }
}
