@use "sass:meta";

// Name:            Lightbox
// Description:     Component to create an lightbox image gallery
//
// Component:       `uk-lightbox`
//
// Sub-objects:     `uk-lightbox-page`
//                  `uk-lightbox-items`
//                  `uk-lightbox-items-fit`
//                  `uk-lightbox-thumbnav`
//                  `uk-lightbox-thumbnav-vertical`
//                  `uk-lightbox-dotnav`
//                  `uk-lightbox-caption`
//                  `uk-lightbox-counter`
//                  `uk-lightbox-iframe`
//                  `uk-lightbox-zoom`
//
// States:          `uk-open`
//
// ========================================================================


// Variables
// ========================================================================







/* ========================================================================
   Component: Lightbox
 ========================================================================== */

/*
 * 1. Hide by default
 * 2. Set position
 * 3. Allow scrolling for the modal dialog
 * 4. Horizontal padding
 * 5. Mask the background page
 * 6. Fade-in transition
 * 7. Prevent cancellation of pointer events while dragging
 */

.uk-lightbox {
    --uk-inverse: #{$lightbox-color-mode};
    /* 1 */
    display: none;
    /* 2 */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: $lightbox-z-index;
    /* 5 */
    background: $lightbox-background;
    /* 6 */
    opacity: 0;
    transition: opacity 0.15s linear;
    /* 7 */
    touch-action: pinch-zoom;
    @if(meta.mixin-exists(hook-lightbox)) {@include hook-lightbox();}
}

/*
 * Open
 * 1. Center child
 * 2. Fade-in
 */

.uk-lightbox.uk-open {
    display: block;
    /* 2 */
    opacity: 1;
}

/*
 * Focus
 */

.uk-lightbox :focus-visible { outline-color: $lightbox-focus-outline; }


/* Page
 ========================================================================== */

/*
 * Prevent scrollbars
 */

.uk-lightbox-page { overflow: hidden; }


/* Items
 ========================================================================== */

/*
 * Reset list
 */

.uk-lightbox-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * 1. Center child within the viewport
 * 2. Not visible by default
 * 3. Optimize animation
 * 4. Responsiveness
 *    Using `vh` for `max-height` to fix image proportions after resize in Safari and Opera
 */

.uk-lightbox-items > * {
    /* 1 */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 2 */
    display: none;
    justify-content: center;
    align-items: flex-start;
    /* 3 */
    will-change: transform, opacity;
    /* 4 */
    overflow: auto;
    @if(meta.mixin-exists(hook-lightbox-item)) {@include hook-lightbox-item();}
}

/* 2 */
.uk-lightbox-items > .uk-active { display: flex; }

.uk-lightbox-items-fit > * { align-items: center; }

/* 4 */
.uk-lightbox-items-fit > * > * {
    max-width: $lightbox-item-max-width;
    max-height: $lightbox-item-max-height;
}

.uk-lightbox-items-fit > * > :not(iframe) { object-fit: contain; }

/* Zoom Cursor */
.uk-lightbox-items.uk-lightbox-items-fit .uk-lightbox-zoom:hover { cursor: zoom-in; }
.uk-lightbox-items:not(.uk-lightbox-items-fit) .uk-lightbox-zoom:hover { cursor: zoom-out; }


/* Navs
 ========================================================================== */

.uk-lightbox-thumbnav-vertical :where(img, video) { max-width: $lightbox-thumbnav-vertical-width; }
.uk-lightbox-thumbnav:not(.uk-lightbox-thumbnav-vertical) :where(img, video) { max-height: $lightbox-thumbnav-height; }

.uk-lightbox-thumbnav:empty,
.uk-lightbox-dotnav:empty { display: none; }


/* Caption
 ========================================================================== */

.uk-lightbox-caption:empty { display: none; }

.uk-lightbox-caption {
    padding: $lightbox-caption-padding-vertical $lightbox-caption-padding-horizontal;
    background: $lightbox-caption-background;
    color: $lightbox-caption-color;
    @if(meta.mixin-exists(hook-lightbox-caption)) {@include hook-lightbox-caption();}
}

.uk-lightbox-caption > * { color: $lightbox-caption-color; }


/* Counter
 ========================================================================== */

.uk-lightbox-counter:empty { display: none; }


/* Iframe
 ========================================================================== */

.uk-lightbox-iframe {
    width: 80%;
    height: 80%;
}


// Hooks
// ========================================================================

@if(meta.mixin-exists(hook-lightbox-misc)) {@include hook-lightbox-misc();}

// @mixin hook-lightbox(){}
// @mixin hook-lightbox-item(){}
// @mixin hook-lightbox-caption(){}
// @mixin hook-lightbox-misc(){}