@if $useModalComponent == true {
  .Modal {
    @include aligner(center, start);
  }
  .mod-transparent-layer {
    @extend .fixed;
    @extend .left-0;
    @extend .right-0;
    @extend .bottom-0;
    @extend .top-0;
    @extend .height-100;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9998;
  }
  .mod-box {
    @extend .fixed;
    z-index: 9999;
    @extend .mar-15-x;
    top: 8%;
    left: calc(50% - 640px / 2);
    width: 640px;
    max-height: calc(100vh - 60px);
    overflow-x: hidden;
    overflow-y: auto;
    @extend .bg-white;
    border-radius: 2px;
    box-shadow: 1px 2px 8px rgba($colorWhiteDarkest, .3);
    &::-webkit-scrollbar {
      width: 4px;
      background-color: rgba($colorWhiteDark, .5);
    }
    &::-webkit-scrollbar-thumb {
      background-color: $colorFirst;
    }
  }
  .mod-header {
    @include padding(25, 20);
    @extend .bg-first;
    @include aligner(between, center)
  }
  .mod-title {
    @extend .fc-white;
    text-transform: uppercase;
  }
  .mod-close-icon {
    &:before {
      @extend .fc-white;
      font-size: 36px;
      cursor: pointer;
    }
  }
  .mod-body {
    @include padding(25, 20);
  }
  .mod-footer {
    @include padding(25, 20);
    border-top: 1px solid $colorWhiteDarken;
  }
}
