@if $useModalComponent == true {
  .Modal {
    @include aligner(center, start);
    &.large {
      .mod-box {
        width: 960px;
        left: calc(50% - 960px / 2);
      }
    }
  }
  .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;
    margin-top: 8vh;
    margin-bottom: 8vh;
    left: calc(50% - 640px / 2);
    width: 640px;
    max-height: calc(100vh - 16vh);
    overflow-x: hidden;
    overflow-y: auto;
    @extend .bg-white;
    @extend .top-0;
    box-shadow: 5px 3px 15px -2px rgba($colorBlack, .5);
    &::-webkit-scrollbar {
      width: 4px;
      background-color: rgba($colorWhiteDark, .5);
    }
    &::-webkit-scrollbar-thumb {
      background-color: $colorFirst;
    }
  }
  .mod-header {
    @include padding(25, 20);
    @extend .bg-first;
    @extend .fc-white;
    @include aligner(start, center);
    text-transform: capitalize;
  }
  .mod-close-icon {
    @extend .absolute;
    right: 15px;
    top: 15px;
    @extend .fa-times;
    &:before {
      @extend .fa;
      @extend .fc-white;
      font-size: 18px;
      cursor: pointer;
    }
  }
  .mod-body {
    @include padding(25, 20);
  }
  .mod-footer {
    @include padding(25, 20);
    border-top: 1px solid $colorWhiteDarken;
  }
}
