.ui-arrow {
  -webkit-tap-highlight-color: transparent;
}
.ui-arrow:disabled,
.ui-arrow.swiper-button-disabled {
  cursor: default;
}
.ui-arrow__icon {
  display: block;
}
@media screen and (max-width: 767px) {
  .ui-arrow__icon {
    width: 40px;
    height: 40px;
  }
}
.ui-arrow__icon._direction-right {
  transform: scaleX(-1);
}
.ui-arrow .arrow__line,
.ui-arrow .arrow__background {
  transition: fill var(--transition-fast);
}
.ui-arrow._color-emerald .arrow__line {
  fill: var(--color-white);
}
.ui-arrow._color-emerald .arrow__background {
  fill: var(--color-emerald);
}
.ui-arrow._color-emerald:disabled .arrow__line {
  fill: var(--color-grey-1);
}
.ui-arrow._color-emerald:disabled .arrow__background {
  fill: var(--color-grey-2);
}
@media (hover: hover) {
  .ui-arrow._color-emerald:hover:not(:disabled):not(.swiper-button-disabled) .arrow__line {
    fill: var(--color-white);
  }
  .ui-arrow._color-emerald:hover:not(:disabled):not(.swiper-button-disabled) .arrow__background {
    fill: var(--color-orange);
  }
}
.ui-arrow._color-dark-emerald .arrow__line {
  fill: var(--color-white);
}
.ui-arrow._color-dark-emerald .arrow__background {
  fill: var(--color-emerald);
}
.ui-arrow._color-dark-emerald:disabled .arrow__line {
  fill: var(--color-grey-1);
}
.ui-arrow._color-dark-emerald:disabled .arrow__background {
  fill: var(--color-grey-3);
}
@media (hover: hover) {
  .ui-arrow._color-dark-emerald:hover:not(:disabled):not(.swiper-button-disabled) .arrow__line {
    fill: var(--color-white);
  }
  .ui-arrow._color-dark-emerald:hover:not(:disabled):not(.swiper-button-disabled) .arrow__background {
    fill: var(--color-orange);
  }
}
.ui-arrow._color-white .arrow__line {
  fill: var(--color-black);
}
.ui-arrow._color-white .arrow__background {
  fill: var(--color-white);
}
.ui-arrow._color-white:disabled .arrow__line {
  fill: var(--color-grey-2);
}
.ui-arrow._color-white:disabled .arrow__background {
  fill: var(--color-white-transparent);
}
@media (hover: hover) {
  .ui-arrow._color-white:hover:not(:disabled):not(.swiper-button-disabled) .arrow__line {
    fill: var(--color-white);
  }
  .ui-arrow._color-white:hover:not(:disabled):not(.swiper-button-disabled) .arrow__background {
    fill: var(--color-orange);
  }
}