@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 {
    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-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-lg);
  }
}