<template>
  <div class="sliderRight absolute rounded-full
    border border-solid border-stone flex items-center justify-center
    backdrop-blur-sm no-course"
    :style="{left:`${X}px`,top:`${Y}px`}"
    :class="[isRight?'active':'']">
      <div class="sliderRightC relative row justify-center items-center backdrop-blur" :class="[Current=='left'?'active':'']">
        <img src="../../assets/svg/right.svg" alt="Logo">
      </div>
    </div>
</template>
<script>
  export default {
    props: ['X','Y','isRight','Current'],
    data() {
      return {

      }
    }
  }
</script>
<style scoped>
  .sliderRight{
    z-index: 9;
    opacity: 0;
    margin: -2rem 0 0 -2rem;
    --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
  }
  .sliderRight.active{
    opacity: 1;
  }
  .sliderRightC{
    width: 4rem;
    height: 4rem;
  }
  .sliderRightC.active img {
    transform: rotate(-180deg);
  }
</style>
