@import "../styles/common";


.w_carousel{
  position: relative;

  .full();

  overflow: hidden;

  &.w_carousel_vertical{
    .w_carousel_item{
      display: block;
    }
  }
}

.w_carousel_list{
  position: relative;

  .full();
  white-space: nowrap;

  &.w_carousel_transition{
    transition: left 0.3s,top 0.3s;
  }
}

.w_carousel_item{
  .full();
  display: inline-block;
  vertical-align: top;
}



.dot_list{
  .flex_parent();
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom:10px;
  left:0;
  width: 100%;
}

.dot{
  width: 16px;
  height: 3px;
  padding: 0;
  color: transparent;
  font-size: 0;
  background: #fff;
  border: 0;
  border-radius: 1px;
  outline: none;
  cursor: pointer;
  opacity: .3;
  transition: all .5s;
  margin: 0 3px;

  &.active{
    width:24px;
    background: #fff;
    opacity: 1;
  }

  &:first-child,
  &:last-child{
    display: none;
  }
}

.w_carousel_dot_list{
  .flex_center();
  position: absolute;
  left: 50%;
  bottom:20px;
  transform: translate(-50%,0);

  &_top{
    bottom: auto;
    top: 20px;
  }

  &_left{
    left: 20px;
    top: 50%;
    transform: translate(0,-50%);
  }

  &_right{
    left: auto;
    right: 20px;
    top: 50%;
    transform: translate(0,-50%);
  }

  &_left,
  &_right{
    display: block;
    .w_carousel_dot{
      margin: 0 0 3px;

      &.active{
        margin: 0;
      }
    }
  }
}

.w_carousel_dot{
  background-color: #f1f1f1;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  margin-right: 5px;
  cursor: pointer;

  &:last-child{
    margin-right: 0;
  }

  &.active{
    background: @activeColor;
  }
}