<h1>Scope Proximity</h1>
<p class="support">
  ⚠️ Your browser does not support the <code>@scope</code> rule.
  Try viewing this demo in Chrome Canary 
  with the <strong>experimental web platform features</strong> flag.
</p>
<div class="dark-theme">
<!--   <h2>with scope</h2> -->
  <p>The dark-theme link should be <a href="#">lightcyan</a></p>

  <div class="light-theme">
    <p>The light-theme link should be <a href="#">mediumvioletred</a></p>
    
    <div class="dark-theme">
      <p>The dark-theme link should be <a href="#">lightcyan</a></p>
    </div>
  </div>
  
  <p>
    With <code>@scope</code>,
    we can ensure that the 'nearer' scope wins,
    giving us the correct result no matter how these scopes are nested.</p>
</div>

<!-- <div class="no-scope dark-theme">
  <h2>no scope</h2>
  <p>The dark-theme link should be <a href="#">lightcyan</a></p>

  <div class="no-scope light-theme">
    <p>The light-theme link should be <a href="#">mediumvioletred</a></p>

    <div class="dark-theme">
      <p>The dark-theme link should be <a href="#">lightcyan</a></p>
    </div>
  </div>
  
  <p>
    Without <code>@scope</code>, 
    the dark-theme link color will always win 
    since it is defined later in the CSS,
    with the same specificity.
  </p>
</div>

<p>
  Scope <strong>proximity</strong>
  helps resolve conflicts when two scopes overlap.
  In this case, the nested/overlapping light and dark themes
  both define link colors using the same selector
  (and same specificity).
  Without scope, the later rule takes precedence.
  With scope, the 'closer' scope root has priority.
</p> -->

/* without scopes */
/* remove these in a supporting browser */
.light-theme a { color: mediumvioletred; }
.dark-theme a { color: lightcyan; }

/* with scopes */
@scope (.light-theme) {
  :scope {
    background: white;
    color: black;
  }
  a { color: mediumvioletred; }
}

@scope (.dark-theme) {
  :scope {
    background: black;
    color: white;
  }
  a { color: lightcyan; }
}

@scope (html) {
  .support { display: none; }
}


.light-theme,
.dark-theme {
  padding: 1em;
  margin: 1em 0;
  border: thin solid;
}

a:any-link { 
  border-left: 1em solid currentcolor;
  padding-left: 0.4em;
}

/* without scopes */
.no-scope.light-theme {
  background: white;
  color: black;
}

.no-scope.dark-theme {
  background: black;
  color: white;
}

.no-scope.light-theme a:any-link { color: mediumvioletred; }
.no-scope.dark-theme a:any-link { color: lightcyan; }

.support {
  border: medium solid red;
  color: maroon;
  padding: 1em;
}

body {
  padding: 1em;
  margin: 0 auto;
  max-width: 70ch;
}