.okra-popup {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba($dark_grey, 0.1);
  backdrop-filter: blur(3px);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;

  &__content {
    position: relative;
    top: 50%;
    left: 50%;

    width: 480px;
    min-height: 400px;

    background-color: white;
    border: 1px solid $light-grey;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 1rem;

    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    transition: all 0.3s 0.1s;

    display: flex;
    flex-direction: column;

    // @include respond(tab-land) {
    //   width: 50%;
    // }
    // @include respond(tab-port) {
    //   width: 60%;
    // }
    @include respond(phone) {
      width: 100%;
      height: 100%;
    }
  }

  &__header {
    border-bottom: 1px solid $light-grey;
    padding: 1.4rem 1.6rem;
    @include display-flex;
  }
  &__footer {
    margin-top: auto;
    padding: 2.4rem;
    border-top: 1px solid $light-grey;
    @include display-flex(space-between);

    & > div {
      @include display-flex(flex-start);
    }

    button:last-child {
      margin-left: 1.6rem;
    }
  }
  &__body {
    padding: 1.6rem;
    & > svg {
      width: 4.8rem;
      height: 4.8rem;
      margin-top: 4rem;
      margin-bottom: 1.6rem;
    }
    .okra-loader-primary{
      width: 40px;
      height: 40px;
    }
  }
  &.alert {
    .okra-popup__footer {
      @include display-flex(center);
      border-top: none;
      .buttons {
        display: flex;
        @include display-flex(center, center, column-reverse);
        button:last-child {
          margin-left: 0;
          margin-bottom: 16px;
        }
      }
    }
    .okra-popup__body {
      flex: 1;
      height: 100%;
      @include display-flex(center, center, column);
      h4 {
        margin-bottom: 8px;
      }
      > svg {
        margin-bottom: 40px !important;
      }
    }
  }
  &.dark {
    background: none;
    .okra-popup__content {
      background-color: black;
      * {
        color: white;
      }
    }
  }
  &.lg {
    .okra-popup__content {
      width: 720px;
      height: auto;
    }
  }
  &.active {
    opacity: 1;
    visibility: visible;
  }

  &.active &__content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  &__close {
    @include display-flex(flex-start, flex-start);
    cursor: pointer;
  }
}