@import "flive-vars";

:global {
  .flive_modal_overlay {
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    padding-bottom: $modal-overlay-padding-bottom;
    background-color: $modal-overlay-background-color-mobile;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    @media (min-width: $screen-sm-min) {
      background-color: $modal-overlay-background-color;
    }
  }
}

.content {
  font-size: $bigger-font-size;
  text-align: $modal-content-text-align;
  position: absolute;
  margin: auto;
  overflow: auto;
  outline: none;
  background-color: $modal-content-background-color;
  border-radius: 0;
  padding: $modal-content-padding;
  @media (min-width: $screen-sm-min) {
    border-radius: $modal-content-border-radius;
    box-shadow: $modal-content-box-shadow;
    border: $modal-content-border;
  }
}

.xs {
  @include modal-content('xs');
}
.sm {
  @include modal-content('sm');
}
.md {
  @include modal-content('md');
}
.lg {
  @include modal-content('lg');
}