//code for modal

.modal {
  /// Usage: class="modal-content mmui-modal-content"
  .mmui-modal-content {
    // @extend .modal-content;
    //height: 100%;
    padding: 40px;

    .modal-header {
      border-bottom-style: none;

      .modal-title {
        font-family: $font-stack-serif;
        color: $mm-neutral-black;
        font-size: 3rem;
        line-height: 1;
        font-weight: 500;
      }

      .mmui-close {
        //not going to implement custom margins right now. take advantage of bootstrap's modal header and body paddings for now.
        // design asks for 8px above and to right of close button.
        // currently, going to let it be 10px to use bootstrap's system (that is not easy to override)

        //margin-bottom: 1.08rem; //40px - 19.2px (icon height) - 10px (padding above icon)

        position: relative;
        top: -37px;
        right: -35px;

        .mmui-modal-close-fa {
          font-size: 1.92rem;
          color: $mm-core-digital-blue-70;
          &:hover {
            color: $mm-core-digital-blue-80;
          }
        }
      }
    }

    .modal-body {
      @extend .mmui-body-copy;
      .mmui-modal-message-row {
        margin-top: 1.4rem; // design is 24px. The header above comes with margin-bottom of 10px. The difference is 10px.
        margin-bottom: 1.6rem; //design is 24px. The link below comes with 8px padding above. The difference is 16px.
        i {
          align-self: flex-start;
        }
        .mmui-modal-icon-success {
          font-size: 5rem;
          color: $mm-sem-pos-60;
        }
        .mmui-modal-icon-action {
          font-size: 5rem;
          color: $mm-sem-caution-60;
        }
        .mmui-modal-icon-error {
          font-size: 5rem;
          color: $mm-sem-neg-60;
        }
      }

      .mmui-modal-link-with-button {
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 2.64; //makes line height 30px. Meaning there is a 8px padding above the link.
        text-align: center;
        margin-top: 1.15rem; // (button height 45 - line height of link 22) / 2 = 11.5
        margin-right: 3.4rem;
      }

      /// Usage: class=".btn mmui-modal-link-button"
      .mmui-modal-link-button {
        @extend .mmui-link-button;
        margin-top: 0.8rem; //this is only added for the purposes of in a modal. Because when .mmui-modal-message-row is followed by a link, it has a 8px padding.
        // I want the links to have consistent spacing within the modal so that the text above can have consisten spacing on the bottom.
        margin-left: auto;
      }
    }

    .modal-footer {
      border-top-style: none;
      justify-content: flex-start;
    }
  }
}
.mmui-modal-inline {
  position: relative;

  .mmui-modal-content {
    box-shadow: $mm-boxshadow;
  }

  .modal {
    position: absolute;
    left: 0px;
    top: 0px;
    overflow: visible;
    width: fit-content;
    padding: 0px;

    .modal-dialog {
      margin: 0;
    }
  }
}