<header class="header">
  <div class="header__title">
    <h1>
      <code>hue-rotate()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-filters">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we are rotating the hue of the Macaw photo by <code>180deg</code>.
    </p>
    
    <button 
      aria-pressed="false"
      class="button margin-top-zeta"
      type="button">
      Apply hue-rotate
    </button>

    <div class="example__demo example__demo--hue-rotate">
      <img 
        alt="A scarlet macaw parrot sitting on a tree branch."
        class="macaw"
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/christopher-alvarenga-1227147-unsplash.jpg" />
    </div>
  </div>
  
  <aside>
    <p>
      <small>Photo by <a href="https://unsplash.com/photos/3osGqRRtQBE">Christopher Alvarenga</a> on <a href="https://unsplash.com/">Unsplash</a>.</small>
    </p>
  </aside>
</main>

// Demo
.is-hue-roated {
  filter: hue-rotate(180deg);
  transition: filter var(--transition-duration) linear;
  
  // User queries
  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
}

.macaw {
  border: 1rem solid var(--color-white);
  transform: rotate(-1deg);
  transition: filter var(--transition-duration) linear;
  width: 40vw;
  
  @media screen and (prefers-reduced-motion: reduce) {
    transition: none;
  }
}


// Pen Setup
.example__demo--hue-rotate {
  background-color: var(--color-cinder);
  display: flex;
  flex-direction: row;
  justify-content: center;
}

const button = document.querySelector('button');

function toggleHueRotate() {
  var img = document.querySelector('img');
  img.classList.toggle('is-hue-roated');
}

button.addEventListener('click', toggleHueRotate);

button.addEventListener('click', event => {
  if (button.getAttribute('aria-pressed') === "false") {
    button.setAttribute('aria-pressed', 'true');
  }
  else {
    button.setAttribute('aria-pressed', 'false');
  }
});