@import url('~slick-carousel/slick/slick.css');
@import url('~slick-carousel/slick/slick-theme.css');

.vtex-product-image .vtex-product-image__horizontal {
  width: 500px;
}

.vtex-product-image .vtex-product-image__vertical {
  width: 600px;
}

/* Selected Image */
.vtex-product-image .vtex-product-image__selected-image {
  width: 500px;
  height: 500px;
}

/* Thumbnail Slider */
.vtex-product-image .vtex-product-image__horizontal-thumbnail-slider,
.vtex-product-image .vtex-product-image__vertical-thumbnail-slider {
  width: 100%;
  height: 100%;
}

@media (min-width: 700px) {
  .vtex-product-image .vtex-product-image__vertical-thumbnail-slider {
    width: 100px;
    height: 500px;
  }

  .vtex-product-image .vtex-product-image__horizontal-thumbnail-slider {
    width: 500px;
    height: 100px;
  }
}

/* Thumbnail Slider Item */
.vtex-product-image .vtex-product-image__thumbnail-slider-item {
  width: 100%;
}

@media (min-width: 700px) {
  .vtex-product-image .vtex-product-image__thumbnail-slider-item {
    width: 100px;
    height: 100px;
  }
}

/* Arrows */
.vtex-product-image .slick-prev.slick-disabled:before,
.vtex-product-image .slick-next.slick-disabled:before {
  color: inherit;
}

.vtex-product-image .slick-prev:before,
.vtex-product-image .slick-next:before {
  font-size: 2rem;
  color: inherit;
}

.vtex-product-image .vtex-product-image__vertical-arrow--prev,
.vtex-product-image .vtex-product-image__vertical-arrow--next {
  transform: rotate(90deg);
  position: relative;
  left: 6px;
  right: 0px;
  margin: auto;
  margin-bottom: 15px;
  z-index: 999;
  color: black;
}

.vtex-product-image .vtex-product-image__horizontal-arrow--prev {
  left: 0px;
  z-index: 999;
  color: black;
}

.vtex-product-image .vtex-product-image__horizontal-arrow--next {
  right: 10px;
  z-index: 999;
  color: black;
}

/* Dots */
.vtex-product-image .vtex-product-image__dots li button {
  color: inherit;
}

.vtex-product-image .vtex-product-image__dots li button:before {
  font-size: 1rem;
  color: inherit;
}

.vtex-product-image .vtex-product-image__dots li.slick-active button:before {
  color: inherit;
}