@import "~/styles/partials/variables";
@import "~/styles/partials/mixins";
.drawer,
.modal {
  .close {
  }
}

.drawer {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
  @include max(640){
    box-shadow: none;
  }
  transition: transform var(--transition-speed) ease;

  &-container {
    --transition-speed: 1s;
    transition: ease-in-out;
    position: fixed;
    left: 0;
    z-index: 100;
    &.fullScreen {
      height: 100vh;
      width: 100%;
    }
    &.left {
      top: 0;
      left: 0;
      transform: translateX(-105%);
    }
    &.right {
      top: 0;
      right: 0;
      transform: translateX(100%);
    }
    &.top {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      transform: translateY(-100%);
    }
    &.bottom {
      bottom: 0;
      right: 0;
      left: 0;
      width: 100%;
      transform: translateY(100%);
      height: auto;
      overflow-y: scroll;
    }
    &.open.in.left,
    &.open.in.right {
      transform: translateX(0);
    }
    &.open.in.top {
      transform: translateY(0);
    }
    &.open.in.bottom {
      transform: translateY(0);
    }
    &.open.in.overlay {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      z-index: 999;
    }
  }
}

.modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -200vh);
  transition: transform 0.4s ease-in-out;
  overflow: visible;
  border-radius: 5px;

  @include max(1024){
    transform: translate(-50%, 200vh);
  }

  @include maxOrientation(1024, 'portrait') {
    padding: 0px;
    top: auto;
    bottom:0;
  }

  @media only screen and (max-width: 768px) {
    width: 90%;
  }

  &.active {
    transform: translate(-50%, -50%);
  }
  &.middle{
    transform: translate(-50%, -50%);
    @include max(1024){
      transform: translate(-50%, -50%);
      max-height: 80%;
      overflow-y: scroll;
    }
  }
  &.fullScreen{
    transform: translate(-50%, -50%);
    @media only screen and (max-width: 768px) {
      transform: translate(-50%, -0%);
      max-height: 100%;
    }
  }
  &.modal-bot-mob{
    @include max(1024){
      height: fit-content;
      top: 50%;
      overflow-y: hidden;
    }
  }


  &--header {
    &-close {
      position: absolute;
      right: 5px;
      top: 10px;
    }
  }

  &-content {
    overflow: hidden;
    overflow-y: auto;
  }

  &-success {
    width: 380px;

    .modal-content {
      .icon-container {
        margin: 20px 0;

        .success-msg {
          margin-top: 15px;
        }
      }
    }
  }
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  // background-color: rgba($primary, 0.4);
  backdrop-filter: blur(3px);
  background-color: rgba($black, 0.4);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;

  &.active {
    opacity: 1;
    pointer-events: all;
    &.blur {
      backdrop-filter: blur(3px);
    }
  }
}

.lightbox {
  width: 90vh;
  @include max(640) {
      max-width: 100%;
  }
}


.loading-container {
  .fullScreen{
    .global-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
  }
  .global-loading {
    background: $white;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 40px;
    @include max(1024) {
      width: 100%;
    }

    .loader-txt {
      @include max(1024) {
        margin-bottom: 25px;
      }
    }

    div {
      margin: 0 auto;
    }
  }
}