/*#############################################################################
# MODALS
#############################################################################*/


.modal-wrapper {
  background: rgba(#434448, 0.9);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
}

.modal-box {
  background: #fff;
  width: calc(100vw - 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  @include border-radius(12px);
  @include box-shadow(-10px 10px 20px 0 rgba(black, 0.05));
  @include transform(translate(-50%, -50%));

  // Modal Box Sizes
  &.large {
    @include responsive($breakpoint-medium) {
      width: 640px;
    }
  }

  &.extra-large {
    @include responsive($breakpoint-xmedium) {
      width: 860px;
    }
  }

  &.small {
    @include responsive($breakpoint-medium) {
      width: 440px;
    }
  }

  // Centered text
  &.centered {
    text-align: center;
  }

  // Modal Box Elements

  header {
    border-bottom: 2px solid #F5F5F7;
    padding: 10px 60px 10px 10px;
    position: relative;

    &.centered-header {
      padding: 20px 40px 20px 40px;
      text-align: center;

      .modal-title {
        padding-right: 0px;
      }
    }

    .modal-title {
      margin: 0;
      padding-right: 50px;
    }

    .close-modal {
      color: $color-secondary;
      font-size: rem-calc(30px);
      font-weight: 900;
      position: absolute;
      top: 50%;
      right: 20px;
      @include transform(translateY(-50%));

      @include responsive($breakpoint-medium) {
        right: 40px;
      }
    }

    .modal-header-action {
      position: absolute;
      top: 50%;
      right: 20px;
      @include transform(translateY(-50%));

      @include responsive($breakpoint-medium) {
        right: 30px;
      }
    }

    &.has-icon {
      padding: 20px 90px;

      img.icon {
        position: absolute;
        top: 50%;
        left: 30px;
        @include transform(translateY(-50%));
      }
    }
  }

  .body-container {
    overflow-y: auto;
    max-height: 350px;
  }

  .modal-body {
    padding: 20px 10px;

    > :last-child {
      margin-bottom: 0;
    }

    &.secondary {
      background-color: #fafafb;
    }

    &.fixed-height {
      overflow-y: auto;
      max-height: 350px;
    }

    .modal-body-title {
      margin: 0 0 20px 0;
    }
  }

  .modal-email {
    padding: 0 10px 10px;

    .email-to,
    .email-subject {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-column-gap: 8px;
      align-items: center;
      border-bottom: 2px solid #E9EAEA;
      padding: 12px 0;

      .label {
        grid-column: 1;
        grid-row: 1;
        color: $color-secondary;
        font-weight: 900;
      }

      .emails,
      .subject {
        grid-column: 2;
        grid-row: 1;
        color: $color-text;
      }

      .email {
        display: inline-block;
        background-color: #E4E4FF;
        padding: 3px 5px;
        @include border-radius(4px);
      }

      .subject {
        border: none;

        &:focus {
          outline: 0;
        }
      }
    }

    textarea.email-body {
      border: none;
      width: 100%;
      height: 250px;
      padding: 15px 0 0;
      resize: none;

      &:focus {
        outline: 0;
      }
    }
  }

  .modal-warning {
    background-color: #FFFFAB;
    border-bottom: 2px solid #F5F5F7;
    padding: 4px 0;

    p {
      font-size: rem-calc(14px);
      margin: 0;
    }
  }

  footer {
    border-top: 2px solid #F5F5F7;
    padding: 10px;
    @include pie-clearfix;

    &.centered-actions {
      display: flex;
      justify-content: center;
    }

    .button {
      margin: 0;

      &.left {
        @include float(left);
      }

      &.right {
        @include float(right);
      }
    }

    @include responsive-max($breakpoint-small) {
      text-align: center;

      .button {
        &.left {
          display: flex;
          align-items: center;
          margin-right: 15px;
        }
      }
    }
  }

  @include responsive($breakpoint-medium) {
    width: 580px;

    header {
      padding: 20px 90px 20px 40px;
    }

    .modal-body {
      padding: 30px 40px;
    }

    .modal-email {
      padding: 0 20px 20px;
    }

    footer {
      padding: 20px 40px;
    }
  }
}