@use '../settings/variables' as v;
@use '../settings/mixins' as m;
@use '../settings/functions' as f;

.qpp-c-modal {
  &__content {
    background: v.$white;
    border: 0 none;
    border-radius: 4px;
    bottom: auto;
    left: 50%;
    max-width: 95%;
    min-width: 300px;
    width: 100%;
    outline: none;
    position: absolute;
    right: auto;
    top: 10%;
    transform: translateX(-50%);

    @include m.media-breakpoint(xs) {
      max-width: 600px;
    }
  }

  &--reverse-content {
    .qpp-c-modal__content {
      display: flex;
      flex-direction: column-reverse;
    }
  }

  &__side-panel {
    display: flex;
  }

  .closex,
  .qpp-c-modal__close {
    background-color: transparent;
    border: 0;
    height: v.$spacing-32;
    width: v.$spacing-32;
    line-height: 0;
    padding: 0;
    fill: v.$black;
    color: v.$black;

    &:focus {
      @include m.focus-ring;
    }
  }

  .qpp-c-modal__main {
    ~ .qpp-c-modal__close-wrap {
      align-self: flex-end;
      height: v.$spacing-32;
      width: v.$spacing-32;
      margin: v.$spacing-32 v.$spacing-32 0 0;

      .closex,
      .qpp-c-modal__close {
        position: relative;
        top: f.rem(-7px);
      }
    }

    .qpp-c-modal__header {
      padding: 0 v.$spacing-32;
      margin: -(v.$spacing-32) v.$spacing-32 0 0;
    }
  }

  .qpp-c-modal__header {
    padding: v.$spacing-32 v.$spacing-32 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    h3 {
      margin: 0;
    }

    .closex,
    .qpp-c-modal__close {
      align-self: center;
      margin: -(v.$spacing-8) 0 0;
    }
  }

  .qpp-c-modal__header-sep {
    padding-bottom: 25px;
    border-bottom: 1px solid v.$gray-10;

    ~ .qpp-c-modal__body {
      padding: v.$spacing-24 v.$spacing-32 v.$spacing-32;
    }
  }

  .qpp-c-modal__body {
    max-height: 60vh;
    overflow-y: auto;
    padding: v.$spacing-16 v.$spacing-32 v.$spacing-32;

    > p {
      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    &::-webkit-scrollbar {
      -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
    }

    &::-webkit-scrollbar:vertical {
      width: 11px;
    }

    &::-webkit-scrollbar:horizontal {
      width: 11px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 8px;
      border: 2px solid v.$white;
      background-color: rgba(0, 0, 0, 0.5);
    }
  }

  .qpp-c-modal__footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid v.$gray-10;
    padding: v.$spacing-16 v.$spacing-32;
  }
}

.qpp-c-modal__overlay {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.5);
}

.qpp-c-modal__body-open {
  overflow: hidden;
}