@import "branding";
@import "mixins";

dialog
, .reveal-modal {
  border: none;
  outline: none;
  padding: 30px 20px 0 20px;
  border-bottom: 30px solid white;
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 260px;

  // Not working yet - want a nice gradient shadow when there is overflow - needs JS too
  // &:after
  //   @include elipse-shadow(0 0 40px rgba(0, 0, 0, 0.8))

  // Reveal.js break point:
  // @media only screen and (max-width: 40.063em)

  // Small - when modal IS full screen
  @media only screen and (max-width: 640px) {
    left: 0;
    max-height: 100%;
    position: absolute !important;
    top: 0;
  }

  // Medium and up - when modal IS NOT full screen
  @media only screen and (min-width: 641px) {
    max-height: 90%;
    top: 5%;
  }
}

.reveal-modal-bg {
  background-color: rgba(0, 0, 0, 0.85);
  position: fixed;
}

@mixin close-button($top) {
  background-color: rgba(205, 205, 205, 0.65);
  color: #666;
  font-size: 2rem;
  padding: 0.45rem;
  text-shadow: none;
  z-index: 9999999;
  top: $top;

  @include border-radius(999999rem);

  &:hover, &:active, &:focus {
    background-color: rgba(205, 205, 205, 1);
    color: #333;
  }
}

dialog .close-reveal-modal
, .reveal-modal .close-reveal-modal {
  @include close-button(0.25rem);
  right: 0.25rem;
}

dialog .mobile-close-reveal-modal
, .reveal-modal .mobile-close-reveal-modal {
  @include close-button(auto);
  left: 90%;
  position: relative;

  @media only screen and (min-width: 40.063em) {
    display: none;
  }
}

// Prevent body from scrolling when a modal is open
body.modal-open {
  overflow: hidden;
}