$swiper-indicator-margin: $padding-sm !default;
$swiper-indicator-size: 6px !default;
$swiper-indicator-inactive-background-color: $light-gray !default;
$swiper-indicator-inactive-opacity: 0.3 !default;
$swiper-indicator-active-background-color: $dark-gray !default;
$swiper-indicator-active-opacity: 1 !default;

.mx{
    &-swiper{
        position: relative;
        overflow: hidden;
        cursor: grab;
        user-select: none;

        // hacking for ios  setting border-radius then display not correct
        transform: rotate(0deg);

        &-track{
            display: flex;
            height: 100%;

            &--vertical {
                flex-direction: column;
            }
        }

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

            &--vertical {
                top: 50%;
                bottom: auto;
                left: $swiper-indicator-margin;
                flex-direction: column;
                transform: translateY(-50%);
          
                .mx-swiper-indicator:not(:last-child) {
                  margin-bottom: $swiper-indicator-size;
                }
            }

            .mx-swiper-indicator {
                width: $swiper-indicator-size;
                height: $swiper-indicator-size;
                background-color: $swiper-indicator-inactive-background-color;
                border-radius: 100%;
                opacity: $swiper-indicator-inactive-opacity;
                transition: opacity $duration,
                  background-color $duration;
            
                &:not(:last-child) {
                  margin-right: $swiper-indicator-size;
                }
            
                &--active {
                  background-color: $swiper-indicator-active-background-color;
                  opacity: $swiper-indicator-active-opacity;
                }
              }
        }
    }
}