.taro-swiper {
    &__dots {
        position: absolute;
        font-size: 0;
        z-index: 1;

        &-horizontal {
            bottom: 8px;
            left: 50%;
            text-align: center;
            white-space: nowrap;
            transform: translate(-50%);

            .taro-swiper__dot {
                margin-right: 8px;
            }

            .taro-swiper__dot:last-child {
                margin-right: 0;
            }
        }

        &-vertical {
            top: 50%;
            right: 8px;
            text-align: right;
            transform: translateY(-50%);

            .taro-swiper__dot {
                display: block;
                margin-bottom: 9px;
            }

            .taro-swiper__dot:last-child {
                margin-bottom: 0;
            }
        }
    }

    &__dot {
        width: 5px;
        height: 5px;
        display: inline-block;
        border-radius: 50%;
        background: rgba(0, 0, 0, .3);
        transition-timing-function: ease;
        transition-property: background-color;
        will-change: transform;
    }
}