@charset "utf-8";
@import (optional, reference) "var.less";
/*Swipe*/
._swipe-prev,
._swipe-next {
    font-family: 'ax-iconfont';
    color: var(--_c-prim);
    border-radius: 100%;
    box-sizing: border-box;
    font-size: var(--_sz-brief);
    opacity: .8;
    width: var(--_sz-input);
    height: var(--_sz-input);
    cursor: pointer;
    user-select: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    .v3-trans-all(var(--_dur-1));
    &[disabled] {
        color: var(--_c-text);
        opacity: .2;
        pointer-events: none;
    }
    &[filled] {
        color: fade(#fff, 80);
        background-color: var(--_c-prim);
    }
    &[filled][disabled] {
        background-color: var(--_c-text);
    }
    &:not([disabled]):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 {
        font-size: var(--_sz-ignore);
        width: var(--_sz-brief);
        height: var(--_sz-brief);
    }
}
._swipe-pgn {
    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: 1.0rem;
            height: 1.0rem;
            margin: 0 var(--_sz-min);
            display: inline-block;
            border-radius: 100%;
            background: rgba(0, 0, 0, .5);
            opacity: .2;
            .v3-trans-all(var(--_dur-1));
        }
        [active] {
            opacity: 1;
            background: var(--_c-prim);
        }
        >*:not([active]):hover {
            opacity: .4;
        }
    }
    &[type="thumb"] {
        >* {
            height: var(--_sz-input);
            width: calc(var(--_sz-input) *2);
            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"] {
        justify-content: flex-end;
        >* {
            width: var(--_sz-list);
            height: var(--_sz-list);
            margin-left: var(--_sz-min);
            line-height: var(--_sz-list);
            text-align: center;
            color: #fff;
            font-size: var(--_sz-ignore);
            display: inline-block;
            border-radius: var(--_r);
            background: rgba(0, 0, 0, .2);
            .v3-trans-all(var(--_dur-1));
        }
        [active] {
            background: var(--_c-prim);
        }
        >*:not([active]):hover {
            background: rgba(0, 0, 0, .5);
        }
    }
    &[type="text"] {
        font-size: var(--_sz-ignore);
        width: 100%;
        display: flex;
        >* {
            color: #fff;
            background: rgba(0, 0, 0, .2);
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 0;
            flex: auto;
        }
        [active] {
            background: var(--_c-prim);
        }
        >*:not([active]):hover {
            background: 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;
    }
    >._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;
            }
        }
    }
    &[display="grid"] {
        &[axis="x"]>._swipe-wrap {
            height: 100%;
        }
        &[axis="y"]>._swipe-wrap {
            width: 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 {
        display: inline-flex;
        width: auto;
        position: absolute;
        left: var(--_sz-font);
        top: var(--_sz-font);
        z-index: 10;
        svg {
            width: var(--_sz-body);
            path {
                stroke-width: var(--_sz-space);
            }
            path[track] {
                stroke: var(--_c-mask-8)
            }
        }
        &[state]:after {
            font-family: 'ax-iconfont';
            font-size: var(--_sz-ignore);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            opacity: .2;
            .v3-trans-all();
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }
        &[state="play"]:after {
            content: 'play';
        }
        &[state="pause"]:after {
            content: 'pause';
        }
        &:hover:after {
            opacity: 1;
            cursor: pointer;
        }
        &[state="play"]:hover:after {
            content: 'pause';
            color: var(--_c-error)
        }
        &[state="pause"]:hover:after {
            content: 'play';
            color: var(--_c-prim)
        }
    }
    >._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 {
            height: 100%;
        }
        &[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 {
            width: 100%;
        }
        >._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;
                }
            }
        }
    }
    &:hover {
        cursor: grab;
    }
    &[moving] {
        cursor: grabbing;
    }
    [unbound] {
        cursor: auto;
    }
}
