$namespace: re-modal;
$modalFade: #{$namespace}-fade;

.#{$namespace} {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  overflow: auto;
  outline: 0;

  &.#{$namespace}-center {
    text-align: center;

    &:before {
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
      content: '';
    }

    .#{$namespace}-content {
      top: 0;
      text-align: left;
      display: inline-block;
      vertical-align: middle;
    }
  }

  &-content {
    position: relative;
    background-color: #fff;
    max-width: calc(100vw - .3rem);
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform 300ms, opacity 300ms cubic-bezier(.7, .3, .1, 1);
    z-index: 101;
  }

  &-title {
    position: relative;
    width: 100%;

    .#{$namespace}-times {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  &-times {
    position: absolute;
    top: .12rem;
    right: .12rem;
    font-size: .15rem;
    color: #b0b0b0;
    cursor: pointer;

    svg {
      display: block;
    }

    &:hover {
      color: #333;
    }
  }
}

@media only screen and (max-width: 767px) {
  .#{$namespace}-content {
    width: calc(100vw - .3rem);
  }
}


.#{$modalFade} {
  &-enter, &-appear {
    transform: translate3d(0, -30px, 0);
    opacity: 0
  }

  &-enter-active, &-appear-active {
    transform: translateZ(0);
    opacity: 1
  }

  &-enter-done {
    transform: translateZ(0);
    opacity: 1
  }

  &-exit {
    transform: translateZ(0);
    opacity: 1
  }

  &-exit-active {
    transform: translate3d(0, -30px, 0);
    opacity: 0
  }

  &-exit-done {
    display: none;
  }
}