$drawer-perfix: $lib-name + "-drawer";
$animation-perfix: $drawer-perfix + "-animation";
$type-list: "left", "right", "top", "bottom";

@each $i in $type-list {
  .#{$animation-perfix}-#{$i}-enter-active {
    animation: modal-down-show $animation-time;
    .#{$lib-name}-modal-box-content-wrapper {
      animation: modal-scale-#{$i}-show $animation-time;
    }
  }
  .#{$animation-perfix}-#{$i}-leave-active {
    animation: modal-down-hide $animation-time;
    .#{$lib-name}-modal-box-content-wrapper {
      animation: modal-scale-#{$i}-hide $animation-time;
    }
  }
}

.#{$lib-name}-modal .#{$drawer-perfix} {
  z-index: 101;
  @each $i in $type-list {
    &.#{$drawer-perfix}-#{$i} .#{$lib-name}-modal-box-content-wrapper {
      transform: inherit;
      background: $background-color-base;
      border-radius: 0;
      @if $i == "left" {
        right: initial;
        top: 0;
        bottom: 0;
        left: 0;
      }
      @if $i == "right" {
        right: 0;
        top: 0;
        bottom: 0;
        left: initial;
      }
      @if $i == "top" {
        right: 0;
        top: 0;
        bottom: initial;
        left: 0;
      }
      @if $i == "bottom" {
        right: 0;
        top: initial;
        bottom: 0;
        left: 0;
      }
      .#{$lib-name}-modal-box-content {
        @if $i == "left" {
          height: 100%;
        }
        @if $i == "right" {
          height: 100%;
        }
        @if $i == "top" {
          width: 100%;
        }
        @if $i == "bottom" {
          width: 100%;
        }
      }
    }
  }

  .#{$lib-name}-modal-box-close {
    display: none;
  }
  .msk {
    background-color: transparent;
  }
}

@keyframes modal-down-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes modal-down-hide {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes modal-scale-left-show {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes modal-scale-left-hide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes modal-scale-right-show {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes modal-scale-right-hide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes modal-scale-top-show {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes modal-scale-top-hide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes modal-scale-bottom-show {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes modal-scale-bottom-hide {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}