/* Tab menu scroll fade — AW-102
   Digital Suite. Fades the edges of any horizontally scrolling tab menu
   so cut-off headlines read as "there is more", not "the row ends here".
   Self-limiting: only applies where the menu actually overflows.
   Tuning: FADE (px). */
(function () {
  var FADE = 72;
  var SEL = '.w-tab-menu';
  var menus = [];

  function injectCSS() {
    if (document.getElementById('tab-fade-css')) return;
    var css =
      '@supports (mask-image: linear-gradient(#000,#000)) or (-webkit-mask-image: linear-gradient(#000,#000)) {' +
      '@property --tab-fade-s { syntax: "<length>"; inherits: false; initial-value: 0px; }' +
      '@property --tab-fade-e { syntax: "<length>"; inherits: false; initial-value: 0px; }' +
      '[data-tab-fade] {' +
      '-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--tab-fade-s), #000 calc(100% - var(--tab-fade-e)), transparent 100%);' +
      'mask-image: linear-gradient(to right, transparent 0, #000 var(--tab-fade-s), #000 calc(100% - var(--tab-fade-e)), transparent 100%);' +
      'transition: --tab-fade-s 120ms linear, --tab-fade-e 120ms linear;' +
      '}}' +
      '@media (prefers-reduced-motion: reduce) { [data-tab-fade] { transition: none; } }';
    var s = document.createElement('style');
    s.id = 'tab-fade-css';
    s.textContent = css;
    document.head.appendChild(s);
  }

  function update(el) {
    var max = el.scrollWidth - el.clientWidth;
    if (max <= 1) {
      if (el.hasAttribute('data-tab-fade')) {
        el.removeAttribute('data-tab-fade');
        el.style.removeProperty('--tab-fade-s');
        el.style.removeProperty('--tab-fade-e');
      }
      return;
    }
    var x = el.scrollLeft;
    el.style.setProperty('--tab-fade-s', Math.max(0, Math.min(x, FADE)) + 'px');
    el.style.setProperty('--tab-fade-e', Math.max(0, Math.min(max - x, FADE)) + 'px');
    el.setAttribute('data-tab-fade', '');
  }

  function updateAll() { menus.forEach(update); }

  function init() {
    injectCSS();
    menus = [].slice.call(document.querySelectorAll(SEL));
    menus.forEach(function (el) {
      update(el);
      el.addEventListener('scroll', function () { update(el); }, { passive: true });
      el.addEventListener('click', function () {
        requestAnimationFrame(function () { update(el); });
      });
      if (window.ResizeObserver) {
        new ResizeObserver(function () { update(el); }).observe(el);
      }
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }
  window.addEventListener('resize', updateAll);
  window.addEventListener('load', updateAll);
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(updateAll);
})();