<!DOCTYPE html>
<!--
 | This demo demonstrates how scroll container should behave in RTL mode.
 -->
<html>
  <head>
    <style>
      body {
        background-color: rgb(25,25,25);
        color: rgb(200,200,200);
        width: 1920px;
        height: 720px;
      }

      .vscroll {
        overflow: auto;
        position: absolute;
        transform: translate(100px,100px);
        background-color: rgb(50,50,50);
        width: 1080px;
        height: 520px;
      }

      .hscroll {
        overflow: auto;
        position: relative;
        background-color: rgb(75, 75, 75);
        width: 1080px;
        height: 320px;
      }

      /*
       * focusItem is used as the actual focusable item. Its dimensions are
       * static so that the underlying SbUiNavigation system knows how much to
       * scroll to ensure it is fully visible. The scroll animation is usually
       * calculated to bring the to-be-focused item into view, but if that item
       * is resized after the animation starts, then the animation may no
       * longer end with the larger item in full view.
       */
      .focusItem {
        overflow: hidden;
        position: absolute;
        width: 300px;
        height: 300px;
        outline: none;
      }

      /*
       * focusContent will react to focus changes. Its size will grow when
       * its parent receives focus.
       */
      .focusContent {
        overflow: hidden;
        margin: 20px;
        border: 5px solid rgb(0,0,0);
        width: 250px;
        height: 250px;
        line-height: 250px;
        text-align: center;
        vertical-align: middle;
        font-size: 100px;

        /*
         * The user may be scrolling through items quickly. Use a transition
         * delay so that the transition is shown once the user settles on a
         * focus item.
         */
        transition: transform 0.5s;
        transition-delay: 0.1s;
      }

      /*
       * Update focusContent when the parent is focused.
       */
      .focusItem:focus .focusContent {
        background-color: rgb(240,240,240);
        color: rgb(0,0,0);
        transform: -cobalt-ui-nav-focus-transform() scale(1.1);
      }

      /*
       * Add a spotlight to focusContent when the parent is focused.
       */
      .focusItem:focus .focusContent::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 30%);
        transform: -cobalt-ui-nav-spotlight-transform();
      }
    </style>
  </head>

  <body class="body">
    <div class="vscroll">
      <div class="hscroll" dir="rtl">
        <!--
         | translateX() should be honored when computing items' position in rtl mode.
         | The right edge of A0 should be 50px from the right edge of the container when the
         | page is rendered.
         | User should be able to scroll items using the entire width of the container,
         | meaning A0 should be visibly translated from the initial position to the right edge
         | of the container.
         | A0 should stop 50px from the right edge of the container when scrolling back to
         | A0.
         -->
        <div id="start" class="focusItem" tabindex="-2" style="transform: translateX(-50px)">
          <div class="focusContent">A0</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-350px)">
          <div class="focusContent">A1</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-650px)">
          <div class="focusContent">A2</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-950px)">
          <div class="focusContent">A3</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-1250px)">
          <div class="focusContent">A4</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-1550px)">
          <div class="focusContent">A5</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-1850px)">
          <div class="focusContent">A6</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-2150px)">
          <div class="focusContent">A7</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-2450px)">
          <div class="focusContent">A8</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-2750px)">
          <div class="focusContent">A9</div>
        </div>
      </div>
      <div class="hscroll" dir="rtl">
        <div class="focusItem" tabindex="-2" style="transform: translateX(-50px)">
          <div class="focusContent">B0</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-350px)">
          <div class="focusContent">B1</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-650px)">
          <div class="focusContent">B2</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-950px)">
          <div class="focusContent">B3</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-1250px)">
          <div class="focusContent">B4</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-1550px)">
          <div class="focusContent">B5</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-1850px)">
          <div class="focusContent">B6</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-2150px)">
          <div class="focusContent">B7</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-2450px)">
          <div class="focusContent">B8</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(-2750px)">
          <div class="focusContent">B9</div>
        </div>
      </div>
    </div>
  </body>
  <script>
    window.onload = function() {
      document.getElementById("start").focus();
    }
  </script>
</html>