// CSS Custom Properties (--ngjs variables) used in this file:
// --ngjs-figure-radius: Border radius for figure elements (default: $defaultBorderRadius)
// --ngjs-link-radius: Border radius for link buttons/anchors (default: 4px)
// --ngjs-focus-outline: Focus outline style (default: 1px solid orange)
// --ngjs-marker-border-color: Border color for selection marker (default: currentColor)
// --ngjs-marker-check-color: Background color for marker check (default: transparent)
// --ngjs-selected-marker-color: Color for selected marker (default: orange)
// --ngjs-selected-marker-check: Color for selected marker check (default: black)
// --ngjs-link-bg: Background color for non-link titles (default: rgb(0, 0, 0, 0.7))
// --ngjs-link-color: Text color for non-link titles (default: white)
// --ngjs-link-hover-bg: Background color for link hover state (default: rgb(0, 0, 0))
// --ngjs-link-hover-color: Text color for link hover state (default: white)

@use 'figure';

.pswp {
    z-index: 9999999;

    .pswp__caption__center {
        text-align: center;
    }
}

.natural-gallery-js {
    position: relative;

    *,
    *::after,
    *::before {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }

    iframe {
        position: absolute;
        width: 100%;
        height: 0;
        top: 0;
        left: 0;
        background-color: transparent;
        border: 0;
    }

    &.scrolling {
        &,
        & * {
            pointer-events: none !important;
        }
    }

    /**
    * Columns
    * ===================================================
    */

    .column {
        float: left;
    }

    /**
    * Pictures
    * ===================================================
    */

    &.format-square,
    &.format-natural {
        .natural-gallery-body {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
    }

    &.format-masonry {
        .natural-gallery-body {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;

            .column {
                display: flex;
                flex-direction: column;
            }
        }
    }

    .natural-gallery-body {
        padding: 0;
        margin: 0;

        .figure {
            background-color: var(--ngjs-figure-bg, rgba(0, 137, 224, 0.1));
        }

        &.resizing {
            .figure,
            .column {
                transition: none;
                opacity: 0;
            }
        }
    }

    /**
    * Next
    * ===================================================
    */
    .natural-gallery-next {
        display: block;
        margin: 10px auto;
        text-align: center;
        height: 50px;
        padding-block: 10px;
        background: none;
        border: none;
        width: 100%;
        cursor: pointer;
        border-radius: var(--ngjs-figure-radius, figure.$defaultBorderRadius);

        svg {
            cursor: pointer;
            font-size: 16px;
            height: 30px;
            color: var(--ngjs-next-color, rgb(0, 137, 224));
            fill: currentColor;
        }

        &:hover {
            background-color: var(--ngjs-next-hover-bg, rgba(0, 0, 0, 0.2));
        }

        &::after {
            content: '';
            display: block;
            clear: both;
        }
    }
}
