.carousel {
  position: relative;

  .carousel__next,
  .carousel__prev {
    border: 1px solid $secondary-color;
    align-items: center;
    background: transparent;
    border-radius: 25px;
    box-sizing: content-box;
    color: $secondary-color;
    cursor: pointer;
    display: flex;
    height: 25px;
    justify-content: center;
    margin: 0 10px;
    padding: 10px;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    width: 25px;

    svg {
      transition: transform 0.3s ease;
      fill: $secondary-color;
    }
  }

  .carousel__next {
    right: 0;
  }

  .carousel__prev {
    left: 0;
  }

  .carousel__prev:not(.carousel__prev--disabled):hover svg {
    transform: translateX(-5px);
  }

  .carousel__next:not(.carousel__next--disabled):hover svg {
    transform: translateX(5px);
  }
}

.carousel__pagination-button {
  width: 40px;
  &::after {
    width: 30px;
  }
}

.carousel-pagination {
  display: flex;
  gap: 8px;
  justify-content: center;
  line-height: 0;
  list-style: none;
  margin: 20px 0 0;

  > li > button {
    width: 30px;
    background-color: transparent;
    text-align: center;
    padding-bottom: 2px;
    border: 0;
    &::after {
      background-color: rgb(255, 255, 255, 0.3);
      content: '';
      display: block;
      height: 4px;
      width: 30px;
    }
    &.carousel__pagination-button--active {
      &::after {
        background-color: rgb(255, 255, 255);
      }
    }
  }
}

@media (max-width: 768px) {
  .carousel {
    .carousel__next,
    .carousel__prev {
      height: var(--vc-nav-height-sm);
      width: var(--vc-nav-width-sm);
    }
    .carousel__pagination-button {
      width: 10px;
      &::after {
        height: 5px;
        width: 5px;
        border-radius: 5px;
      }
    }
  }
}