@import "variables";
@import "mixins";

.component-hero-slider {
  position: relative;
  user-select: inherit;
  .slide-content {
    padding: $space-lg 1.5rem;
    max-width: $container-xxl;
    margin: 0 auto;
  }
  .keen-arrow {
    display: none;
  }
  .keen-slider .dots {
    bottom: 4rem;
  }
  &.show-arrows {
    .keen-slider .keen-arrow {
      display: block;
      width: 60px;
      cursor: pointer;
      &:before {
        display: block;
        transition: $trans;
        position: absolute;
        top: 50%;
        transform: translate(0%, -50%);
        @include bp("md") {
          top: 100%;
        }
      }
      &:hover {
        &:before {
          transform: translate(0%, -50%) scale(1.05);
          transition: $trans-h;
        }
      }
      &.left {
        &::before {
          content: url(theme-url("/assets/icons/keen-slider-arrow-prev.svg"));
        }
        left: 1.5rem;
      }
      &.right {
        &::before {
          content: url(theme-url("/assets/icons/keen-slider-arrow-next.svg"));
        }
        right: 1.5rem;
      }
    }
  }
}
