/**
 * Hypersite Thumbnail Slider base styles.
 *
 * Ported from the Bricks Ultra thumbnail-slider stylesheet. The wrapper hook
 * class is renamed to `.hs-thumb-slider-wrapper` (so the Bricks Ultra runtime
 * never grabs our markup), but every inner `.bultr-*` class is preserved so
 * that existing Bricks global classes keep generating matching CSS.
 */

.brxe-hs-thumbnail-slider,
.brxe-wpvbu-thumbnail-slider {
  width: 100%;
}

.hs-thumb-slider-wrapper,
.hs-thumb-slider-wrapper .bultr-thumbs-wrapper,
.hs-thumb-slider-wrapper .bultr-thumb-slider {
  width: 100%;
  display: flex;
}

.hs-thumb-slider-wrapper .bultr-main-slider,
.hs-thumb-slider-wrapper .bultr-thumb-slider {
  overflow: hidden;
}

.hs-thumb-slider-wrapper.bultr-thumb-position-bottom {
  flex-direction: column;
}

.hs-thumb-slider-wrapper.bultr-thumb-position-top {
  flex-direction: column-reverse;
}

.hs-thumb-slider-wrapper.bultr-thumb-position-left {
  flex-direction: row-reverse;
}

.hs-thumb-slider-wrapper.bultr-thumb-position-right {
  flex-direction: row;
}

.hs-thumb-slider-wrapper.bultr-thumb-position-right .bultr-thumb-slider .bultr-slide-image,
.hs-thumb-slider-wrapper.bultr-thumb-position-left .bultr-thumb-slider .bultr-slide-image {
  height: 100%;
}

.hs-thumb-slider-wrapper .bultr-slide-content {
  color: var(--bu-text-dark, #121212);
}

.hs-thumb-slider-wrapper .bultr-main-slider .bultr-slide-content {
  padding: 20px 30px;
}

.hs-thumb-slider-wrapper .bultr-slide-overlay {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.hs-thumb-slider-wrapper .bultr-thumb-slider .bultr-slide-image .bultr-slide-overlay {
  background-color: #12060680;
}

.hs-thumb-slider-wrapper .bultr-thumb-slider .splide__slide.is-active .bultr-slide-image .bultr-slide-overlay {
  background-color: #12060600;
}

.hs-thumb-slider-wrapper .bultr-slider-inner {
  position: absolute;
}

.hs-thumb-slider-wrapper .bultr-slide-heading {
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
}

.hs-thumb-slider-wrapper .bultr-slide-heading:not(:last-child) {
  margin-bottom: 30px;
}

.hs-thumb-slider-wrapper .bultr-slider-inner .bultr-slide-button {
  display: inline-block;
  border: 2px solid;
  padding: 12px 24px;
}

.hs-thumb-slider-wrapper .bultr-slider-inner .bultr-slide-btn-text {
  display: inline-block;
  font-size: 15px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.3s;
}

.hs-thumb-slider-wrapper .bultr-thumb-slider .splide__slide {
  overflow: hidden;
}

.hs-thumb-slider-wrapper .bultr-slider-progress-bar {
  transition: width 500ms ease;
  width: 0;
}

.hs-thumb-slider-wrapper .bultr-slider-progress {
  background-color: var(--bu-bg-light, #eee);
}

.hs-thumb-slider-wrapper .bultr-slider-progress-bar {
  background-color: var(--bu-primary-color, #1a73e8);
}

.hs-thumb-slider-wrapper .bultr-main-slider .splide__slide .bultr-slide-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hs-thumb-slider-wrapper .bultr-thumb-slider .bultr-slide-image {
  position: relative;
}

.hs-thumb-slider-wrapper .bultr-thumb-slider .splide__pagination {
  display: none;
}

.hs-thumb-slider-wrapper .splide__arrow {
  height: auto;
  width: auto;
}

.hs-thumb-slider-wrapper .splide__arrow i {
  font-size: 20px;
  padding: 5px;
}

.hs-thumb-slider-wrapper .splide__arrow--prev {
  margin-left: 15px;
}

.hs-thumb-slider-wrapper .splide__arrow--next {
  margin-right: 15px;
}

/* The .bultr-slide-image elements are CSS background images. */
.hs-thumb-slider-wrapper .bultr-slide-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
}

@media screen and (max-width: 766px) {
  .hs-thumb-slider-wrapper .bultr-main-slider,
  .hs-thumb-slider-wrapper .bultr-thumbs-wrapper {
    width: 100% !important;
  }

  .hs-thumb-slider-wrapper.bultr-thumb-mobile-position-bottom {
    flex-direction: column;
  }

  .hs-thumb-slider-wrapper.bultr-thumb-mobile-position-top {
    flex-direction: column-reverse;
  }
}

/* SVG arrow sizing */
.hs-thumb-slider-wrapper .bultr-main-slider .splide__arrow svg,
.hs-thumb-slider-wrapper .bultr-thumb-slider .splide__arrow svg {
  height: 1em;
  width: 1em;
}