//
// Modals
// =============================================================================

.modal {
  background-color: rgba(getColor(background, dark), .5);
  bottom: 0;
  left: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity ease-in $transition-duration;
  z-index: 1000002;

  &:target {
    opacity: 1;
    pointer-events: auto;
  }
}

.modal-container {
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .1);
  margin: 15% auto;
  position: relative;
  width: 90%;

  @media (min-width: $bp-small) { width: 526px; }
}

.modal-header {
  background-color: getColor(base, primary);
  color: white;
  padding: unitSize(2) 1.5em;

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6,
  .giga, .mega, .kilo {
    color: white;
    display: inline;
  }
}

.modal-body,
.modal-footer {
  background-color: white;
  margin-top: 0;
  padding: unitSize(3) 2.5em;
}

.modal-body {
  p { margin-bottom: 0; }

  p + p { margin-bottom: unitSize(3, -4); }
}

.modal-footer {
  border-top: 1px solid getColor(base, lines);
  font-size: pxToEm(14);
  margin: 0;

  p { margin-bottom: 0; }
}

.modal-close {
  color: white;
  float: right;
  margin: 0;
  opacity: .5;
  transition: opacity $transition-duration;

  &:hover { opacity: 1; }

  &:hover,
  &:focus { text-decoration: none; }
}


//
// Modifiers
// ---------

// Small
.modal--small {
  .modal-container {
    @media (min-width: $bp-small) { width: 360px; }
  }
}

// Large
.modal--large {
  .modal-container {
    @media (min-width: $bp-small) { width: 760px; }
  }
}

// Full-width
.modal--full {
  .modal-container {
    @media (min-width: $bp-small) { width: 90%; }
  }
}

// Flat
.modal--flat {
  .modal-header {
    background-color: white;
    color: getColor(text, primary);
    padding: 1.5em 2.5em 0;

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 { color: getColor(text, primary); }
  }

  .modal-close {
    color: getColor(text, primary);
    line-height: 1;
    margin: 0;
  }
}
