<div class="demo-area">
  <form id="theme-picker">
    <fieldset>
      <legend>Theme picker</legend>
      <div>
        <input type="radio" name="theme-picker" value="pink" id="pink" />
        <label for="pink">Pink</label>
      </div>
      <div>
        <input type="radio" name="theme-picker" value="rainbow" id="rainbow" />
        <label for="rainbow">Rainbow</label>
      </div>
      <div>
        <input type="radio" name="theme-picker" value="bookish" id="neutral" />
        <label for="neutral">Bookish</label>
      </div>
      <div>
        <input type="radio" name="theme-picker" value="default" id="default" />
        <label for="default">Default</label>
      </div>
    </fieldset>
  </form>
  <div class="btn-section">
    <button class="demo-btn">Click Me</button>
  </div>
</div>

@container style(--theme: pink) {
  .demo-btn {
    background: linear-gradient(45deg, pink, violet);
    border: 4px double #f452dc;
  }
}

@container style(--theme: rainbow) {
  .demo-btn {
    background: linear-gradient(60deg, tomato, orange, yellow, lightgreen, lightblue);
    border: none;
    box-shadow: 3px 3px 0 red, 6px 6px 0 orange, 9px 9px 0 yellow, 12px 12px 0 lightgreen, 15px 15px 0 lightblue;
  }
}

@container style(--theme: bookish) {
  .demo-btn {
    font-family: serif;
    font-weight: 400;
    padding: 0.8rem;
    text-transform: capitalize;
    background: beige;
    border-color: tan;
    color: saddlebrown;
  }
}

@layer base {
  .demo-btn {
    border: 1px solid black;
    color: black;
    padding: 0.5rem;
    background: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 1.2rem;
  }

  .btn-section {
    display: grid;
    place-items: center;
  }

  .demo-area {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  fieldset {
    display: grid;
    gap: 1rem;
    margin: 1rem;
    padding: 1rem;
  }

  body {
    font-family: system-ui;
    font-size: 20px;
  } 
}

const themePicker = document.querySelector('#theme-picker')
const btnParent = document.querySelector('.btn-section');

themePicker.addEventListener('input', (e) => {
  btnParent.style.setProperty('--theme', e.target.value);
})