@use './variables' as *;

.vueperslide {
  &__content-wrapper {
    color: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);

    &--outside-top:not(.parallax-fixed-content), &--outside-bottom {
      color: #444;
      &, .vueperslide__content-wrapper {text-shadow: none;}
    }
  }

  &__title {font-size: 2em;}

  &__content {
    font-style: italic;
    position: relative;
  }
}

.vueperslides__bullets--outside .vueperslides__bullet {
  .default {
    border-color: $secondary;
    box-shadow: none;
  }

  &--active .default {background-color: $secondary;}
}

// ============ EXAMPLES =============
// Hero.
// ===================================
.ex--hero {
  .vueperslide {height: 80%;} // Parallax move only starts from half screen.
  .vueperslide__content-wrapper {
    font-family: inherit;
    justify-content: flex-end;
    align-items: flex-end;
    opacity: 0.8;
    padding-bottom: 0.5em;
    padding-right: 1em;
  }
  .vueperslide__title {font-size: 2.3em;line-height: 1.3;}

  a {
    padding-left: 0.3em;
    pointer-events: all;
    color: inherit !important;
    text-decoration: underline;
  }
}

@media screen and (max-width: 720px) {
  .ex--hero .vueperslide__content-wrapper {
    justify-content: flex-start;
    padding-top: 0.5em;
  }
}

// Simplest ever.
// ===================================
.ex--simplest-ever .vueperslide {
  background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;

  &__title {
    font-size: 7em;
    opacity: 0.6;
  }
}

// Fractions and progress.
// ===================================
.ex--simplest-ever {
  .vueperslides__progress {
    background: rgba(0, 0, 0, 0.25);
    color: $primary;
  }
  .vueperslides__fractions {top: 1.2em;}
}

// Lazy loading.
// ===================================
// .ex--lazyloading .vueperslide {}

// Arrows and bullets.
// ===================================
.ex--arrows-and-bullets-1,
.ex--arrows-and-bullets-2,
.ex--arrows-and-bullets-3,
.ex--arrows-and-bullets-4 {
  width: 600px;
  max-width: 100%;
  margin: auto;
}

.ex--arrows-and-bullets-1 {
  .vueperslide__content-wrapper {width: 80%;}
  .vueperslides__arrow {color: yellow;}
  .vueperslides__arrow svg {stroke-width: 2;}
}

.ex--arrows-and-bullets-2 {
  .vueperslides__bullet {
    .default {
      background-color: rgba(0, 0, 0, 0.3);
      border: none;
      // transition: 0.3s;
      width: 15px;
      height: 15px;

      span {
        display: block;
        color: #fff;
        font-size: 10px;
        line-height: 16px;
      }
    }

    &--active .default {background-color: $secondary;}
  }
}

.ex--arrows-and-bullets-4 {
  .vueperslides__bullets button {
    .w-icon {position: relative;}
    & .w-icon:before {
      position: absolute;
      content: '';
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      transition: 0.3s;
      border-radius: 100%;
    }
    &:focus .w-icon:before {
      opacity: 0.4;
      box-shadow: 0 0 0 4px currentColor;
    }
  }
}

// Images and fading.
// ===================================
.ex--images-and-fading {
  .vueperslide__content-wrapper {
    font-family: inherit;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    opacity: 0.8;
    padding-top: 0.5em;
    padding-right: 1em;
  }
  .vueperslide__title {font-size: 2.3em;}
}

// Link on the whole slide.
// ===================================
.ex--link-on-the-whole-slide {
  .vueperslide__content-wrapper {
    font-family: inherit;
    justify-content: flex-start !important;
    align-items: flex-end !important;
    opacity: 0.8;
    padding-top: 0.5em;
    padding-right: 1em;
  }
  .vueperslide__title {font-size: 2.3em;}
}

// Complex slide content.
// ===================================
.ex--complex-slide-content {
  .vueperslide__content-wrapper {width: 80%;}
}

// Events.
// ===================================
.events-box p {margin-bottom: 0;}

.ex--events .vueperslide--active:before {
  content: 'This slide is active!';
  position: absolute;
  top: -18px;
  right: -18px;
  padding: 4px 25px;
  background: orange;
  color: #fff;
  font-size: 11px;
  transform: translateX(30%) rotate(45deg);
  transform-origin: 0 0;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.2);
}

// Center mode.
// ===================================
.ex--center-mode {
  width: 600px;
  max-width: 100%;
  margin: auto;

  .vueperslides__arrows--outside {color: $secondary;}
}

// Updating content.
// ===================================
.ex--updating-content .vueperslide__content-wrapper--outside-top *,
.ex--updating-content .vueperslide__content-wrapper--outside-bottom * {
  color: $secondary !important;
}

// Dragging distance.
// ===================================
.ex--dragging-distance {
  .vueperslide__content-wrapper {width: 80%;}
}

// Slide image inside.
// ===================================
.ex--slide-image-inside {
  .vueperslide__image {
    transform: scale(1.5) rotate(-10deg);
    background-position: center 90%;
  }

  .vueperslide__title {
    font-size: 7em;
    opacity: 0.7;
  }
}

// Show multiple slides.
// ===================================
.ex--show-multiple-slides-and-gap {
  width: 80%;
  margin: auto;

  .vueperslide {background-color: $secondary;}

  &:not(.vueperslides--slide-multiple) {
    .vueperslide {
      transform: scale(0.85);
      transition: 0.3s ease-in-out;
    }

    .vueperslide--active {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
  }

  &.ex2 {width: auto;}
}

// 3d rotation.
// ===================================
.ex--3d-rotation {
  width: 300px;
  margin: auto;

  .vueperslides__arrow--prev {left: -6.2em;}
  .vueperslides__arrow--next {right: -6.2em;}
}

// Videos.
// ===================================
.ex--videos {
  .vueperslide__content-wrapper {
    position: absolute;
    top: 55%;
    height: auto !important;
  }
}

// Synced instances.
// ===================================
.ex--synced-instances-2 {
  color: #fff;

  .vueperslide {padding: 1em 2em;}

  .vueperslide .vueperslide__content-wrapper {
    transform: scale(0.9);
    transition: 0.3s ease-in-out;
    opacity: 0.4;
    filter: blur(1px);
  }

  .vueperslide--active .vueperslide__content-wrapper {
    transform: scale(1.1, 1.2);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes gradient {
  0% {background-position: 0% 50%}
  50% {background-position: 100% 50%}
  100% {background-position: 0% 50%}
}

.thumbnails {
  margin: auto;
  max-width: 300px;

  .vueperslide {
    box-sizing: border-box;
    border: 1px solid #fff;
    transition: 0.3s ease-in-out;
    opacity: 0.7;
    cursor: pointer;
  }

  .vueperslide--active {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    opacity: 1;
    border-color: #000;
  }
}
