@import "mixins/bem-mixin";
@import "common/variable";

@include b(dialog) {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: $dialog;
  @include e(background) {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.5;
    background: #000;
    z-index: $dialog-background;
  }
  @include e(wrapper) {
    background: #fff;
    position: relative;
    z-index: $dialog-wrapper;
    @media screen and (max-width: 700px) {
      width: 450px;
    }
    @media screen and (max-width: 980px) {
      width: 550px;
    }
    @media screen and (min-width: 981px) {
      width: 640px;
    }
    margin: 60px auto 0;
    border-radius: 5px;
    box-shadow: 0 0 3px #ccc;
    @include e(header) {
      padding: 15px;
      font-size: 20px;
      font-weight: bold;
      border-bottom: 1px solid $third-level-color;
      position: relative;
      color: $first-level-color;
      @include e(close) {
        right: 20px;
        position: absolute;
        color: $third-level-color;
        @include pseudo(hover) {
          color: $first-level-color;
          cursor: pointer;
        }
      }
    }
    @include e(body) {
      padding: 15px;
      color: $first-level-color;
    }
    @include e(footer) {
      padding: 15px;
      border-top: 1px solid $third-level-color;
      text-align: right;
      color: $first-level-color;
    }
  }
}

.dialog-enter-active {
  animation: dialog-enter 0.3s ease-in-out;
}

.dialog-leave-active {
  animation: dialog-enter 0.3s reverse ease-in-out;
}

@keyframes dialog-enter {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}