<div class="container">
  <h1>CSS @scope</h1>
  <div class="button-label">This button is outside the card, uses general styling</div>
  <button>Button</button>
  <div class="card">
    <div class="button-label">This button is inside the card, but outside the cms-content</div>
    <button>Button</button>

    <div class="cms-content">
      <h3>CMS Content Area</h3>
      <p>This could for example be content from a cms where we want to scope buttons differently.</p>
      <div class="button-label">CMS Content Button:</div>
      <button>Button</button>
      <p>Notice that this button did not have the purple border as well. This is due to the scoping <code>@scope (.card) to (.cms-content)</code> telling that those styles should not apply inside .cms-content</p>

    </div>

    <div class="button-label">Another Primary UI Button:</div>
    <button>Button</button>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap");

@layer presentation, demo;

@layer demo {
  button {
    background-color: #6200ee;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    margin: 5px 0;
  }

  @scope (.card) to (.cms-content) {
    button {
      background-color: white;
      color: #6200ee;
      border: 2px solid #6200ee;
    }
  }

  @scope (.cms-content) {
    button {
      /* Style for buttons inside CMS content */
      background-color: #bb86fc;
      color: #333;
    }
  }
}

@layer presentation {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    font-family: "Winky Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-size: 1.1rem;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
  }

  .container {
    max-width: 900px;
    margin-inline: auto;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  h1 {
    color: #6200ee;
    margin-top: 0;
  }

  .cms-content {
    background-color: #f3e5f5;
    padding: 15px;
    border-radius: 4px;
    margin: 15px 0;
    border-left: 4px solid #bb86fc;
  }

  code {
    background-color: #eee;
    padding: 2px 4px;
    border-radius: 3px;
    font-family: monospace;
  }

  .button-label {
    font-size: 1rem;
    color: #444;
    margin-bottom: 3px;
  }

  .card {
    border: 3px solid #666;
    padding: 20px;
    border-radius: 3px;
  }
}