/**
 * ItcSlider
 * @version 1.0.0
 * @author https://github.com/itchief
 * @copyright Alexander Maltsev 2020 - 2022
 * @license MIT (https://github.com/itchief/ui-components/blob/master/LICENSE)
 * @tutorial https://itchief.ru/javascript/slider
 */

.itc-slider {position: relative;}
.itc-slider__wrapper {overflow: hidden;}
.itc-slider__items {display: flex; transition: transform 0.5s ease; will-change: transform;}
.itc-slider__transition-none {transition: none;}


/* кнопки влево и вправо */
.itc-slider__btn {
  position: absolute;
  top: 38%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  color: #2C3329;
  text-align: center;
  background: #fff;
  border: none;
  border-radius: 8px;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.08);
}

.itc-slider__btn_hide {display: none;}
.itc-slider__btn_prev {left: -20px;}
.itc-slider__btn_next {right: -20px;}

.itc-slider__btn:hover {color: #fff;text-decoration: none;background: #86C555;outline: 0;}

.itc-slider__btn:hover::before{color: #fff; -webkit-text-stroke: 0.5px #86C555;}


.itc-slider__btn_next::before {font-family: 'FontAwesome';content: "\f054";color: #2C3329; padding: 4px 0 0 3px;}
.itc-slider__btn_prev::before {font-family: 'FontAwesome';content: "\f053";color: #2C3329; padding: 4px 0 0 0px;}



/* индикаторы */
.itc-slider__indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  margin: 0 15%;
  padding-left: 0;
  list-style: none;
}

.itc-slider__indicator {
  flex: 0 1 auto;
  box-sizing: content-box;
  width: 30px;
  height: 5px;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  background-color: rgb(255 255 255 / 50%);
  background-clip: padding-box;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  cursor: pointer;
}

.itc-slider__indicator_active {background-color: rgb(255 255 255 / 90%);}