@keyframes move-right-in{
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}
@keyframes move-right-out{
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}
@keyframes move-left-in{
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}
@keyframes move-left-out{
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
    }
}
@keyframes vertical-move-right-in{
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0%);
    }
}
@keyframes vertical-move-right-out{
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-100%);
    }
}
@keyframes vertical-move-left-in{
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0%);
    }
}
@keyframes vertical-move-left-out{
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(100%);
    }
}

mor-carousel{
    display: block;
    position: relative;
    box-sizing: border-box;

    .carousel-wrap{
        display: block;
        width: 100%;
        overflow: hidden;
        position: relative;

        > .carousel-list{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

        > .carousel-list > div,
        > .placeholder > div{
            width: 100%;
            background: @colorComponentItemBg;
            font-size: 0;
            position: absolute;
            top: 0;
            left: 0;

            > img{
                padding: 0;
                border: none !important;
                margin: 0;
            }
        }

        .placeholder{
            position: relative;
            z-index: 0;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;

            > div{
                position: relative;
            }
        }
    }

    .control{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 2;
        pointer-events: none;

        > .up-btn,
        > .down-btn,
        > .left-btn,
        > .right-btn{
            position: absolute;
            opacity: 0.5;
            pointer-events: auto;

            &:hover{
                opacity: 0.75;
            }
        }

        > .up-btn,
        > .down-btn{
            left: 50%;
            transform: translateX(-50%);
        }

        > .left-btn,
        > .right-btn{
            top: 50%;
            transform: translateY(-50%);
        }

        > .left-btn{
            left: 10px;
        }

        > .right-btn{
            right: 10px;
        }

        > .up-btn{
            top: 6px;
        }

        > .down-btn{
            bottom: 6px;
        }

        .indicator{
            position: absolute;
            bottom: 10px;
            height: 18px;
            padding: 0;
            left: 50%;
            transform: translateX(-50%);
            margin: 0;
            list-style: none;
            pointer-events: auto;

            li{
                display: inline-block;
                margin: 0;
                vertical-align: top;
                cursor: pointer;
                box-sizing: content-box;

                &.current{
                    cursor: default;
                }
            }
        }
    }

    &.direction-vertical{
        .control{
            .indicator{
                left: auto;
                right: 10px;
                transform: translateY(-50%);
                top: 50%;
                bottom: auto;
                height: auto;

                li{
                    display: block;
                }
            }
        }
    }

    &.indicator-pos-outside{
        padding-bottom: 20px;

        .control{
            .indicator{
                bottom: 1px;
            }
        }

        &.direction-vertical{
            padding-bottom: 0;
            padding-right: 20px;

            .control{
                .indicator{
                    bottom: auto;
                    right: 1px;
                }
            }
        }
    }

    &.indicator-type-dot{
        .control{
            .indicator{
                li{
                    height: 10px;
                    width: auto;
                    padding: 4px 3px;

                    > i{
                        width: 10px;
                        height: 10px;
                        border-radius: 10px;
                        background: darken(@colorComponentItemBorder, 10%);
                        display: inline-block;
                        vertical-align: top;
                        transition: 0.2s;
                    }

                    &.current{
                        > i{
                            width: 20px;
                            height: 10px;
                            background: @colorTheme;
                        }
                    }
                }
            }
        }

        &.direction-vertical{
            .control{
                .indicator{
                    li{
                        height: 10px;
                        width: 10px;
                        padding: 3px 4px;
                        transition: height 0.2s;

                        &.current{
                            height: 20px;

                            > i{
                                width: 10px;
                                height: 20px;
                                background: @colorTheme;
                            }
                        }
                    }
                }
            }
        }
    }

    &.indicator-type-line{
        .control{
            .indicator{
                li{
                    height: 4px;
                    padding: 7px 3px;

                    i{
                        width: 10px;
                        height: 4px;
                        border-radius: 3px;
                        background: darken(@colorComponentItemBorder, 10%);
                        display: inline-block;
                        vertical-align: top;
                        transition: 0.2s;
                    }

                    &.current{
                        > i{
                            width: 20px;
                            background: @colorTheme;
                        }
                    }
                }
            }
        }
    }

    &.toggle-type-none{
        .carousel-list > div{
            display: none;

            &.current{
                display: block;
            }
        }
    }

    &.toggle-type-fade{
        .carousel-list > div{
            display: block;
            opacity: 0;
            transition: opacity 0.36s;

            &.current{
                opacity: 1;
            }
        }
    }

    &.toggle-type-move{
        .carousel-list > div{
            transform: translateX(100%);

            &.next-old{
                animation: move-right-out 0.36s;
                animation-fill-mode: forwards;
            }

            &.prev-old{
                animation: move-left-out 0.36s;
                animation-fill-mode: forwards;
            }

            &.next-new{
                animation: move-right-in 0.36s;
                animation-fill-mode: forwards;
            }

            &.prev-new{
                animation: move-left-in 0.36s;
                animation-fill-mode: forwards;
            }

            &.current{
                transform: translateX(0%);
            }
        }

        &.direction-vertical{
            .carousel-list > div{
                transform: translateX(100%);

                &.next-old{
                    animation: vertical-move-right-out 0.36s;
                    animation-fill-mode: forwards;
                }

                &.prev-old{
                    animation: vertical-move-left-out 0.36s;
                    animation-fill-mode: forwards;
                }

                &.next-new{
                    animation: vertical-move-right-in 0.36s;
                    animation-fill-mode: forwards;
                }

                &.prev-new{
                    animation: vertical-move-left-in 0.36s;
                    animation-fill-mode: forwards;
                }

                &.current{
                    transform: translateX(0%);
                }
            }
        }
    }

    // default status
    &{}
}