/**
 * <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: 800px;
    [purpose='modal-content'] {
      margin-top: 100px;
      max-width: 480px;
      [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;
    position: fixed;
    width: 100%;
    height: 75px;// should cover topbar
    z-index: 50;
    left: 0px;
    top: 0px;
    background-color: @accent-white;
  }
  .modal-content {
    border-color: @accent-white;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background-clip: border-box;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
    .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: #8b8fa2;
  &.show {
    opacity: 0.45;
  }
}
