/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  @include user-select(none);
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
	cursor: move;
  cursor: -webkit-grab;
  cursor: grab;

  &:focus {
  	outline: none;
  }
}
.slick-slider .slick-track,
.slick-slider .slick-list {
	@include translate3d(0,0,0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;

  &:before,
  &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }

  .slick-loading & {
  	visibility: hidden;
  }
}
.slick-slide {
	display: none;
  float: left;
  height: 100%;
  min-height: 1px;
  [dir="rtl"] & {
  	float: right;
  }
  img {
  	display: block;
  }
  &.slick-loading img {
  	display: none;
  }

  &.dragging img {
  	pointer-events: none;
  }

  .slick-initialized & {
  	display: block;
  }

  .slick-loading & {
  	visibility: hidden;
  }

  .slick-vertical:not(.thb-portfolio-slider) & {
  	display: block;
  	height: auto;
  	margin: 0 0 20px;
  }
}
.slick-arrow.slick-hidden {
	display: none;
}

/* Changes */
.thb-carousel {

	&:not(.max_width) {
		min-width: 100%;
	}

	&:not(.thb-testimonials) {
		img {
			width: 100%;
			display: block;
		}
	}

	.slick-track {
		min-width: 100%;
	}
	.slick-nav {
		outline: none;
	}

	.slick-dots-wrapper {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.slick-dots {
		display: inline-flex;
		margin: 40px 0 0 0;
		padding: 0;
		text-align: center;
		line-height: 1;
		position: relative;
    width: auto;
    @include translateY(0);
		li {
			display: inline-block;
      width: auto;
      height: auto;
      margin: 0;
      padding: 0;
      border: 0;
			button {
				display: block;
				width: 6px;
				height: 6px;
				border-radius: 3px;
				text-indent: -9999px;
				background: rgba(0,0,0,0.2);
				margin: 0 3px;
				outline: none;
        padding: 0;
				cursor: pointer;

        &:before,
        &:after {
          display: none;
        }
			}
			.portrait_bullet {
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 15px;
				margin: 0 2px;
				opacity: 0.4;
				@extend .quick-transition;
				@extend .cover-bg;
				@include min-break($break-small) {
					width: 60px;
					height: 60px;
					border-radius: 30px;
					margin: 0 4px;
				}

			}
			&.slick-active {
				button {
					background: rgba(0,0,0,1);
				}
				.portrait_bullet {
					opacity: 1;
				}
			}
		}
		.select {
			display: block;
			width: 6px;
			height: 6px;
			border-radius: 3px;
			text-indent: -9999px;
			background: rgba(0,0,0,1);
			margin: 0 3px;
			outline: none;

			position: absolute;
			top: 0;
			left: 0;

      .rtl & {
        left: calc(100% - 12px);
      }
		}
	}
	&.center-arrows {

		.slick-nav {
			position: absolute;
			top: 50%;
			left: auto;
			right: auto;
			z-index: 20;
			@include translateY(-50%);

			&.slick-prev {
				left: 15px;

				@include min-break($break-small) {
					left: 40px;
				}
			}
			&.slick-next {
				right: 15px;

				@include min-break($break-small) {
					right: 40px;
				}
			}
		}

	}
	&.thb-arrows-style2 {
		.slick-style2-arrows {
			position: absolute;
	    bottom: 15px;
	    left: 50%;
	    @include translateX(-50%);
	    white-space: nowrap;
	    display: flex;

	    @include min-break($break-small) {
	    	left: auto;
	    	right: 4vw;
	    	bottom: 10vh;
	    	@include translateX(0%);
	    }
      .rtl & {
        direction: ltr;
        @include min-break($break-small) {
  	    	right: auto;
  	    	left: 4vw;
  	    }
      }
			.slick-nav {
				position: static;
				display: inline-flex;
				color: #fff;
				font-size: 14px;
				font-weight: 600;
				&.thb-animated-arrow {
					border: 0;
					height: auto;
					width: auto;
				}

				&.slick-prev {
					margin-right: 8px;
					@include min-break($break-small) {
						margin-right: 16px;
					}
					svg {
						margin-right: 4px;
					}
					&:hover svg {
						@include translateX(-5px);
					}
				}
				&.slick-next {
					margin-left: 8px;
					@include min-break($break-small) {
						margin-left: 16px;
					}
					svg {
						margin-left: 4px;
					}
					&:hover svg {
						@include translateX(5px);
					}
				}
			}
			.slick-dots-wrapper {
				align-items: center;
			}

			.slick-dots {
				margin: 0;
				align-items: center;
				li {
					button {
						background: rgba(255,255,255,0.4);
					}
					&.slick-active button{
						background: #fff;
					}
				}
				.select {
					background: #fff;
				}
			}
		}
	}
	&.overflow-visible {
		.slick-list {
			overflow: visible;

			.slick-slide {
				opacity: 0.2;
				pointer-events: none;
				@include transition(opacity .25s $transition);
				&.slick-active {
					opacity: 1;
					pointer-events: auto;
				}
			}
		}
	}
	&.overflow-visible-only {
		.slick-list {
			overflow: visible;
		}
	}
}
