/**
 * <modal>
 *
 * App-wide styles for our modals.
 */

[parasails-component='modal'] {
  -webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones
  [purpose='modal-dialog'] {
    z-index: 100;
    position: relative;
    max-width: 700px;
    [purpose='modal-content'] {
      max-width: 650px;
      [purpose='modal-close-button'] {
        .btn-reset();
        opacity: 0.6;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
  // Custom styles for the Bootstrap modal:
  // (Want to use Bootstrap's default styles? Just comment out the rest of the rules below)
  .petticoat {
    display: none;// 2022-12-11: mikermcneil: This is appearing as a dark aberration after changing up the modal so I'm hiding it
    position: fixed;
    width: 100%;
    height: 75px;// should cover topbar
    z-index: 50;
    left: 0px;
    top: 0px;
    background-color: #192147;
    opacity: 0.35;
  }
  .modal-content {
    border-radius: 8px;
    border: 1px solid #B3B6C1;
    background: #FFF;
    box-shadow: 0px 4px 16px 0px rgba(25, 33, 71, 0.25);

    /* elevation/modal */
    padding: 32px;
    .modal-header {
      border-bottom: none;
      display: block;
      position: relative;
      text-align: center;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      padding-top: 0px;
      .modal-title {
        font-weight: @bold;
      }
      .modal-intro {
        margin-left: auto;
        margin-right: auto;
        color: @text-muted;
        margin-bottom: 20px;
      }
      hr {
        margin-top: 25px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        width: 100px;
        height: 2px;
        border-top: 2px solid @brand;
      }
    }
    .modal-body {
      padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 0px;
      padding-right: 0px;
    }
    .modal-footer {
      padding-top: 25px;
      padding-bottom: 0px;
      padding-left: 0px;
      padding-right: 0px;
      margin-top: 10px;
    }
  }
}

// Modal backdrop styles are exposed globally here because this gets appended to the <body>
.modal-backdrop {
  background-color: #192147;
  &.show {
    opacity: 0.35;
  }
}
