/**
 * Trigger styling
 */
[data-modal-open][hidden] {
  display: none;
}

/**
 * When a modal dialog is open, don't allow scrolling of content
 * beneath (on desktop). Also useful in negating instances of
 * double scroll bars.
 * (browser window + dialog if long enough content)
 */
body.modal-open {
  overflow: hidden;
}

/**
 * Modal Dialog base styling
 */
.js [data-modal],
.a11y-modal {
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 0;
  bottom: 0;
  box-shadow: 0 0 1800px 1800px rgba(0, 0, 0, .75);
  left: 0;
  margin: auto;
  max-height: 100%;
  opacity: 1;
  overflow: auto;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateY(0%);
  visibility: visible;
  width: 45%;
  z-index: 10; /* this should be more than enough... */
}

.aria-modal-document {
  padding: 20px 40px 20px 20px;
}

.js [data-modal],
.a11y-modal {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}


/**
 * To allow for CSS animations, hidden modal dialogs are
 * not set to display: none, but rather the following rule
 * set, in combination with the dialog's default
 * position: fixed, will keep dialogs hidden from
 * all users until opened.
 *
 * This also solves an issue with iOS VO + Safari not allowing
 * modal dialogs to be focused, if the dialog is initially
 * set to "display: none".
 */
.js [data-modal][hidden]
.a11y-modal[hidden] {
  display: block;
  opacity: 0;
  pointer-events: none;
  transform: translateY(15vh);
  visibility: hidden;
}

.a11y-modal__close-btn {
  border: none;
}

.is-icon-btn {
  background: none;
  border: none;
  height: 1em;
  padding: 0;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 1em;
}

[data-modal-x] {
  border-right: 2px solid #808080;
  bottom: 0;
  display: block;
  height: 1em;
  left: 0;
  margin: auto;
  pointer-events: none;
  position: relative;
  right: 0;
  top: 0;
  transform: rotate(45deg);
  width: 1px;
}

[data-modal-x]:after {
  border-right: 2px solid #808080;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
  width: 100%;
}

.aria-modal-content {
  margin-bottom: 20px;
}

.aria-modal-content::-webkit-scrollbar {
  width: 8px;
  border: none;
}

::-webkit-scrollbar-thumb {
  background: #e6e6e6;
  border-radius: 5px;
  transition: all 0.5s;
}
::-webkit-scrollbar-thumb:hover {
  background: #808080;
  transition: all 0.5s;
}

@media (max-width: 1200px) {
  .a11y-modal {
    width: 65%;
  }
}

@media screen and (max-width: 700px) {
  .a11y-modal {
    width: calc(100VW - 90px);
  }
  .aria-modal-document {
    height: calc(100VH - 90px);
  }
}