@use '../function' as *;
@use '../settings';
@use '../mixin';

@mixin roolith-collage() {
    .collage {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--r-collage-item-default-width), 1fr));
        grid-auto-rows: var(--r-collage-item-default-height);
        grid-gap: var(--r-collage-item-default-gap);
        grid-auto-flow: dense;
    }

    .collage-small-gap {
        grid-gap: var(--r-collage-item-small-gap);
    }

    .collage-large-gap {
        grid-gap: var(--r-collage-item-large-gap);
    }

    .collage-no-gap {
        grid-gap: 0;
    }

    .collage-item {
        overflow: hidden;
    }

    .collage-item-big {
        grid-row: span 2;
        grid-column: span 2;
    }

    .collage-item-wide {
        grid-column: span 2;
    }

    .collage-item-tall {
        grid-row: span 2;
    }

    .collage-fig {
        width: 100%;
        height: 100%;
        position: relative;

        &:hover .collage-fig-caption {
            opacity: 1;
        }
    }

    .collage-fig-caption {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: rem(20);
        background: rgba(var(--r-collage-caption-background), 0.7);
        color: var(--r-collage-caption-color);
        font-size: rem(12);
        line-height: rem(18);
        opacity: 0;
        @include mixin.transition('opacity');

        &.visible {
            background: linear-gradient(
                to bottom,
                rgba(var(--r-collage-caption-background), 0) 50%,
                rgba(var(--r-collage-caption-background), 0.8) 100%
            );
            opacity: 1;
            align-items: flex-end;
        }
    }
}