<template>
  <v-sheet class="py-15">
    <v-card-subtitle class="text-center pb-0" style="opacity: 1">
      <p class="text-body-1">Trusted by 100+ Companies across the globe!</p>
    </v-card-subtitle>
    <v-sheet>
      <swiper-container
        class="mt-5"
        slides-per-view="auto"
        mousewheel-force-to-axis="true"
        space-between="50"
        autoplay-delay="4000"
        autoplay-disable-on-interaction="false"
      >
        <v-hover
          v-for="(item, index) in 8"
          :key="item"
          class="bg-red"
          style="overflow: visible"
        >
          <template v-slot="{ isHovering, props }">
            <swiper-slide
              style="cursor: pointer; z-index: 2"
              class="align-center d-flex"
              :style="smAndUp ? 'width : 200px' : '50%'"
              v-bind="props"
            >
              <v-card
                variant="text"
                width="100%"
                height="100"
                class="d-flex align-center"
              >
                <v-img
                  style="transition: 0.5s !important"
                  :class="
                    isHovering
                      ? 'animate__animated animate__pulse'
                      : 'filter_black'
                  "
                  :height="50"
                  src="@/assets/logo.svg"
                ></v-img>
              </v-card>
            </swiper-slide>
          </template>
        </v-hover>
      </swiper-container>
    </v-sheet>
  </v-sheet>
</template>

<script setup>
import { useDisplay } from "vuetify";
const { smAndUp } = useDisplay();
</script>

<style scoped>
.filter_black {
  filter: brightness(0) saturate(100%);
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
  }
  90% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.filter_black {
  filter: brightness(0) saturate(100%);
}

.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1.05, 1.05, 1.05) !important;
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);
    transform: scale3d(1.3, 1.3, 1.3);
  }

  to {
    -webkit-transform: scale3d(1.3, 1.3, 1.3);

    transform: scale3d(1.3, 1.3, 1.3) !important;
  }
}
</style>
