@forward "../../../shared/workleaves";
@use "../../../mixins/cards-deck";

.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;

        @include cards-deck.cards-deck;
    }

    .dataview-result-list-li {
        @include cards-deck.card;
    }

    .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 {
        @include cards-deck.card-shadow;
        @include cards-deck.card-radius;
        @include cards-deck.card-border;
        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 {
        @include cards-deck.card-shadow;
        @include cards-deck.card-radius;
        @include cards-deck.card-border;
        outline: 4px solid var(--workleaves-background);
        width: var(--card-width);
        height: var(--card-height);
        display: block;

        > img {
            @include cards-deck.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 {
            @include cards-deck.cards-deck-hover;
        }

        .dataview-result-list-li:hover {
            @include cards-deck.card-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 {
            @include cards-deck.card-not-hover;
        }
    }
}
