@import "../../helpers";
.sf-call-to-action {
  display: var(--banner-display, flex);
  box-sizing: border-box;
  flex-direction: var(--call-to-action-flex-direction, column);
  align-items: var(--call-to-action-align-items);
  justify-content: var(--call-to-action-justify-content, left);
  min-height: var(--call-to-action-height, auto);
  padding: var(--call-to-action-padding, var(--spacer-lg));
  @include background(
    --call-to-action-background,
    var(--_call-to-action-background-color, transparent),
    var(--_call-to-action-background-image)
  );
  --call-to-action-background-position: 60%;
  &__text-container {
    display: flex;
    justify-content: var(
      --call-to-action-text-container-justify-content,
      flex-start
    );
    flex-direction: var(--call-to-action-text-container-flex-direction, column);
    width: var(--call-to-action-text-container-width);
    margin: var(--call-to-action-text-container-margin);
  }
  &__title {
    margin: var(--call-to-action-title-margin, 0 0 var(--spacer-base) 0);
    color: var(
      --call-to-action-color,
      var(--call-to-action-title-color, var(--c-white))
    );
    @include font(
      --call-to-action-title-font,
      var(--font-weight--semibold),
      var(--h2-font-size),
      1.4,
      var(--font-family--secondary)
    );
    text-transform: var(--call-to-action-title-text-transform, none);
  }
  &__description {
    margin: var(--call-to-action-description-margin, 0 0 var(--spacer-base) 0);
    color: var(
      --call-to-action-color,
      var(--call-to-action-description-color, var(--c-white))
    );
    @include font(
      --call-to-action-description-font,
      var(--font-weight--normal),
      var(--font-size--base),
      1.6,
      var(--font-family--primary)
    );
  }
  @include for-desktop {
    --call-to-action-description-font-size: var(--font-size--lg);
    --call-to-action-title-margin: 0 0 var(--spacer-xs) 0;
    --call-to-action-flex-direction: row;
    --call-to-action-justify-content: space-between;
    --call-to-action-align-items: center;
    --call-to-action-padding: var(--spacer-xl) var(--spacer-2xl);
    --call-to-action-height: 12.625rem;
    --call-to-action-text-container-width: 75%;
  }
}