<template>
 <div id="home">
   <b-carousel id="homeSlider"
               style="text-shadow: 1px 1px 2px #333;"
               controls
               :interval="4000"
               img-width="1024"
               img-height="480"
               v-model="slide"
               @sliding-start="onSlideStart"
               @sliding-end="onSlideEnd">
     <b-carousel-slide>
       <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
            src="../assets/images/img1.png" alt="image slot">
       <h1><b>Simplifying the journey</h1>
     </b-carousel-slide>
     <b-carousel-slide>
       <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
            src="../assets/images/img2.png" alt="image slot">
       <h1><b>Connecting the dots </h1>
     </b-carousel-slide>
     <b-carousel-slide>
       <img slot="img" class="d-block img-fluid w-100" width="1024" height="480"
            src="../assets/images/img3.png" alt="image slot">
       <h1><b>The critical decisions</h1>
     </b-carousel-slide>
   </b-carousel>
    <!-- <div class="carousel-controls-separator"></div> -->
 </div>
</template>

<script lang="js">
 export default{
   data () {
   return {
     slide: 0,
     sliding: null
   }
 },
 methods: {
   onSlideStart (slide) {
     this.sliding = true
   },
   onSlideEnd (slide) {
     this.sliding = false
   }
 }
}
</script>

<style lang="scss" scoped>
 @import '../styles/variables.scss';
 //general
 @import '../styles/styles.scss';
// home section
$carouselControlSize : 50px;
$carouselControlSeparatorSize : 50px;
$carouselControlsWidth : #{($carouselControlSize * 2) + $carouselControlSeparatorSize};

div#home {
 div#homeSlider {
   div.carousel-item {
     height : auto;

     div.carousel-caption{
       bottom: auto;
       top: 30%;

       h1 {
         font-weight : 200;
       }
     }
   }

   div.carousel-controls {
     position : absolute;
     width    : $carouselControlsWidth;
     height   : $carouselControlSize;
     bottom   : 60px;
     left     : calc(50% - #{$carouselControlsWidth / 2});
     z-index  : 10;

     .carousel-control {
       height        : $carouselControlSize;
       width         : $carouselControlSize;
       border-radius : 50%;
       border        : 2px solid map-get($colors, "white");
     }

     .carousel-control-prev-icon, .carousel-control-next-icon {
       position : relative;
       opacity  : 1;
     }
     .carousel-control-prev i {
       margin-left : -2px;
     }
     .carousel-control-next i {
       margin-right : -2px;
     }

     .carousel-control-separator {
       height           : 2px;
       width            : $carouselControlSeparatorSize;
       background-color : map-get($colors, "white");
     }
   }
 }
}
a.carousel-control-next{
 position: absolute;
 top: 50%;
 right: 0;
 height: 50px;
 width: 50px;
 border-radius: 50%;
 border: 2px solid white;
 right: 40%;
 top: 80%;
 opacity: 1;
}
.carousel-controls-separator{
 width: 100px;
 position: absolute;
 bottom: 60%;
 left: 44%;
 border: 2px solid white;
}
div#home{
 div#homeSlider{
   .carousel-caption h1{
     bottom: 250px;
     font-size: 30px;
   }
 }
}
div#home{
 div#homeSlider{
   a.carousel-control-next{
     position: absolute;
     top: 50%;
     height: 50px;
     width: 50px;
     border-radius: 50%;
     border: 2px solid white;
     right: 40%;
     top: 80%;
     opacity: 1;
   }
 }
}

//media queries
// sm devices
@media (max-width: 575.98px){
 div#home{
   .thumbnail{
     position: relative;
   }
   .caption{
     position: absolute;
     top: 40%;
     width: 100%
   }
   h1{
     font-size: 20px !important;
     font-weight: 300;
     margin-left: 20px;
     margin-right: 20px;
   }
 }

}
//media queries
@media (max-width: 768px){
   div#home{
   .thumbnail{
     position: relative;
   }
   .caption{
     position: absolute;
     top: 40%;
     width: 100%
   }
   h1{
     font-size: 22px;
     font-weight: 300;
     margin-left: 20px;
     margin-right: 20px;
   }
 }
}
//media queries
@media (min-width: 992px){
   div#home div#homeSlider div.carousel-item{
   height: auto;
 }
 div#home h1{
   font-size: 34px;
 }
 div#home{
   .carousel-inner img{
     height: auto;
   }
 }
}
 .carousel-caption h1{
   position: relative;
   top: 24%;
 }
</style>