@use "../../mixins/cards-deck";

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

    @include cards-deck.cards-deck;

    a {
        font-size: 0;
    }

    > span,
    > a > span {
        @include cards-deck.card;
    }

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

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

@media (hover: hover) {
    .callout[data-callout="cards-deck"] .callout-content > p {
        > span > img:hover,
        > a > span > img:hover {
            @include cards-deck.card-hover;
        }
    }
}
