<div class="card">
  <div class="content-wrapper">
    <h2 class="heading">CSS Modal</h2>
    <p>This demo shows how to open a modal without using JavaScript. While it's a cool trick, it's not 100% accessible. JavaScript is needed to set focus on the modal and to create a focus trap.</p>
  </div>
  <a href="#modal" role="button" class="button button__link">Modal Trigger</a>
</div>

<!-- Modal -->
<div class="modal-wrapper" id="modal">
  <div class="modal-body card">
    <div class="modal-header">
      <h2 class="heading">Modal Header</h2>
      <a href="#!" role="button" class="close" aria-label="close this modal">
        <svg viewBox="0 0 24 24">
          <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z" />
        </svg>
      </a>
    </div>
    <p>Simple example using the <code>:target</code> selector to open a modal.</p>
  </div>
  <a href="#!" class="outside-trigger"></a>
</div>

$opacity-transition: opacity $speed ease-in-out;

.modal-header {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
}

.close {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  height: 16px;
  text-decoration: none;
  width: 16px;

  svg {
    width: 16px;
  }
}

.modal-wrapper {
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

#modal {
  opacity: 0;
  transition: $opacity-transition;
  visibility: hidden;

  &:target {
    opacity: 1;
    visibility: visible;

    .modal-body {
      opacity: 1;
      transform: translateY(1);
    }
  }

  .modal-body {
    max-width: 500px;
    opacity: 0;
    transform: translateY(-100px);
    transition: $opacity-transition;
    width: 100%;
    z-index: 1;
  }
}

.outside-trigger {
  bottom: 0;
  cursor: default;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.button__link {
  text-decoration: none;
}