@import "mixins";

.vce-dividers-wrapper {
  .full-size();
  overflow: hidden;
  pointer-events: none;
}

.vce-container-divider {
  .full-size();
  display: none;
  transform-origin: 50% 50%;

  .vce-divider-svg {
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible;
  }

  &.vce-divider-position--top {
    .vce-divider-svg {
      top: 0;
      position: absolute;
    }
    .vce-divider-with-image,
    .vce-divider-with-video {
      top: 0;
    }
  }

  &.vce-divider-position--bottom {
    .vce-divider-svg {
      bottom: 0;
      position: absolute;
    }
    .vce-divider-with-image,
    .vce-divider-with-video {
      top: auto;
      bottom: 0;
    }
  }
}

.vce-container-divider-inner {
  .full-size();
}

.vce-container-divider-flip--horizontally .vce-container-divider-inner {
  transform: scaleX(-1);
}

.vce-divider-with-image,
.vce-divider-with-video {

  .vce-divider-svg {
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
  }
}

.vce-divider-with-video {
  .vce-asset-video-embed-sizer,
  .vce-asset-video-yt-sizer,
  .vce-asset-video-vimeo-sizer {
    border: none;
    max-width: none;
    height: 100%;
    width: auto;
    display: inline-block;
    vertical-align: top;
  }

  .vce-asset-video-embed-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin: 0;
  }
}

.vce-divider-with-image,
.vce-divider-with-video {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.vce-divider-video-block {
  overflow: hidden;
  margin: auto;
}

.vce-divider-image-block {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.vce-divider-image-background-block {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.vce-container-divider-new {
  .vce-divider-image-block,
  .vce-divider-video-block {
    position: relative;
  }

  .vce-divider-image-background-block,
  .vce-divider-video-background-block {
    width: 100%;
  }

  .vce-divider-video-background-block {
    position: absolute;
  }
}

.vce-divider-video-background-block {
  position: relative;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.vce-divider-video-background-inner-block {
  position: absolute;
  display: inline-block;
  height: 100%;
  min-width: 100%;
}

.vce-container-divider-flip--horizontally {
  .vce-divider-image-background-block {
    transform: translateX(-50%) scaleX(-1);
    transform-origin: 50% 50%;
  }
}

.vce-asset-video-embed--state-landscape.vce-divider-video-background-inner-block,
.vce-asset-video-embed--state-landscape .vce-asset-video-embed-player,
.vce-asset-video-embed--state-landscape .vce-asset-video-embed-sizer {
  height: auto;
  width: 100%;
}

.vce-asset-video-yt--state-landscape.vce-divider-video-background-inner-block,
.vce-asset-video-yt--state-landscape .vce-asset-video-yt-sizer {
  height: auto;
  width: 100%;
}

.vce-divider-video-background-block .vce-asset-video-yt-player {
  margin: 0;
  left: 0;
}

.vce-asset-video-vimeo--state-landscape.vce-divider-video-background-inner-block,
.vce-asset-video-vimeo--state-landscape .vce-asset-video-vimeo-sizer {
  height: auto;
  width: 100%;
}

.vce-container-divider-background-style--cover .vce-divider-image-background-block {
  background-size: cover;
  background-repeat: no-repeat;
}

.vce-container-divider-background-style--contain .vce-divider-image-background-block {
  background-size: contain;
  background-repeat: no-repeat;
}

.vce-container-divider-background-style--full-width .vce-divider-image-background-block {
  background-size: 100% auto;
}

.vce-container-divider-background-style--full-height .vce-divider-image-background-block {
  background-size: auto 100%;
}

.vce-container-divider-background-style--repeat .vce-divider-image-background-block {
  background-repeat: repeat;
}

.vce-container-divider-background-style--repeat-x .vce-divider-image-background-block {
  background-repeat: repeat-x;
}

.vce-container-divider-background-style--repeat-y .vce-divider-image-background-block {
  background-repeat: repeat-y;
}

.vce-container-divider-background-style--no-repeat .vce-divider-image-background-block {
  background-repeat: no-repeat;
}

.vce-container-divider-background-position--left-top .vce-divider-image-background-block {
  background-position: left top;
}

.vce-container-divider-background-position--center-top .vce-divider-image-background-block {
  background-position: center top;
}

.vce-container-divider-background-position--right-top .vce-divider-image-background-block {
  background-position: right top;
}

.vce-container-divider-background-position--left-center .vce-divider-image-background-block {
  background-position: left center;
}

.vce-container-divider-background-position--center-center .vce-divider-image-background-block {
  background-position: center center;
}

.vce-container-divider-background-position--right-center .vce-divider-image-background-block {
  background-position: right center;
}

.vce-container-divider-background-position--left-bottom .vce-divider-image-background-block {
  background-position: left bottom;
}

.vce-container-divider-background-position--center-bottom .vce-divider-image-background-block {
  background-position: center bottom;
}

.vce-container-divider-background-position--right-bottom .vce-divider-image-background-block {
  background-position: right bottom;
}

// position for video background
.vce-container-divider-background-position--left-top {
  .vce-divider-video-background-inner-block {
    left: 0;
    top: 0;
    transform: none;
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--center-top {
  .vce-divider-video-background-inner-block {
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: translate(-50%, 0) scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--right-top {
  .vce-divider-video-background-inner-block {
    right: 0;
    top: 0;
    transform: none;
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--left-center {
  .vce-divider-video-background-inner-block {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: translate(0, -50%) scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--center-center {
  .vce-divider-video-background-inner-block {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: translate(-50%, -50%) scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--right-center {
  .vce-divider-video-background-inner-block {
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: translate(0, -50%) scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--left-bottom {
  .vce-divider-video-background-inner-block {
    left: 0;
    bottom: 0;
    transform: none;
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--center-bottom {
  .vce-divider-video-background-inner-block {
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: translate(-50%, 0) scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider-background-position--right-bottom {
  .vce-divider-video-background-inner-block {
    right: 0;
    bottom: 0;
    transform: none;
  }
  &.vce-container-divider-flip--horizontally {
    .vce-divider-video-background-inner-block {
      transform: scaleX(-1);
      transform-origin: 50% 50%;
    }
  }
}

.vce-container-divider.vce-visible-all-only {
  display: block;
}

@media (max-width: 543px) {
  .vce-container-divider.vce-visible-xs-only {
    display: block;
  }
}

@media (min-width: 544px) and (max-width: 767px) {
  .vce-container-divider.vce-visible-sm-only {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .vce-container-divider.vce-visible-md-only {
    display: block;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .vce-container-divider.vce-visible-lg-only {
    display: block;
  }
}

@media (min-width: 1200px) {
  .vce-container-divider.vce-visible-xl-only {
    display: block;
  }
}