@charset "utf-8";
@import (optional, reference) "var.less";
/*Swipe*/
._swipe-prev,
._swipe-next {
    --_swipe-nav-c: var(--_c-prim);
    --_swipe-nav-bg: transparent;
    --_swipe-nav-o: 0.8;
    --_swipe-nav-h: var(--_sz-input);
    --_swipe-nav-fs: var(--_sz-brief);
    --_swipe-nav-r: 100%;
    --_swipe-nav-ff: var(--_ff-icon);
    font-family: var(--_swipe-nav-ff);
    color: var(--_swipe-nav-c);
    background-color: var(--_swipe-nav-bg);
    border-radius: var(--_swipe-nav-r);
    box-sizing: border-box;
    font-size: var(--_swipe-nav-fs);
    opacity: var(--_swipe-nav-o);
    height: var(--_swipe-nav-h);
    aspect-ratio: 1/1;
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    .v3-trans-all(var(--_dur-1));
    &[disabled] {
        --_swipe-nav-c: var(--_c-text);
        --_swipe-nav-o: .2;
    }
    &[filled] {
        --_swipe-nav-c: rgba(255, 255, 255, .8);
        --_swipe-nav-bg: var(--_c-prim);
    }
    &[filled][disabled] {
        --_swipe-nav-bg: var(--_c-text);
    }
    &:hover {
        opacity: 1;
    }
}
._swipe-nav {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    ._swipe-prev,
    ._swipe-next,
    ._swipe-pgn {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
    }
    ._swipe-prev,
    ._swipe-next {
        --_swipe-nav-fs: var(--_sz-ignore);
        --_swipe-nav-h: var(--_sz-brief);
    }
}
._swipe-pgn {
    --_swipe-pgn-c: var(--_c-stage);
    --_swipe-pgn-bg: rgba(0, 0, 0, .5);
    --_swipe-pgn-act: var(--_c-prim);
    --_swipe-pgn-o: 0.2;
    --_swipe-pgn-w: var(--_sz-root);
    --_swipe-pgn-h: var(--_sz-root);
    --_swipe-pgn-r: 100%;
    --_swipe-pgn-fs: var(--_sz-ignore);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transition: var(--_dur-3) opacity;
    user-select: none;
    >* {
        .v3-trans-all;
        object-fit: cover;
        cursor: pointer;
    }
    img {
        width: 100%;
        height: 100%;
        border-radius: inherit;
    }
    &[type='lamp'] {
        >* {
            width: var(--_swipe-pgn-w);
            height: var(--_swipe-pgn-h);
            margin: 0 var(--_sz-min);
            display: inline-block;
            border-radius: var(--_swipe-pgn-r);
            background: var(--_swipe-pgn-bg);
            opacity: var(--_swipe-pgn-o);
            .v3-trans-all(var(--_dur-1));
        }
        [active] {
            opacity: 1;
            background-color: var(--_swipe-pgn-act);
        }
        >*:not([active]):hover {
            opacity: .4;
        }
    }
    &[type="thumb"] {
        --_swipe-pgn-w: calc(var(--_sz-input) *2);
        --_swipe-pgn-h: var(--_sz-input);
        >* {
            width: var(--_swipe-pgn-w);
            height: var(--_swipe-pgn-h);
            border: 4px solid rgba(255, 255, 255, .5);
        }
        >[active] {
            border-color: var(--_c-prim);
        }
        >* img {
            width: 100%;
            height: 100%;
            border-radius: inherit;
            object-fit: cover;
        }
    }
    &[type="index"] {
        --_swipe-pgn-bg: rgba(0, 0, 0, .2);
        --_swipe-pgn-r: var(--_r);
        --_swipe-pgn-w: var(--_sz-list);
        --_swipe-pgn-h: var(--_sz-list);
        justify-content: flex-end;
        font-size: var(--_swipe-pgn-fs);
        >* {
            width: var(--_swipe-pgn-w);
            height: var(--_swipe-pgn-h);
            color: var(--_swipe-pgn-c);
            margin-left: var(--_sz-min);
            line-height: var(--_swipe-pgn-h);
            text-align: center;
            display: inline-block;
            border-radius: var(--_swipe-pgn-r);
            background-color: var(--_swipe-pgn-bg);
            .v3-trans-all(var(--_dur-1));
        }
        [active] {
            background-color: var(--_swipe-pgn-act);
        }
        >*:not([active]):hover {
            background-color: rgba(0, 0, 0, .5);
        }
    }
    &[type="text"] {
        --_swipe-pgn-bg: rgba(0, 0, 0, .2);
        --_swipe-pgn-h: auto;
        width: 100%;
        display: flex;
        font-size: var(--_swipe-pgn-fs);
        >* {
            width: 0;
            height: var(--_swipe-pgn-h);
            color: var(--_swipe-pgn-c);
            background-color: var(--_swipe-pgn-bg);
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: auto;
        }
        [active] {
            background-color: var(--_swipe-pgn-act);
        }
        >*:not([active]):hover {
            background-color: rgba(0, 0, 0, .5);
        }
    }
}
._swipe-tools {}
._swipe-total {}
._swipe {
    min-height: var(--_sz-body);
    min-width: var(--_sz-body);
    overflow: hidden;
    position: relative;
    .v3-trans-all();
    &[spinning] {
        pointer-events: none;
    }
    &[spinning] {
        .v3-loading-bg;
    }
    &:hover {
        cursor: grab;
        &:where(:has(>._swipe-wrap[gesture])) {
            cursor: grabbing;
        }
    }
    [unbound] {
        cursor: auto;
    }
    &._launched {
        .v3-loading-bg;
        >._swipe-wrap {
            opacity: 0;
        }
    }
    >._swipe-wrap {
        >* {
            position: relative;
            &[spinning] {
                .v3-loading-bg;
            }
            /* >.ax-cage {
                width: 100%;
                height: 100%;
                overflow: hidden;
            } */
            >._swipe {
                width: 100%;
                height: 100%;
            }
        }
        >[type="image"] {
            >img {
                max-width: 100%;
                max-height: 100%;
                object-fit: contain;
                border-radius: inherit;
            }
        }
        >* {
            >iframe {
                width: 100%;
                min-height: 40rem;
            }
        }
    }
    &:where([gridded][axis="y"]) {
        height: 100%;
    }
    >._swipe-pgn {
        width: 100%;
        position: absolute;
        left: 0;
        bottom: var(--_sz-font);
        z-index: 10;
        &[type="index"] {
            width: auto;
            left: auto;
            right: var(--_sz-font);
            bottom: var(--_sz-font);
        }
        &[type="text"] {
            left: 0;
            bottom: 0;
        }
    }
    >._swipe-prev,
    >._swipe-next {
        position: absolute;
        z-index: 11;
    }
    >._progress {
        width: auto;
        position: absolute;
        left: var(--_sz-font);
        top: var(--_sz-font);
        z-index: 10;
    }
    >._swipe-total {
        line-height: var(--_sz-input);
        &[placement] {
            position: absolute;
            z-index: 10;
        }
        &[placement="left-top"] {
            left: var(--_sz-font);
            top: 0;
        }
        &[placement="left-bottom"] {
            left: var(--_sz-font);
            bottom: 0;
        }
        &[placement="right-top"] {
            right: var(--_sz-font);
            top: 0;
        }
        &[placement="right-bottom"] {
            right: var(--_sz-font);
            bottom: 0;
        }
    }
    >._swipe-tools {
        position: absolute;
        top: calc((var(--_sz-input) - var(--_sz-list))/2);
        right: calc((var(--_sz-input) - var(--_sz-list))/2);
        z-index: 10;
        >* {
            min-width: var(--_sz-list);
            height: var(--_sz-list);
            margin-left: var(--_sz-space);
            display: inline-flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        >[inert] {
            opacity: .5;
        }
    }
    &[axis="x"] {
        >._swipe-wrap {
        }
        &[slides="auto"]>._swipe-wrap {
            white-space: nowrap;
        }
        >._swipe-prev,
        >._swipe-next {
            top: 50%;
            transform: translate(0, -50%);
        }
        >._swipe-prev:not([filled]) {
            left: 0;
        }
        >._swipe-next:not([filled]) {
            right: 0;
        }
        >._swipe-prev[filled] {
            left: var(--_sz-font);
        }
        >._swipe-next[filled] {
            right: var(--_sz-font);
        }
        >._swipe-pgn {
            &[type="lamp"],
            &[type="thumb"] {
                width: 100%;
            }
            &[type="lamp"]>*,
            &[type="thumb"]>* {
                margin: auto var(--_sz-min);
            }
        }
        >._swipe-nav {
            position: absolute;
            left: 50%;
            bottom: var(--_sz-font);
            transform: translate(-50%, 0);
            ._swipe-prev,
            ._swipe-next {
                margin: 0 .4rem;
            }
        }
    }
    &[axis="y"] {
        >._swipe-wrap {
        }
        >._swipe-prev,
        >._swipe-next {
            font-size: var(--_sz-ignore);
            width: var(--_sz-brief);
            height: var(--_sz-brief);
            right: 1rem;
        }
        >._swipe-prev {
            top: 1rem;
        }
        >._swipe-next {
            bottom: 1rem;
        }
        >._swipe-pgn {
            &[type="lamp"],
            &[type="thumb"] {
                width: auto;
                flex-flow: column;
                transform: translate(0, -50%);
                left: auto;
                bottom: auto;
                right: var(--_sz-font);
                top: 50%;
            }
            &[type="lamp"]>*,
            &[type="thumb"]>* {
                margin: var(--_sz-min) 0;
            }
        }
        >._swipe-nav {
            flex-flow: column;
            position: absolute;
            top: 50%;
            right: var(--_sz-font);
            transform: translate(-0, -50%);
            ._swipe-prev,
            ._swipe-next {
                margin: var(--_sz-min) 0;
            }
            ._swipe-pgn {
                &[type="lamp"],
                &[type="thumb"] {
                    flex-flow: column;
                }
                &[type="lamp"]>*,
                &[type="thumb"]>* {
                    margin: var(--_sz-min) 0;
                }
            }
        }
    }
}
