@import "../../helpers";
.sf-hero-item {
  --hero-font-size: 1rem;
  line-height: 1.2;
  @include for-desktop {
    --hero-font-size: 1.33333333rem;
  }
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  color: var(--c-text);
  &__image {
    width: 100%;
    height: 0;
    padding-bottom: 60%;
    margin-bottom: var(--spacer-base);
    @include background(
      --hero-item-background,
      var(--_hero-item-background-color, transparent),
      var(--_hero-item-background-image)
    );
  }
  &__wrapper {
    position: relative;
    width: 100%;
    text-decoration: none;
    border-radius: 0!important;
    &.sf-button,
    &.sf-button:hover,
    &.sf-button:active,
    &.sf-link {
      --button-background: transparent;
      --button-box-shadow-opacity: 0;
      --button-wrap: normal;
      text-align: left;
      background: transparent;
      border: none;
    }
  }
  &__text {
    max-width: 100%;
    margin-bottom: var(--spacer-sm);
  }
  &__subtitle {
    margin: 0;
    color: var(--c-primary);
    line-height: 1;
    font-size: var(--hero-font-size);
  }
  &__title {
    margin: var(--spacer-xs) 0 0 0;
    color: white;
    margin-top: auto;
    line-height: 1;
    font-size: var(--hero-font-size);
    font-family: var(--font-family--secondary);
  }
  &__button {
    display: none;
  }
  &--align-right {
    justify-content: flex-end;
  }
  &--position-bg-top-right {
    background-position: top right;
  }
  &--position-bg-bottom-right {
    background-position: bottom right;
  }
  &--position-bg-bottom-left {
    background-position: bottom left;
  }
  @include for-desktop {
    &__subtitle {
      width: 100%;
    }
    --hero-item-background-image: var(
      --_hero-item-background-desktop-image,
      var(--_hero-item-background-image)
    );
    &__text {
      --hero-item-font-size: var(--font-size--xl);
      position: absolute;
      bottom: var(--spacer-base);
      left: var(--spacer-xl);
      right: var(--spacer-xl);
      max-width: 74ch;
    }
    &__image {
      margin-bottom: 0;
    }
    &__button {
      display: block;
    }
  }
}
.sf-hero {
  position: relative;
  &__control--left,
  &__control--right {
    position: absolute;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    display: none;
    padding: 0 var(--spacer-sm);
  }
  &__control--right {
    right: 1rem;
    @include for-desktop-xxl {
      right: -26%;
    }
  }
  &__control--left {
    left: 1rem;
    @include for-desktop-xxl {
      left: -26%;
    }
  }
  &__bullets {
    position: absolute;
    bottom: var(--spacer-xl);
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    display: none;
  }
  .glide {
    &__slides {
      margin: 0;
    }
    &__slide {
      background-size: contain;
    }
  }
  @include for-desktop {
    max-width: 66.666666666%;
    margin: 0 auto;
    &__control--left,
    &__control--right {
      display: block;
    }
    &__bullets {
      display: flex;
    }
  }
}