@use 'iro-sass/src/index' as iro;
@use '../functions' as fn;

@use 'action-button';

@include iro.props-namespace('lightbox') {
    @include iro.props-store((
        --dims: (
            --pad-x:   fn.global-dim(--size --150),
            --pad-y:   fn.global-dim(--size --150),
            --spacing: fn.global-dim(--size --200),
            --thumbnail: (
                --size:     fn.global-dim(--size --800),
                --spacing:  fn.global-dim(--size --100),
                --selected: 2px, //fn.global-dim(--border --medium),
            ),
            --button: (
                --font-size: fn.global-dim(--font-size --200),
            ),
            --nav-btn: (
                --width:  fn.global-dim(--size --3800),
                --height: fn.global-dim(--size --3800),
            ),
        ),
    ), 'dims');

    @include iro.props-store((
        --dims: (
            --thumbnail: (
                --size: fn.global-dim(--size --600),
            ),
            --nav-btn: (
                --width:  fn.global-dim(--size --2500),
                --height: fn.global-dim(--size --2500),
            ),
        ),
    ), 'md');

    @include iro.props-store((
        --colors: (
            --thumbnail: (
                --selected: fn.global-color(--fg-lo),
            ),
        ),
    ), 'colors');

    @include iro.bem-object(iro.props-namespace()) {
        display:               grid;
        grid-template-rows:    auto minmax(0, 1fr) auto;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:   'header close' 'content content' 'footer footer';
        gap:                   fn.dim(--spacing);
        position:              relative;
        height:                100%;

        @include iro.bem-elem('footer') {
            grid-area: footer;
            display:   flex;
            gap:       fn.dim(--thumbnail --spacing);
            padding:   fn.dim(--thumbnail --selected);
            overflow:  auto;
        }

        @include iro.bem-elem('header') {
            grid-area:     header;
            overflow:      hidden;
            text-overflow: ellipsis;
            white-space:   nowrap;
        }

        @include iro.bem-elem('img') {
            box-sizing: border-box;
            grid-area:  content;
            max-width:  100%;
            max-height: 100%;
            margin:     auto;
            padding:    0 calc(fn.dim(--button --font-size) + 2 * fn.foreign-dim(--action-button, --pad-x) + 2px);
        }

        @include iro.bem-elem('thumbnail') {
            opacity: .75;

            &:hover {
                opacity: 1;
            }

            @include iro.bem-is('selected') {
                opacity:    1;
                box-shadow: 0 0 0 fn.dim(--thumbnail --selected) fn.color(--thumbnail --selected);
            }
        }

        @include iro.bem-elem('thumbnail-img') {
            display:         block;
            width:           fn.dim(--thumbnail --size);
            height:          fn.dim(--thumbnail --size);
            object-fit:      cover;
            object-position: center center;
        }

        @include iro.bem-elem('close-btn') {
            grid-area: close;
            font-size: fn.dim(--button --font-size);
        }

        @include iro.bem-elem('prev-btn', 'next-btn') {
            position:  absolute;
            top:       50%;
            overflow:  visible;
            transform: translate(0, -50%);
            font-size: fn.dim(--button --font-size);

            &::after {
                content:   '';
                display:   block;
                position:  absolute;
                z-index:   -1;
                top:       50%;
                left:      50%;
                width:     fn.dim(--nav-btn --width);
                height:    fn.dim(--nav-btn --height);
                transform: translate(-50%, -50%);
            }
        }

        @include iro.bem-elem('prev-btn') {
            left: 0;
        }

        @include iro.bem-elem('next-btn') {
            right: 0;
        }
    }
}