<header class="header">
  <div class="header__title">
    <h1>
      <code>dir()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-dir-pseudo">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>

  <section class="example">
    <p>
      In this example, the <code>rtl</code> languages are highlighted:
    </p>
    <p class="support-warning">It looks like your browser does not suppport this feature. Try viewing it in <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>.</p>
    <div class="example__demo example__demo--dir">
      <p>Pleased to meet you.</p>
      <p lang="ar" dir="rtl">متشرف بمعرفتك</p>
      <p>The weather is nice today.</p>
      <p lang="ar" dir="rtl">מזג האוויר נחמד היום.</p>
    </div>
  </section>
  
</main>

// Demo
:dir(rtl) {
  background-color: var(--color-sand);
  border-right: 0.75rem solid var(--color-sand);
}


// Pen Setup
.example__demo--dir {
  font-size: var(--size-epsilon);
  
  p {
    color: var(--color-charade);
  }
}

onload = () => {
  const supportWarning = document.querySelector('.support-warning');

  if (navigator.userAgent.includes("Firefox")) {
    supportWarning.setAttribute('style', 'display: none;');
  }
}