@import "../../helpers";
.sf-modal {
  &__container {
    position: fixed;
    top: var(--modal-top, 0);
    right: var(--modal-right, 0);
    bottom: var(--modal-bottom, 0);
    left: var(--modal-left, 0);
    z-index: var(--modal-index, 1);
    transform: var(--modal-transform);
    display: flex;
    flex-direction: var(--modal-flex-direction, column);
    align-content: space-between;
    box-sizing: border-box;
    width: var(--modal-width);
    height: var(--modal-height);
    border: var(--modal-border);
    max-height: var(--modal-max-height);
    background-color: var(--modal-background, var(--c-white));
    &::-webkit-scrollbar {
      width: 0;
    }
  }
  &__content {
    -moz-hyphens: auto;
    hyphens: auto;
    overflow-wrap: break-word;
    word-wrap: break-word;
    overflow-y: auto;
    padding: var(--modal-content-padding, var(--spacer-base) var(--spacer-sm));
    @include font(
      --modal-content-font,
      var(--font-weight--light),
      var(--font-size--base),
      1.6,
      var(--font-family--primary)
    );
  }
  &__close {
    position: absolute;
    right: var(--modal-close-right, var(--spacer-sm));
    top: var(--modal-close-top, var(--spacer-sm));
  }
  @include for-desktop {
    //--modal-width: 29.375rem;
    --modal-width: 40rem;
    --modal-top: 50%;
    --modal-left: 50%;
    --modal-bottom: none;
    --modal-right: none;
    --modal-transform: translate3d(-50%, -50%, 0);
    --modal-height: auto;
    --modal-max-height: 90%;
    --modal-content-padding: var(--spacer-sm) var(--spacer-2xl);
  }
}
.sf-modal a:link,
.sf-modal a:visited {
  color: var(--c-secondary);
  font-family: var(--font-family--secondary);
}
.sf-modal__close.sf-button {
  background: #888;
  border: none;
  border-radius: 0;
  opacity: 0.8;
  padding: var(--spacer-sm);
  position: absolute;
  right: 0;
  top: 0;
}
.sf-modal button.sf-button {
  border: 0;
}
.sf-modal button.sf-button:hover {
  background-color: var(--c-secondary);
  color: var(--c-primary);
}
.form__action-button--lg[data-v-2ce02fbc] {
  padding: var(--spacer-base) var(--spacer-xl);
}
.sf-modal p {
  margin: 12px 0;
}
.sf-modal h1,
.sf-modal h2 {
  color: var(--c-primary);
  margin-bottom: var(--spacer-sm);
}
.sf-modal h3,
.sf-modal h4 {
  margin-bottom: 0;
}
.sf-modal .modal-content {
  padding-bottom: var(--spacer-xl);
}