@import '../../../../styles/app';

.arrow {
  opacity: 0;
  transition: 0.3s;
  z-index: 99;
  width: 50px;
  height: 50px;
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 135px;
  border: none;
  background-color: rgba(0, 0, 0, 0.15);

  &:focus {
    outline: none;
  }

  &:hover {
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.25);
  }

  img {
    height: 20px;
    width: 20px;
  }
}

.arrow--left {
  left: 10px;

  img {
    transform: rotate(180deg);
  }
}

.arrow--right {
  right: 10px;
}

.active {
  opacity: 1;

  @include media-breakpoint-down(sm) {
    opacity: 0;
  }
}