@carousel-prefix-cls: ~"@{css-prefix}carousel";
@carousel-item-prefix-cls: ~"@{css-prefix}carousel-item";

.@{carousel-prefix-cls} {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;

    &-track, &-list {
        transform: translate3d(0, 0, 0);
    }

    &-list {
        position: relative;
        display: block;
        overflow: hidden;

        margin: 0;
        padding: 0;
    }

    &-track {
        position: relative;
        top: 0;
        left: 0;
        display: block;

        overflow: hidden;

        z-index: 1;
    }

    &-item {
        float: left;
        height: 100%;
        min-height: 1px;
        display: block;
    }

    &-arrow {
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100%;

        text-align: center;

        & > * {
            display: inline-block;
            vertical-align: middle;
        }

        .placeholder{
            overflow: hidden;
            width: 0;
            min-height: inherit;
            height: inherit;
        }

        z-index: 3;

        &.left {
            left: 0;
        }
        &.right {
            right: 0;
        }

        width: 10%;

        cursor: pointer;

        &:hover {
            background: fade(#000, 30%);
        }
    }
}