/*
* created by zhongzheng at 2019.11.07
*/
@import "../style/themes/default.less";
@import "../style/mixins/index.less";

@carousel-prefix-cls: ~"@{sino-prefix}-carousel";


.@{carousel-prefix-cls} {

    position: relative;
    overflow: hidden;
    user-select: none;

    &-track {
        height: 100%;
    }

    &-item {
        float: left;
        height: 100%;
        overflow: hidden;
    }

    &-indicators {
        position: absolute;
        bottom: @carousel-indicator-margin;
        left: 50%;
        display: flex;
        transform: translateX(-50%);

        &-vertical {
            top: 50%;
            bottom: auto;
            left: @carousel-indicator-margin;
            flex-direction: column;
            transform: translateY(-50%);

            .@{carousel-prefix-cls}-indicator:not(:last-child) {
                margin-bottom: @carousel-indicator-size;
            }
        }
    }

    &-indicator {
        width: @carousel-indicator-size;
        height: @carousel-indicator-size;
        background-color: @carousel-indicator-bg;
        border-radius: 100%;
        opacity: @carousel-indicator-opacity;
        transition: opacity .2s;

        &:not(:last-child) {
            margin-right: @carousel-indicator-size;
        }

        &-active {
            background-color: @carousel-indicator-active-bg;
            opacity: @carousel-indicator-active-opacity;
        }
    }
}
