<div class="content">
      <div class="content__container">
        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: default</h3>
            <div class="btn-spacer">
              <button>Option 1</button>
              <button>Option 2</button>
              <button class="rs-btn--selected">Option 3</button>
              <button disabled>Disabled</button>
              <button class="rs-btn--selected" disabled>Disabled</button>
            </div>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: red</h3>
            <div class="btn-spacer">
              <button class="rs-btn--red rs-btn--selected">Option 1</button>
              <button class="rs-btn--red">Option 2</button>
              <button class="rs-btn--red">Option 3</button>
              <button class="rs-btn--red" disabled>Disabled</button>
              <button class="rs-btn--red rs-btn--selected" disabled>Disabled</button>
            </div>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: blue</h3>
            <div class="btn-spacer">
              <button class="rs-btn--blue">Option 1</button>
              <button class="rs-btn--blue rs-btn--selected">Option 2</button>
              <button class="rs-btn--blue">Option 3</button>
              <button class="rs-btn--blue" disabled>Disabled</button>
              <button class="rs-btn--blue rs-btn--selected" disabled>Disabled</button>
            </div>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: green</h3>
            <div class="btn-spacer">
              <button class="rs-btn--green">Option 1</button>
              <button class="rs-btn--green">Option 2</button>
              <button class="rs-btn--green rs-btn--selected">Option 3</button>
              <button class="rs-btn--green" disabled>Disabled</button>
              <button class="rs-btn--green rs-btn--selected" disabled>Disabled</button>
            </div>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: black</h3>
            <div class="btn-spacer">
              <button class="rs-btn--black">Option 1</button>
              <button class="rs-btn--black rs-btn--selected">Option 2</button>
              <button class="rs-btn--black">Option 3</button>
              <button class="rs-btn--black" disabled>Disabled</button>
              <button class="rs-btn--black rs-btn--selected" disabled>Disabled</button>
            </div>
        </div>

        <hr style="margin: 4em 0;">

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: default, small</h3>
            <button class="rs-btn--small">Option 1</button>
            <button class="rs-btn--small">Option 2</button>
            <button class="rs-btn--small rs-btn--selected">Option 3</button>
            <button class="rs-btn--small" disabled>Disabled</button>
            <button class="rs-btn--small rs-btn--selected" disabled>Disabled</button>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: red, small</h3>
            <button class="rs-btn--red rs-btn--small rs-btn--selected">Option 1</button>
            <button class="rs-btn--red rs-btn--small">Option 2</button>
            <button class="rs-btn--red rs-btn--small">Option 3</button>
            <button class="rs-btn--red rs-btn--small" disabled>Disabled</button>
            <button class="rs-btn--red rs-btn--small rs-btn--selected" disabled>Disabled</button>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: blue, small</h3>
            <button class="rs-btn--blue rs-btn--small">Option 1</button>
            <button class="rs-btn--blue rs-btn--small rs-btn--selected">Option 2</button>
            <button class="rs-btn--blue rs-btn--small">Option 3</button>
            <button class="rs-btn--blue rs-btn--small" disabled>Disabled</button>
            <button class="rs-btn--blue rs-btn--small rs-btn--selected" disabled>Disabled</button>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: green, small</h3>
            <button class="rs-btn--green rs-btn--small">Option 1</button>
            <button class="rs-btn--green rs-btn--small">Option 2</button>
            <button class="rs-btn--green rs-btn--small rs-btn--selected">Option 3</button>
            <button class="rs-btn--green rs-btn--small" disabled>Disabled</button>
            <button class="rs-btn--green rs-btn--small rs-btn--selected" disabled>Disabled</button>
        </div>

        <div style="margin: 2em;">
            <h3 style="margin: 1em 0;">Button theme: black, small</h3>
            <button class="rs-btn--black rs-btn--small">Option 1</button>
            <button class="rs-btn--black rs-btn--small rs-btn--selected">Option 2</button>
            <button class="rs-btn--black rs-btn--small">Option 3</button>
            <button class="rs-btn--black rs-btn--small" disabled>Disabled</button>
            <button class="rs-btn--black rs-btn--small rs-btn--selected" disabled>Disabled</button>
        </div>

        <hr style="margin: 4em 0;">

        <div>
          <h3>Buttons within &lt;p&gt; blocks</h3>
          <p>We assume that content within &lt;p&gt; blocks will be text'ish. Therefore we style base component (like
             &lt;buttons&gt;) with a <strong>default margin</strong> so that they fit within the text flow.

             <button>Option 1</button>
             <button class="rs-btn--red">Option 2</button>
             <button class="rs-btn--green">Option 3</button>
             <button class="rs-btn--blue">Option 4</button>
             <button class="rs-btn--black">Option 5</button>

             The same works with small buttons, of course:

             <button class="rs-btn--small">Option 1</button>
             <button class="rs-btn--red rs-btn--small">Option 2</button>
             <button class="rs-btn--green rs-btn--small">Option 3</button>
             <button class="rs-btn--blue rs-btn--small">Option 4</button>
             <button class="rs-btn--black rs-btn--small">Option 5</button>
          </p>
        </div>

        <hr style="margin: 4em 0;">

        <div style="margin: 2em;">
          <h3 style="margin: 1em 0;">Icon Button theme: default</h3>

          <div style="display: flex; flex-direction: column; justify-content: space-between; margin-left: 150px; width: 200px; height: 200px;">

            <a class="rs-icon-btn">
              <div class="rs-icon-btn__icon__wrapper">
                <div class="rs-icon-btn__icon__wrapper__padding">
                  <div class="rs-icon-btn__icon -rs-icon-github"></div>
                </div>
              </div>
              <div class="rs-icon-btn__label">
                <div>Github</div>
              </div>
            </a>

            <a class="rs-icon-btn">
              <div class="rs-icon-btn__icon__wrapper">
                <div class="rs-icon-btn__icon__wrapper__padding">
                  <div class="rs-icon-btn__icon -rs-icon-google"></div>
                </div>
              </div>
              <div class="rs-icon-btn__label">
                <div>Google</div>
              </div>
            </a>

            <a class="rs-icon-btn">
              <div class="rs-icon-btn__icon__wrapper">
                <div class="rs-icon-btn__icon__wrapper__padding">
                  <div class="rs-icon-btn__icon -rs-icon-slack"></div>
                </div>
              </div>
              <div class="rs-icon-btn__label">
                <div>Slack</div>
              </div>
            </a>

          </div>
        </div>
        
        <hr style="margin: 4em 0;">

        <div style="margin: 2em;">
          <h3 style="margin: 1em 0;">Danger button theme: default</h3>

          <div style="display: flex; justify-content: center; width: 500px;">

            <button class="rs-danger-btn">
              Remove All
            </button>

          </div>
        </div>
        
        <hr style="margin: 4em 0;">
        
        <div>
          <h3>Slider</h3>
          <input type='range' value='42' min='5' max = '50'/>
        </div>

        <div>
          <h3>Progress</h3>
          <input type='range' class='progress change' value='42' disabled/>
        </div>

        <div>
          <h3>Progress - Animated</h3>
          <input type='range' class='progress animated change' value='32' disabled/>
        </div>

        <div>
          <h3>Progress - Intermediate</h3>
          <input type='range' class='progress animated intermediate change' value='32' disabled/>
        </div>

        <hr style="margin: 4em 0;">

        <div>
          <h3>Input Fields</h3>
            <form accept-charset="UTF-8" action="/claim" method="get">
              <input type="text" name="q" placeholder="Placeholder" autocapitalize="off">
              <button>Claim</button>
            </form>
        </div>

        <div>
            <input type="text" name="q" placeholder="Disabled" disabled>
            <button disabled>Disabled</button>
        </div>

        <hr style="margin: 4em 0;">

        <div>
            <h3>Legacy Buttons</h3>
            <button class="danger">Danger</button>
            <button class="danger" disabled>Disabled</button>
        </div>

        <hr style="margin: 4em 0;">
      </div>
    </div>

    <div class="style-switcher">
      <button onclick="useTheme('light');return false;" class="danger">Light Theme</button>
      <button onclick="useTheme('dark');return false;" class="danger">Dark Theme</button>
      <button onclick="RedsiftCore.cssDisableSelection()" class="danger">Disable Selection</button>
    </div>

.content__container {
  padding: 1em;

  > div {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

.content__container > div {
  margin: 1em;
}

.btn-spacer > button {
    margin-bottom: 1em;
  }
}

// One-time
RedsiftCore.Sliders.initAllRanges();

// Get the sliders moving
var r = document.querySelectorAll('.change');
for (var i = 0; i < r.length; i++) {
  var input = r[i];
  (function(control, idx) {
    setInterval(function() {
      var value = Math.random() * 100;
      RedsiftCore.Sliders.setValue(control, value);
    }, 1000);
  })(input, i);
}

function useTheme(themeName) {
  console.log(`Selecting ${themeName} theme`);

  [].slice.call(document.styleSheets).forEach((style) => {
    if (style.href) {
      if (style.href.startsWith('https://static.redsift.io/reusable/ui-rs-core')) {
        style.disabled = true;
        if (style.href.endsWith('ui-rs-core.min.css') && themeName === 'light') {
          style.disabled = false;
        } else if (style.href.endsWith('ui-rs-core-dark.min.css') && themeName === 'dark') {
          style.disabled = false;
        }
      }
    }
  });
}