@import "./var.scss";
@import "./mixin.scss";

@include b(modal) {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  visibility: hidden;
  transition: visibility .3s ease-in;

  @include e(overlay) {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 1;
    background-color: rgba($color: #000, $alpha: 0.3);
    transition: all .3s ease-in;
  }

  @include e(container) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all .3s ease-in;
    background: white;
    padding: 16px;
    border-radius: 10px;
  }

  @include e(header) {
    padding-bottom: 16px;
  }

  @include e(body) {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  @include e(footer) {
    padding-top: 16px;
  }

  @include when(active) {
    visibility: visible;

    .dzq-modal__overlay,
    .dzq-modal__container {
      opacity: 1;
    }

    .dzq-modal__container {
      transform: translate(-50%, -50%) scale(1);
    }
  }
}