//
// Variables
// --------------------------------------------------
$thumbnailmenu-gap: .5rem !default;
$thumbnailmenu-color: #ffffff !default;
$thumbnailmenu-bg: rgba($primary, .75) !default;

//
// CSS Variables
// --------------------------------------------------
:root {
    --thumbnailmenu-gap: #{$thumbnailmenu-gap};
    --thumbnailmenu-columns: 1;
    --thumbnailmenu-color: #{$thumbnailmenu-color};
    --thumbnailmenu-bg: #{$thumbnailmenu-bg};
}

//
// Component
//
.thumbnail-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--thumbnailmenu-gap);
}
.thumbnail-menu-item {
    width: calc((100% / var(--thumbnailmenu-columns)) - (var(--thumbnailmenu-gap) * (var(--thumbnailmenu-columns) - 1)) / var(--thumbnailmenu-columns));
}
.thumbnail-menu-link {
    display: block;
    overflow: hidden;
    position: relative;
    height: 100%;
}
.thumbnail-menu-link,
.thumbnail-menu-link:hover,
.thumbnail-menu-link:focus {
    color: var(--thumbnailmenu-color);
}
.thumbnail-menu-image {
    overflow: hidden;
    height: 100%;
    picture,
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
.thumbnail-menu-caption {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    background: var(--thumbnailmenu-bg);
}
.thumbnail-menu-caption-inner {
    padding: 1.5em;
    text-align: center;
    > *:first-child {
        margin-top: 0;
    }
    > *:last-child {
        margin-bottom: 0;
    }
}
.thumbnail-menu-caption-title {
    font-size: 1.25em;
    margin-bottom: .25em;
    font-weight: bold;
    opacity: 0;
}
.thumbnail-menu-caption-subtitle {
    line-height: 1.2em;
    opacity: 0;
}
.thumbnail-menu-link {
    .thumbnail-menu-caption {
        transition: opacity .25s ease-in-out;
    }
    .thumbnail-menu-image {
        picture,
        img {
            transition: filter .25s ease-in-out;
        }
    }
    .thumbnail-menu-caption-title,
    .thumbnail-menu-caption-subtitle {
        transition: opacity .25s ease-in-out;
        transition-delay: .25s;
    }
    &:hover,
    &:focus {
        .thumbnail-menu-caption {
            opacity: 1;
        }
        .thumbnail-menu-caption-title {
            opacity: 1;
        }
        .thumbnail-menu-caption-subtitle {
            opacity: 1;
        }
        .thumbnail-menu-image {
            picture,
            img {
                filter: grayscale(1);
            }
        }
    }
}
.thumbnail-menu-align-left {
    justify-content: flex-start;
}
.thumbnail-menu-align-center {
    justify-content: center;
}
.thumbnail-menu-align-right {
    justify-content: flex-end;
}
.thumbnail-menu-columns-2 {
    @include media-breakpoint-up('sm') {
        --thumbnailmenu-columns: 2;
    }
}
.thumbnail-menu-columns-3 {
    @include media-breakpoint-up('md') {
        --thumbnailmenu-columns: 3;
    }
}
.thumbnail-menu-columns-4 {
    @include media-breakpoint-up('sm') {
        --thumbnailmenu-columns: 2;
    }
    @include media-breakpoint-up('xl') {
        --thumbnailmenu-columns: 4;
    }
}