<main>
  <div class="wrapper">
    <article class="flow">
      <h1>Box sizing effects on the box model</h1>
      <figure class="callout">
        <p>
          Now that the SVG uses a logical property for margin, it doesn’t matter which direction text is flowing—the margin will always be on the correct side.
        </p>
        <p>
          Toggle the <code>direction</code> to see it working.
        </p>
      </figure>
      <label class="toggle" for="toggle-element">
        <span class="toggle__label">Toggle direction</span>
        <input type="checkbox" role="switch" class="toggle__element" id="toggle-element" />
        <div class="toggle__decor" aria-hidden="true">
          <div class="toggle__thumb"></div>
        </div>
      </label>
      <div class="sample">
        <p>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M19,5h-2V3H7v2H5C3.9,5,3,5.9,3,7v1c0,2.55,1.92,4.63,4.39,4.94c0.63,1.5,1.98,2.63,3.61,2.96V19H7v2h10v-2h-4v-3.1 c1.63-0.33,2.98-1.46,3.61-2.96C19.08,12.63,21,10.55,21,8V7C21,5.9,20.1,5,19,5z M5,8V7h2v3.82C5.84,10.4,5,9.3,5,8z M12,14 c-1.65,0-3-1.35-3-3V5h6v6C15,12.65,13.65,14,12,14z M19,8c0,1.3-0.84,2.4-2,2.82V7h2V8z" />
          </svg>
          <span>CSS is really good</span>
        </p>
      </div>
    </article>
  </div>
</main>

:root {
  --direction: ltr;
}

.sample {
  direction: var(--direction);
}

.sample p {
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  font-size: 1.5em;
  padding: 0.5em;
  background: #f3f3f3;
  border: 1px solid var(--color-stroke);
}

.sample p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
  fill: var(--color-primary);
}

const toggle = document.querySelector('#toggle-element');

toggle.addEventListener('change', evt => {
  document.documentElement.style.setProperty(
    '--direction',
    evt.target.checked ? 'rtl' : 'ltr'
  );
});