@import "../animations/_popup.scss";
@import "../variables";

.q-popup-main {
  position: absolute;
  background-color: $white;
  display: block;
  text-align: center;
  padding: $popup-padding;
  width: 100%;
  max-width: 90vw;
  max-height: 90vh;
  border-radius: $border-radius-popup;
  z-index: 1031;
  box-sizing: border-box;

  .q-popup-content {
    overflow-y: scroll;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    max-height: 50vh;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }

  .q-popup-icon-position {
    display: flex;
    justify-content: flex-end;
    width: 16px;
    position: absolute;
    right: 0;
  }

  .q-popup-icon-left {
    justify-content: flex-start;
  }
}

//Animations
@include popup-animation;

.q-popup-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1030;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

body.q-disable-scroll {
  overflow: hidden;
}

.q-popup-header {
  display: flex;
  align-items: center;
  position: relative;
  margin-bottom: $space-medium;
  min-height: 16px;

  &.with-border {
    padding-bottom: $popup-padding;
    border-bottom: 1px solid $border-gray;
    margin-left: -$popup-padding;
    margin-right: -$popup-padding;

    .q-popup-icon-position {
      right: $popup-padding !important;
    }
  }

  &-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 auto;
    padding: 0 $space-large;
  }
}