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

@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: 3px,
            ),
        ),
    ), 'dims');

    @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);
        min-height:            0;

        @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') {
            grid-area:    content;
            justify-self: center;
            max-width:    100%;
            max-height:   100%;
        }

        @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') {
            --icon-stroke-width: 2px;

            grid-area: close;
            font-size: fn.global-dim(--font-size --150);
        }
    }
}