@charset "utf-8";

.x-modal {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 99990;
  &__bg {
    background: rgba(0, 34, 54, 0.2);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.2s ease-out !important;
  }
  &__inner {
    width: 100%;
    background: #fafafa;
    box-shadow: 0 0 16px rgba(0, 39, 61, 0.05);
    position: relative;
    z-index: 2;
  }
  &.x-modal--init {
    opacity: 0;
  }
  &.x-modal--enter {
    .x-modal__bg {
      opacity: 1 !important;
    }
  }
  &.x-modal--leave {
    .x-modal__bg {
      opacity: 0 !important;
    }
  }
}