npm - mp-design-system - Versions diffs - 0.6.1 → 0.7.2 - Mend

mp-design-system 0.6.1 → 0.7.2

Files changed (36) hide show

package/dist/build/js/app.js +6 -4
package/dist/build/js/app.js.map +1 -1
package/dist/build/scss/library.css +1 -1
package/dist/build/scss/library.css.map +1 -1
package/dist/build/scss/main.css +1 -1
package/dist/build/scss/main.css.map +1 -1
package/package.json +1 -1
package/src/_includes/components/campaign/campaign.config.js +3 -3
package/src/_includes/components/campaign/campaign.scss +5 -1
package/src/_includes/components/card/card.config.js +20 -0
package/src/_includes/components/card/card.scss +11 -7
package/src/_includes/components/comparison-table/comparison-table.scss +5 -0
package/src/_includes/components/header/header.scss +1 -1
package/src/_includes/components/product-signpost/product-signpost.njk +11 -9
package/src/_includes/components/scroll-spy/scroll-spy.scss +4 -0
package/src/_includes/components/table/table.scss +4 -0
package/src/_includes/components/usp/usp.scss +2 -7
package/src/_includes/includes/related-events.njk +1 -1
package/src/_includes/includes/resources.njk +1 -1
package/src/_includes/includes/system-header.njk +1 -1
package/src/_includes/layout.njk +28 -4
package/src/assets/js/app.js +2 -0
package/src/assets/js/imports/scrollbar-width.js +15 -0
package/src/assets/js/imports/utilities.js +10 -0
package/src/assets/scss/components/gallery.scss +16 -18
package/src/assets/scss/library.scss +6 -2
package/src/assets/scss/tools/breakout.scss +2 -0
package/src/assets/scss/tools/index.scss +2 -0
package/src/assets/scss/utilities/hr.scss +4 -0
package/src/components/css.md +3 -2
package/src/components/utilities.md +122 -0
package/src/patterns/grid-of-cards.njk +57 -21
package/src/prototype/card-test.njk +147 -0
package/src/prototype/index.njk +1 -1
package/src/static/svg/logo-small.svg +1 -0
package/src/static/svg/logo.svg +1 -1

package/dist/build/js/app.js CHANGED Viewed

@@ -7,16 +7,18 @@ parcelRequire=function(e,r,t,n){var i,o="function"==typeof parcelRequire&&parcel
 },{}],"KO1k":[function(require,module,exports) {
 "use strict";function e(){var e=document.querySelectorAll(".c-gallery__main .c-gallery__slide"),t=document.querySelectorAll(".c-gallery__thumbnails .c-gallery__slide");function a(){var e=document.querySelector(".c-gallery__main").cloneNode(!0);e.classList.remove("c-gallery__main"),e.classList.add("c-lightbox"),e.querySelectorAll(".c-gallery__slide").forEach(function(e){e.classList.contains("c-gallery__video")&&e.remove(),e.classList.add("c-lightbox__slide"),e.classList.remove("c-gallery__slide")}),document.body.appendChild(e),e.insertAdjacentHTML("beforeend",'<a class="c-lightbox__prev"></a><a class="c-lightbox__next"></a>'),e.querySelector(".c-lightbox__prev").addEventListener("click",function(){var t=e.querySelector(".active"),a=e.querySelector('[data-slide="'+(parseInt(t.dataset.slide)-1)+'"]');null!=a&&(t.classList.remove("active"),a.classList.add("active"))}),e.querySelector(".c-lightbox__next").addEventListener("click",function(){var t=e.querySelector(".active"),a=e.querySelector('[data-slide="'+(parseInt(t.dataset.slide)+1)+'"]');null!=a&&(t.classList.remove("active"),a.classList.add("active"))}),e.addEventListener("click",function(t){t.target===t.currentTarget&&e.remove()})}t.forEach(function(a){return a.addEventListener("click",function(c){t.forEach(function(e){e!=c.target.parentNode&&e.classList.remove("active")}),c.target.parentNode.classList.add("active"),e.forEach(function(e){e.dataset.slide==a.dataset.slide?e.classList.add("active"):e.classList.remove("active")})})}),e.forEach(function(e){e.classList.contains("c-gallery__video")||e.addEventListener("click",a)})}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var t=e;exports.default=t;
 },{}],"ts5r":[function(require,module,exports) {
-"use strict";function r(r){return o(r)||n(r)||t(r)||e()}function e(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function t(r,e){if(r){if("string"==typeof r)return a(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?a(r,e):void 0}}function n(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function o(r){if(Array.isArray(r))return a(r)}function a(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,n=new Array(e);t<e;t++)n[t]=r[t];return n}function i(e){for(var t=r(e),n=t.length-1;n>0;n--){var o=Math.floor(Math.random()*(n+1)),a=[t[o],t[n]];t[n]=a[0],t[o]=a[1]}return t}function u(){return!window.matchMedia("(prefers-reduced-motion: no-preference)").matches}Object.defineProperty(exports,"__esModule",{value:!0}),exports.shuffle=i,exports.userPrefersReducedMotion=u,exports.range=exports.invlerp=exports.clamp=exports.lerp=void 0;var c=function(r,e,t){return r*(1-t)+e*t};exports.lerp=c;var l=function(r){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return Math.min(t,Math.max(e,r))};exports.clamp=l;var f=function(r,e,t){return l((t-r)/(e-r))};exports.invlerp=f;var s=function(r,e,t,n,o){return c(t,n,f(r,e,o))};exports.range=s;
+"use strict";function r(r){return o(r)||n(r)||t(r)||e()}function e(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function t(r,e){if(r){if("string"==typeof r)return a(r,e);var t=Object.prototype.toString.call(r).slice(8,-1);return"Object"===t&&r.constructor&&(t=r.constructor.name),"Map"===t||"Set"===t?Array.from(r):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?a(r,e):void 0}}function n(r){if("undefined"!=typeof Symbol&&null!=r[Symbol.iterator]||null!=r["@@iterator"])return Array.from(r)}function o(r){if(Array.isArray(r))return a(r)}function a(r,e){(null==e||e>r.length)&&(e=r.length);for(var t=0,n=new Array(e);t<e;t++)n[t]=r[t];return n}function u(e){for(var t=r(e),n=t.length-1;n>0;n--){var o=Math.floor(Math.random()*(n+1)),a=[t[o],t[n]];t[n]=a[0],t[o]=a[1]}return t}function i(){return!window.matchMedia("(prefers-reduced-motion: no-preference)").matches}Object.defineProperty(exports,"__esModule",{value:!0}),exports.shuffle=u,exports.userPrefersReducedMotion=i,exports.range=exports.invlerp=exports.clamp=exports.lerp=exports.debounce=void 0;var c=function(r,e){var t=!1;return function(){t||(r(),t=!0,setTimeout(function(){return t=!1},e))}};exports.debounce=c;var f=function(r,e,t){return r*(1-t)+e*t};exports.lerp=f;var s=function(r){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,t=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;return Math.min(t,Math.max(e,r))};exports.clamp=s;var l=function(r,e,t){return s((t-r)/(e-r))};exports.invlerp=l;var p=function(r,e,t,n,o){return f(t,n,l(r,e,o))};exports.range=p;
 },{}],"NkiS":[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=require("./utilities");function t(){var t=0,r=document.querySelector(".c-hero__canvas");if(r){var o,i,n,a,c,h=r.getContext("2d"),s="rgb(19,170,19)",u=(0,e.userPrefersReducedMotion)(),d=147,l=0,f=.5,v=.25,g=[];window.addEventListener("resize",m),m(),function o(){t+=.005,h.clearRect(0,0,r.width,r.height),h.beginPath();for(var n=r.width;n>0;n--)h.lineTo(n,.5*r.height-Math.cos(t+n/5*.03)*(.3*i));h.lineWidth=.5,h.strokeStyle=s,h.stroke(),g.forEach(function(t){var r,o,i;r=t.x,o=t.y,i=(0,e.range)(0,g.length,l,f,t.counter),h.beginPath(),h.moveTo(r-14,o),h.lineTo(r+14,o),h.strokeStyle="rgba(255, 255, 255, ".concat(i),h.moveTo(r,o-14),h.lineTo(r,o+14),h.stroke(),t.counter+=t.direction,t.counter>=g.length&&(t.direction=-1*v),t.counter<0&&(t.direction=v)}),u||window.requestAnimationFrame(o)}()}function m(){o=r.scrollWidth,i=r.scrollHeight,h.canvas.width=o,h.canvas.height=i,n=Math.ceil(o/d),a=Math.ceil(i/d),c=(n+1)*(a+1);var t=(0,e.shuffle)(Array.from({length:c},function(e,t){return t}));g=[];for(var s=0;s<=n;s++)for(var u=0;u<=a;u++)g.push({counter:t.shift(),direction:Math.random()>.5?v:-1*v,x:d*(s+1)-d/1,y:d*(u+1)-d/2})}}var r=t;exports.default=r;
 },{"./utilities":"ts5r"}],"SDMK":[function(require,module,exports) {
 "use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=function(){Array.from(document.querySelectorAll(".c-table--responsive")).forEach(function(e){var t=e.querySelectorAll("thead > :first-child th"),r=Number(e.getAttribute("data-columns"))||2;if(t.length<r)return void e.classList.remove("c-table--responsive");Array.from(e.querySelectorAll("tbody tr")).forEach(function(e){Array.from(t).map(function(e){return e.textContent}).forEach(function(t,r){e.children[r]&&e.children[r].setAttribute("data-responsive-title",t)})})})},t=e;exports.default=t;
 },{}],"jSdu":[function(require,module,exports) {
 "use strict";function e(){Array.from(document.querySelectorAll(".c-scroll-spy")).forEach(t)}function t(e){var t=Array.from(e.querySelectorAll("a")),o=new IntersectionObserver(r(t));t.forEach(function(e){var t=e.getAttribute("href").replace("#",""),r=document.getElementById(t);r&&o.observe(r)})}function r(e){return function(t){var r=t.find(function(e){return e.isIntersecting});r&&e.forEach(function(e){e.classList.toggle("c-scroll-spy-active",e.getAttribute("href")==="#"+r.target.id)})}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var o=e;exports.default=o;
-},{}],"hmaF":[function(require,module,exports) {
+},{}],"XaLY":[function(require,module,exports) {
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=require("./utilities");function t(){i(),window.addEventListener("resize",(0,e.debounce)(i,250))}function i(){document.documentElement.style.setProperty("--scrollbarWidth",window.innerWidth-document.body.clientWidth+"px")}var d=t;exports.default=d;
+},{"./utilities":"ts5r"}],"hmaF":[function(require,module,exports) {
 "use strict";function t(){Array.from(document.querySelectorAll(".c-tabs--anchor")).forEach(e)}function e(t){var e=Array.from(t.querySelectorAll(".c-tabs__control")),o=Array.from(t.querySelectorAll(".c-tab")),n=t.classList.contains("c-tabs--persist");if(e.length&&o.length&&(e.forEach(function(t){t.addEventListener("click",r(e,o,n))}),n&&window.location.hash)){var c=t.querySelector('[href="'+window.location.hash+'"]');c&&c.dispatchEvent(new Event("click"))}}function r(t,e,r){return function(o){var n=o.currentTarget,c=e.find(function(t){return t.id===n.getAttribute("href").replace("#","")});if(!c)return!0;o.preventDefault(),r&&history.pushState(null,null,n.getAttribute("href")),t.forEach(function(t){return t.classList.toggle("c-tabs__control--active",t===n)}),e.forEach(function(t){var e=t===c;if(t.classList.toggle("c-tab--active",e),!r)if(e){t.setAttribute("tabIndex",-1);var o=window.scrollY;t.focus(),window.scrollTo({behavior:"auto",top:o})}else t.removeAttribute("tabIndex")})}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var o=t;exports.default=o;
 },{}],"QdeU":[function(require,module,exports) {
-"use strict";var r=u(require("./imports/carousel")),e=u(require("./imports/clear-form")),o=u(require("./imports/comparison")),t=u(require("./imports/gallery")),i=u(require("./imports/hero-pattern")),a=u(require("./imports/responsive-table")),p=u(require("./imports/scroll-spy")),l=u(require("./imports/tabs"));function u(r){return r&&r.__esModule?r:{default:r}}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),(0,r.default)(),(0,e.default)(),(0,o.default)(),(0,t.default)(),(0,i.default)(),(0,l.default)(),(0,p.default)(),(0,a.default)();
-},{"./imports/carousel":"z8E2","./imports/clear-form":"Yb3e","./imports/comparison":"WZim","./imports/gallery":"KO1k","./imports/hero-pattern":"NkiS","./imports/responsive-table":"SDMK","./imports/scroll-spy":"jSdu","./imports/tabs":"hmaF"}]},{},["QdeU"], null)
+"use strict";var r=s(require("./imports/carousel")),e=s(require("./imports/clear-form")),o=s(require("./imports/comparison")),t=s(require("./imports/gallery")),i=s(require("./imports/hero-pattern")),a=s(require("./imports/responsive-table")),l=s(require("./imports/scroll-spy")),p=s(require("./imports/scrollbar-width")),u=s(require("./imports/tabs"));function s(r){return r&&r.__esModule?r:{default:r}}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),window.HTMLCollection&&!HTMLCollection.prototype.forEach&&(HTMLCollection.prototype.forEach=Array.prototype.forEach),(0,r.default)(),(0,e.default)(),(0,o.default)(),(0,t.default)(),(0,i.default)(),(0,u.default)(),(0,l.default)(),(0,a.default)(),(0,p.default)();
+},{"./imports/carousel":"z8E2","./imports/clear-form":"Yb3e","./imports/comparison":"WZim","./imports/gallery":"KO1k","./imports/hero-pattern":"NkiS","./imports/responsive-table":"SDMK","./imports/scroll-spy":"jSdu","./imports/scrollbar-width":"XaLY","./imports/tabs":"hmaF"}]},{},["QdeU"], null)
 //# sourceMappingURL=../js/app.js.map

package/dist/build/js/app.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["js/imports/carousel.js","js/imports/clear-form.js","js/imports/comparison.js","js/imports/gallery.js","js/imports/utilities.js","js/imports/hero-pattern.js","js/imports/responsive-table.js","js/imports/scroll-spy.js","js/imports/tabs.js","js/app.js"],"names":["Carousel","current","bgSlides","document","querySelectorAll","fgSlides","length","setInterval","style","opacity","ClearForm","formClear","getElementById","addEventListener","closest","elements","forEach","field","value","type","toLowerCase","checked","Comparison","extractMobileComparison","container","body","querySelector","head","mobile","products","Array","from","children","filter","x","i","map","info","innerHTML","table","row","classList","contains","push","title","textContent","cells","firstCell","shift","el","index","key","product","createMobileProduct","appendChild","parent","createElement","join","Gallery","mainSlides","thumbnailSlides","lightboxTrigger","lightbox","cloneNode","remove","add","slide","insertAdjacentHTML","lightboxActive","prevImage","parseInt","dataset","nextImage","e","target","currentTarget","thumbnailSlide","thumbnail","parentNode","mainSlide","shuffle","array","arr","j","Math","floor","random","userPrefersReducedMotion","prefersReducedMotion","window","matchMedia","matches","lerp","y","a","clamp","min","max","invlerp","range","x1","y1","x2","y2","HeroPattern","time","c","ctx","width","height","across","down","totalPoints","getContext","sineColour","reduceMotion","crossGap","minimumOpacity","maximumOpacity","crossSpeed","crosses","onResize","draw","clearRect","beginPath","cnt","lineTo","cos","lineWidth","strokeStyle","stroke","cross","drawCross","counter","moveTo","direction","requestAnimationFrame","scrollWidth","scrollHeight","canvas","ceil","ids","_","ResponsiveTable","createResponsiveTable","headers","breakPoint","Number","getAttribute","header","setAttribute","ScrollSpy","setup","element","anchors","observer","IntersectionObserver","observation","anchor","id","replace","observe","results","firstObservation","find","isIntersecting","toggle","Tabs","setupTabs","controls","content","persist","control","controlClick","location","hash","dispatchEvent","Event","contents","event","preventDefault","history","pushState","isCurrent","scrollY","focus","scrollTo","behavior","top","removeAttribute","NodeList","prototype","HTMLCollection"],"mappings":"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","file":"app.js","sourceRoot":"..\\..\\src\\assets","sourcesContent":["function Carousel() {\r\n let current = 0;\r\n const bgSlides = document.querySelectorAll('.c-hero__image-bg');\r\n const fgSlides = document.querySelectorAll('.c-hero__image-fg');\r\n\r\n if(fgSlides.length > 0) {\r\n setInterval(() => {\r\n for (var bgSlide of bgSlides) {\r\n bgSlide.style.opacity = 0;\r\n }\r\n current = (current != bgSlides.length - 1) ? current + 1 : 0;\r\n bgSlides[current].style.opacity = 1;\r\n \r\n for (var fgSlide of fgSlides) {\r\n fgSlide.style.opacity = 0;\r\n }\r\n fgSlides[current].style.opacity = 1;\r\n }, 5000);\r\n }\r\n}\r\n\r\nexport default Carousel;","function ClearForm() {\r\n const formClear = document.getElementById('clearForm');\r\n if (formClear) {\r\n formClear.addEventListener('click', function () {\r\n const fields = this.closest('form').elements;\r\n fields.forEach(field => {\r\n if (field.value != '') {\r\n if (\r\n field.type.toLowerCase() == 'text' \|\| \r\n field.type.toLowerCase() == 'email' \|\| \r\n field.type.toLowerCase() == 'tel' \|\| \r\n field.type.toLowerCase() == 'select-one' \|\| \r\n field.type.toLowerCase() == 'textarea'\r\n ) {\r\n field.value = '';\r\n return;\r\n } else if (field.type.toLowerCase() == 'checkbox') {\r\n field.checked = false;\r\n return;\r\n }\r\n }\r\n });\r\n });\r\n };\r\n}\r\n\r\nexport default ClearForm;","function Comparison() {\r\n document.querySelectorAll('.c-comparison').forEach(extractMobileComparison)\r\n}\r\n\r\nfunction extractMobileComparison(container) {\r\n const body = container.querySelector('.c-table tbody');\r\n const head = container.querySelector('.c-table thead');\r\n const mobile = container.querySelector('.c-comparison__mobile');\r\n\r\n if (!body \|\| !head \|\| !mobile) return;\r\n\r\n // Remove empty corner piece\r\n const products = Array.from(head.children[0].children)\r\n .filter((x, i) => i)\r\n .map(x => ({ info: x.innerHTML, table: [] }));\r\n\r\n Array.from(body.children).forEach(row => {\r\n // For table row headers, push to all products\r\n if (row.classList.contains('c-table__title')) {\r\n products.forEach(x => {\r\n x.table.push({ type: 'title', title: row.children[0].textContent })\r\n })\r\n } else {\r\n // For all others, loop the cells and push to their appropriate parent\r\n const cells = Array.from(row.children);\r\n const firstCell = cells.shift();\r\n\r\n cells.forEach((el, index) => {\r\n products[index].table.push({\r\n type: 'row',\r\n key: firstCell.textContent,\r\n value: el.innerHTML\r\n })\r\n })\r\n }\r\n })\r\n\r\n products.forEach(product => {\r\n const el = createMobileProduct(product);\r\n mobile.appendChild(el)\r\n })\r\n}\r\n\r\nfunction createMobileProduct(product) {\r\n const parent = document.createElement('article');\r\n parent.innerHTML = `<div class=\"c-comparison__content\">\r\n ${product.info}\r\n </div>\r\n <table class=\"c-table\">\r\n ${product.table.map(x => {\r\n if (x.type === 'title') {\r\n return `<tr class=\"c-table__title\"><th colspan=\"2\">${x.title}</th></tr>`;\r\n } else {\r\n return `<tr>\r\n <td>${x.key}</td>\r\n <td>${x.value}</td>\r\n </tr>`;\r\n }\r\n }).join('')}\r\n </table>`;\r\n\r\n return parent;\r\n}\r\n\r\nexport default Comparison;\r\n","function Gallery() {\r\n const mainSlides = document.querySelectorAll('.c-gallery__main .c-gallery__slide');\r\n const thumbnailSlides = document.querySelectorAll('.c-gallery__thumbnails .c-gallery__slide');\r\n\r\n thumbnailSlides.forEach(thumbnailSlide => thumbnailSlide.addEventListener('click', function(e) {\r\n thumbnailSlides.forEach(function(thumbnail) {\r\n if(thumbnail != e.target.parentNode) {\r\n thumbnail.classList.remove('active');\r\n }\r\n });\r\n e.target.parentNode.classList.add('active');\r\n\r\n mainSlides.forEach(function(mainSlide) {\r\n if(mainSlide.dataset.slide == thumbnailSlide.dataset.slide) {\r\n mainSlide.classList.add('active');\r\n } else {\r\n mainSlide.classList.remove('active');\r\n }\r\n });\r\n }));\r\n\r\n mainSlides.forEach(function(mainSlide) {\r\n if(!mainSlide.classList.contains('c-gallery__video')) {\r\n mainSlide.addEventListener('click', lightboxTrigger);\r\n }\r\n });\r\n\r\n function lightboxTrigger() {\r\n const lightbox = document.querySelector('.c-gallery__main').cloneNode(true);\r\n lightbox.classList.remove('c-gallery__main');\r\n lightbox.classList.add('c-lightbox');\r\n lightbox.querySelectorAll('.c-gallery__slide').forEach(function(slide) {\r\n if(slide.classList.contains('c-gallery__video')) {\r\n slide.remove();\r\n }\r\n slide.classList.add('c-lightbox__slide');\r\n slide.classList.remove('c-gallery__slide');\r\n });\r\n document.body.appendChild(lightbox);\r\n lightbox.insertAdjacentHTML('beforeend', '<a class=\"c-lightbox__prev\"></a><a class=\"c-lightbox__next\"></a>');\r\n\r\n lightbox.querySelector('.c-lightbox__prev').addEventListener('click', function() {\r\n const lightboxActive = lightbox.querySelector('.active');\r\n const prevImage = lightbox.querySelector('[data-slide=\"' + (parseInt(lightboxActive.dataset.slide) - 1) + '\"]');\r\n if(prevImage != null) {\r\n lightboxActive.classList.remove('active');\r\n prevImage.classList.add('active');\r\n }\r\n });\r\n\r\n lightbox.querySelector('.c-lightbox__next').addEventListener('click', function() {\r\n const lightboxActive = lightbox.querySelector('.active');\r\n const nextImage = lightbox.querySelector('[data-slide=\"' + (parseInt(lightboxActive.dataset.slide) + 1) + '\"]');\r\n if(nextImage != null) {\r\n lightboxActive.classList.remove('active');\r\n nextImage.classList.add('active');\r\n }\r\n });\r\n\r\n lightbox.addEventListener('click', function(e) {\r\n if (e.target !== e.currentTarget) {\r\n return;\r\n } else {\r\n lightbox.remove();\r\n }\r\n });\r\n }\r\n}\r\n\r\nexport default Gallery;\r\n","export function shuffle(array) {\r\n const arr = [...array];\r\n for (let i = arr.length - 1; i > 0; i--) {\r\n let j = Math.floor(Math.random() * (i + 1));\r\n [arr[i], arr[j]] = [arr[j], arr[i]];\r\n }\r\n\r\n return arr;\r\n}\r\n\r\nexport function userPrefersReducedMotion() {\r\n const QUERY = '(prefers-reduced-motion: no-preference)';\r\n const mediaQueryList = window.matchMedia(QUERY);\r\n const prefersReducedMotion = !mediaQueryList.matches;\r\n return prefersReducedMotion;\r\n}\r\n\r\nexport const lerp = (x, y, a) => x * (1 - a) + y * a;\r\nexport const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));\r\nexport const invlerp = (x, y, a) => clamp((a - x) / (y - x));\r\nexport const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a));\r\n","import { range, shuffle, userPrefersReducedMotion } from './utilities';\r\n\r\nfunction HeroPattern() {\r\n let time = 0;\r\n\r\n const c = document.querySelector('.c-hero__canvas');\r\n if (!c) return;\r\n const ctx = c.getContext(\"2d\");\r\n \r\n const sineColour = \"rgb(19,170,19)\";\r\n const reduceMotion = userPrefersReducedMotion();\r\n\r\n const crossGap = 147;\r\n const minimumOpacity = 0;\r\n const maximumOpacity = 0.5;\r\n const crossSpeed = 0.25;\r\n\r\n let width;\r\n let height;\r\n let across;\r\n let down;\r\n let crosses = [];\r\n let totalPoints;\r\n\r\n function draw() {\r\n // Sine wave\r\n time = time + 0.005;\r\n \r\n ctx.clearRect(0, 0, c.width, c.height);\r\n ctx.beginPath();\r\n \r\n for(let cnt = c.width; cnt > 0; cnt--) {\r\n ctx.lineTo(cnt, c.height * 0.5 - (Math.cos(time + cnt / 5 * 0.03) * (height * 0.3) ));\r\n }\r\n \r\n ctx.lineWidth = 0.5;\r\n ctx.strokeStyle = sineColour;\r\n ctx.stroke();\r\n \r\n // Crosses\r\n crosses.forEach(cross => {\r\n drawCross(cross.x, cross.y, range(0, crosses.length, minimumOpacity, maximumOpacity, cross.counter));\r\n \r\n cross.counter += cross.direction;\r\n if (cross.counter >= crosses.length) cross.direction = -1 * crossSpeed;\r\n if (cross.counter < 0) cross.direction = crossSpeed;\r\n })\r\n \r\n if (!reduceMotion) {\r\n window.requestAnimationFrame(draw);\r\n }\r\n }\r\n \r\n function onResize() {\r\n width = c.scrollWidth;\r\n height = c.scrollHeight;\r\n \r\n ctx.canvas.width = width;\r\n ctx.canvas.height = height;\r\n \r\n across = Math.ceil(width / crossGap);\r\n down = Math.ceil(height / crossGap);\r\n \r\n totalPoints = (across + 1) * (down + 1);\r\n const ids = shuffle(Array.from({ length: totalPoints }, (_, i) => (i)))\r\n crosses = [];\r\n for(let x = 0; x <= across; x++) {\r\n for(let y = 0; y <= down; y++) {\r\n crosses.push({\r\n counter: ids.shift(),\r\n direction: Math.random() > 0.5 ? crossSpeed : -1 * crossSpeed,\r\n x: crossGap * (x + 1) - crossGap / 1,\r\n y: crossGap * (y + 1) - crossGap / 2\r\n });\r\n }\r\n }\r\n }\r\n \r\n function drawCross(x, y, opacity) {\r\n ctx.beginPath();\r\n ctx.moveTo(x - 14, y);\r\n ctx.lineTo(x + 14, y);\r\n ctx.strokeStyle = `rgba(255, 255, 255, ${opacity}`;\r\n ctx.moveTo(x, y - 14);\r\n ctx.lineTo(x, y + 14);\r\n ctx.stroke();\r\n }\r\n\r\n window.addEventListener('resize', onResize);\r\n onResize();\r\n draw();\r\n}\r\n\r\nexport default HeroPattern;\r\n","const ResponsiveTable = () => {\r\n const tables = Array.from(document.querySelectorAll('.c-table--responsive'));\r\n tables.forEach(createResponsiveTable);\r\n\r\n /*\r\n Create responsive table headers for large tables\r\n * @param {HTMLTableElement} table\r\n /\r\n function createResponsiveTable(table) {\r\n const headers = table.querySelectorAll('thead > :first-child th');\r\n const breakPoint = Number(table.getAttribute('data-columns')) \|\| 2\r\n \r\n if (headers.length < breakPoint) {\r\n table.classList.remove('c-table--responsive');\r\n return;\r\n };\r\n\r\n Array.from(table.querySelectorAll('tbody tr')).forEach((row) => {\r\n Array.from(headers)\r\n .map((x) => x.textContent)\r\n .forEach((header, index) => {\r\n if (row.children[index]) {\r\n row.children[index].setAttribute('data-responsive-title', header);\r\n }\r\n });\r\n });\r\n }\r\n};\r\n\r\nexport default ResponsiveTable;\r\n","function ScrollSpy() {\r\n const spies = Array.from(document.querySelectorAll('.c-scroll-spy'));\r\n spies.forEach(setup);\r\n}\r\n\r\nfunction setup(element) {\r\n const anchors = Array.from(element.querySelectorAll('a'));\r\n const observer = new IntersectionObserver(observation(anchors));\r\n \r\n anchors.forEach(anchor => {\r\n const id = anchor.getAttribute('href').replace('#', '');\r\n const target = document.getElementById(id);\r\n if (!target) return;\r\n\r\n observer.observe(target);\r\n });\r\n}\r\n\r\n/\r\n @param {Array<HTMLAnchorElement>} results \r\n * @return {Array<IntersectionObserverEntry>}\r\n */\r\nfunction observation(anchors) {\r\n return (results) => {\r\n const firstObservation = results.find(x => x.isIntersecting);\r\n\r\n if (firstObservation) {\r\n anchors.forEach(x => {\r\n x.classList.toggle(\r\n 'c-scroll-spy-active',\r\n x.getAttribute('href') === '#' + firstObservation.target.id\r\n )\r\n })\r\n }\r\n }\r\n}\r\n\r\nexport default ScrollSpy;\r\n","function Tabs() {\r\n const tabs = Array.from(document.querySelectorAll('.c-tabs--anchor'));\r\n tabs.forEach(setupTabs);\r\n}\r\n\r\nfunction setupTabs(parent) {\r\n const controls = Array.from(parent.querySelectorAll('.c-tabs__control'));\r\n const content = Array.from(parent.querySelectorAll('.c-tab'));\r\n const persist = parent.classList.contains('c-tabs--persist');\r\n \r\n if (!controls.length \|\| !content.length) return;\r\n\r\n controls.forEach(control => {\r\n control.addEventListener('click', controlClick(controls, content, persist))\r\n })\r\n\r\n if (persist && window.location.hash) {\r\n const control = parent.querySelector('[href=\"' + window.location.hash + '\"]');\r\n if (control) control.dispatchEvent(new Event('click'));\r\n }\r\n}\r\n\r\nfunction controlClick(controls, contents, persist) {\r\n return (event) => {\r\n const control = event.currentTarget;\r\n const content = contents.find(x => x.id === control.getAttribute('href').replace('#', ''));\r\n \r\n if (!content) {\r\n return true;\r\n };\r\n\r\n event.preventDefault();\r\n \r\n if (persist) {\r\n history.pushState(null, null, control.getAttribute('href'));\r\n }\r\n\r\n controls.forEach(c => c.classList.toggle('c-tabs__control--active', c === control));\r\n contents.forEach(c => {\r\n const isCurrent = c === content;\r\n c.classList.toggle('c-tab--active', isCurrent);\r\n \r\n if (persist) return;\r\n\r\n if (isCurrent) {\r\n c.setAttribute('tabIndex', -1);\r\n \r\n const y = window.scrollY;\r\n c.focus();\r\n window.scrollTo({ behavior: \"auto\", top: y })\r\n } else {\r\n c.removeAttribute('tabIndex');\r\n }\r\n });\r\n }\r\n}\r\n\r\nexport default Tabs;\r\n","import Carousel from './imports/carousel';\r\nimport ClearForm from './imports/clear-form';\r\nimport Comparison from './imports/comparison';\r\nimport Gallery from './imports/gallery';\r\nimport HeroPattern from './imports/hero-pattern';\r\nimport ResponsiveTable from './imports/responsive-table';\r\nimport ScrollSpy from './imports/scroll-spy';\r\nimport Tabs from './imports/tabs';\r\n\r\n(() => {\r\n if(window.NodeList && !NodeList.prototype.forEach) {\r\n NodeList.prototype.forEach = Array.prototype.forEach;\r\n }\r\n if(window.HTMLCollection && !HTMLCollection.prototype.forEach) {\r\n HTMLCollection.prototype.forEach = Array.prototype.forEach;\r\n }\r\n \r\n Carousel();\r\n ClearForm();\r\n Comparison();\r\n Gallery();\r\n HeroPattern();\r\n Tabs();\r\n ScrollSpy();\r\n ResponsiveTable();\r\n})();"]}
1	+ {"version":3,"sources":["js/imports/carousel.js","js/imports/clear-form.js","js/imports/comparison.js","js/imports/gallery.js","js/imports/utilities.js","js/imports/hero-pattern.js","js/imports/responsive-table.js","js/imports/scroll-spy.js","js/imports/scrollbar-width.js","js/imports/tabs.js","js/app.js"],"names":["Carousel","current","bgSlides","document","querySelectorAll","fgSlides","length","setInterval","style","opacity","ClearForm","formClear","getElementById","addEventListener","closest","elements","forEach","field","value","type","toLowerCase","checked","Comparison","extractMobileComparison","container","body","querySelector","head","mobile","products","Array","from","children","filter","x","i","map","info","innerHTML","table","row","classList","contains","push","title","textContent","cells","firstCell","shift","el","index","key","product","createMobileProduct","appendChild","parent","createElement","join","Gallery","mainSlides","thumbnailSlides","lightboxTrigger","lightbox","cloneNode","remove","add","slide","insertAdjacentHTML","lightboxActive","prevImage","parseInt","dataset","nextImage","e","target","currentTarget","thumbnailSlide","thumbnail","parentNode","mainSlide","shuffle","array","arr","j","Math","floor","random","userPrefersReducedMotion","prefersReducedMotion","window","matchMedia","matches","debounce","func","limit","wait","setTimeout","lerp","y","a","clamp","min","max","invlerp","range","x1","y1","x2","y2","HeroPattern","time","c","ctx","width","height","across","down","totalPoints","getContext","sineColour","reduceMotion","crossGap","minimumOpacity","maximumOpacity","crossSpeed","crosses","onResize","draw","clearRect","beginPath","cnt","lineTo","cos","lineWidth","strokeStyle","stroke","cross","drawCross","counter","moveTo","direction","requestAnimationFrame","scrollWidth","scrollHeight","canvas","ceil","ids","_","ResponsiveTable","createResponsiveTable","headers","breakPoint","Number","getAttribute","header","setAttribute","ScrollSpy","setup","element","anchors","observer","IntersectionObserver","observation","anchor","id","replace","observe","results","firstObservation","find","isIntersecting","toggle","ScrollbarWidth","setScrollbarWidth","documentElement","setProperty","innerWidth","clientWidth","Tabs","setupTabs","controls","content","persist","control","controlClick","location","hash","dispatchEvent","Event","contents","event","preventDefault","history","pushState","isCurrent","scrollY","focus","scrollTo","behavior","top","removeAttribute","NodeList","prototype","HTMLCollection"],"mappings":"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","file":"app.js","sourceRoot":"..\\..\\src\\assets","sourcesContent":["function Carousel() {\r\n let current = 0;\r\n const bgSlides = document.querySelectorAll('.c-hero__image-bg');\r\n const fgSlides = document.querySelectorAll('.c-hero__image-fg');\r\n\r\n if(fgSlides.length > 0) {\r\n setInterval(() => {\r\n for (var bgSlide of bgSlides) {\r\n bgSlide.style.opacity = 0;\r\n }\r\n current = (current != bgSlides.length - 1) ? current + 1 : 0;\r\n bgSlides[current].style.opacity = 1;\r\n \r\n for (var fgSlide of fgSlides) {\r\n fgSlide.style.opacity = 0;\r\n }\r\n fgSlides[current].style.opacity = 1;\r\n }, 5000);\r\n }\r\n}\r\n\r\nexport default Carousel;","function ClearForm() {\r\n const formClear = document.getElementById('clearForm');\r\n if (formClear) {\r\n formClear.addEventListener('click', function () {\r\n const fields = this.closest('form').elements;\r\n fields.forEach(field => {\r\n if (field.value != '') {\r\n if (\r\n field.type.toLowerCase() == 'text' \|\| \r\n field.type.toLowerCase() == 'email' \|\| \r\n field.type.toLowerCase() == 'tel' \|\| \r\n field.type.toLowerCase() == 'select-one' \|\| \r\n field.type.toLowerCase() == 'textarea'\r\n ) {\r\n field.value = '';\r\n return;\r\n } else if (field.type.toLowerCase() == 'checkbox') {\r\n field.checked = false;\r\n return;\r\n }\r\n }\r\n });\r\n });\r\n };\r\n}\r\n\r\nexport default ClearForm;","function Comparison() {\r\n document.querySelectorAll('.c-comparison').forEach(extractMobileComparison)\r\n}\r\n\r\nfunction extractMobileComparison(container) {\r\n const body = container.querySelector('.c-table tbody');\r\n const head = container.querySelector('.c-table thead');\r\n const mobile = container.querySelector('.c-comparison__mobile');\r\n\r\n if (!body \|\| !head \|\| !mobile) return;\r\n\r\n // Remove empty corner piece\r\n const products = Array.from(head.children[0].children)\r\n .filter((x, i) => i)\r\n .map(x => ({ info: x.innerHTML, table: [] }));\r\n\r\n Array.from(body.children).forEach(row => {\r\n // For table row headers, push to all products\r\n if (row.classList.contains('c-table__title')) {\r\n products.forEach(x => {\r\n x.table.push({ type: 'title', title: row.children[0].textContent })\r\n })\r\n } else {\r\n // For all others, loop the cells and push to their appropriate parent\r\n const cells = Array.from(row.children);\r\n const firstCell = cells.shift();\r\n\r\n cells.forEach((el, index) => {\r\n products[index].table.push({\r\n type: 'row',\r\n key: firstCell.textContent,\r\n value: el.innerHTML\r\n })\r\n })\r\n }\r\n })\r\n\r\n products.forEach(product => {\r\n const el = createMobileProduct(product);\r\n mobile.appendChild(el)\r\n })\r\n}\r\n\r\nfunction createMobileProduct(product) {\r\n const parent = document.createElement('article');\r\n parent.innerHTML = `<div class=\"c-comparison__content\">\r\n ${product.info}\r\n </div>\r\n <table class=\"c-table\">\r\n ${product.table.map(x => {\r\n if (x.type === 'title') {\r\n return `<tr class=\"c-table__title\"><th colspan=\"2\">${x.title}</th></tr>`;\r\n } else {\r\n return `<tr>\r\n <td>${x.key}</td>\r\n <td>${x.value}</td>\r\n </tr>`;\r\n }\r\n }).join('')}\r\n </table>`;\r\n\r\n return parent;\r\n}\r\n\r\nexport default Comparison;\r\n","function Gallery() {\r\n const mainSlides = document.querySelectorAll('.c-gallery__main .c-gallery__slide');\r\n const thumbnailSlides = document.querySelectorAll('.c-gallery__thumbnails .c-gallery__slide');\r\n\r\n thumbnailSlides.forEach(thumbnailSlide => thumbnailSlide.addEventListener('click', function(e) {\r\n thumbnailSlides.forEach(function(thumbnail) {\r\n if(thumbnail != e.target.parentNode) {\r\n thumbnail.classList.remove('active');\r\n }\r\n });\r\n e.target.parentNode.classList.add('active');\r\n\r\n mainSlides.forEach(function(mainSlide) {\r\n if(mainSlide.dataset.slide == thumbnailSlide.dataset.slide) {\r\n mainSlide.classList.add('active');\r\n } else {\r\n mainSlide.classList.remove('active');\r\n }\r\n });\r\n }));\r\n\r\n mainSlides.forEach(function(mainSlide) {\r\n if(!mainSlide.classList.contains('c-gallery__video')) {\r\n mainSlide.addEventListener('click', lightboxTrigger);\r\n }\r\n });\r\n\r\n function lightboxTrigger() {\r\n const lightbox = document.querySelector('.c-gallery__main').cloneNode(true);\r\n lightbox.classList.remove('c-gallery__main');\r\n lightbox.classList.add('c-lightbox');\r\n lightbox.querySelectorAll('.c-gallery__slide').forEach(function(slide) {\r\n if(slide.classList.contains('c-gallery__video')) {\r\n slide.remove();\r\n }\r\n slide.classList.add('c-lightbox__slide');\r\n slide.classList.remove('c-gallery__slide');\r\n });\r\n document.body.appendChild(lightbox);\r\n lightbox.insertAdjacentHTML('beforeend', '<a class=\"c-lightbox__prev\"></a><a class=\"c-lightbox__next\"></a>');\r\n\r\n lightbox.querySelector('.c-lightbox__prev').addEventListener('click', function() {\r\n const lightboxActive = lightbox.querySelector('.active');\r\n const prevImage = lightbox.querySelector('[data-slide=\"' + (parseInt(lightboxActive.dataset.slide) - 1) + '\"]');\r\n if(prevImage != null) {\r\n lightboxActive.classList.remove('active');\r\n prevImage.classList.add('active');\r\n }\r\n });\r\n\r\n lightbox.querySelector('.c-lightbox__next').addEventListener('click', function() {\r\n const lightboxActive = lightbox.querySelector('.active');\r\n const nextImage = lightbox.querySelector('[data-slide=\"' + (parseInt(lightboxActive.dataset.slide) + 1) + '\"]');\r\n if(nextImage != null) {\r\n lightboxActive.classList.remove('active');\r\n nextImage.classList.add('active');\r\n }\r\n });\r\n\r\n lightbox.addEventListener('click', function(e) {\r\n if (e.target !== e.currentTarget) {\r\n return;\r\n } else {\r\n lightbox.remove();\r\n }\r\n });\r\n }\r\n}\r\n\r\nexport default Gallery;\r\n","export function shuffle(array) {\r\n const arr = [...array];\r\n for (let i = arr.length - 1; i > 0; i--) {\r\n let j = Math.floor(Math.random() * (i + 1));\r\n [arr[i], arr[j]] = [arr[j], arr[i]];\r\n }\r\n\r\n return arr;\r\n}\r\n\r\nexport function userPrefersReducedMotion() {\r\n const QUERY = '(prefers-reduced-motion: no-preference)';\r\n const mediaQueryList = window.matchMedia(QUERY);\r\n const prefersReducedMotion = !mediaQueryList.matches;\r\n return prefersReducedMotion;\r\n}\r\n\r\nexport const debounce = (func, limit) => {\r\n let wait = false; \r\n return () => {\r\n if (wait) return;\r\n func();\r\n wait = true;\r\n setTimeout(() => wait = false, limit);\r\n }\r\n}\r\n\r\nexport const lerp = (x, y, a) => x * (1 - a) + y * a;\r\nexport const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));\r\nexport const invlerp = (x, y, a) => clamp((a - x) / (y - x));\r\nexport const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a));\r\n","import { range, shuffle, userPrefersReducedMotion } from './utilities';\r\n\r\nfunction HeroPattern() {\r\n let time = 0;\r\n\r\n const c = document.querySelector('.c-hero__canvas');\r\n if (!c) return;\r\n const ctx = c.getContext(\"2d\");\r\n \r\n const sineColour = \"rgb(19,170,19)\";\r\n const reduceMotion = userPrefersReducedMotion();\r\n\r\n const crossGap = 147;\r\n const minimumOpacity = 0;\r\n const maximumOpacity = 0.5;\r\n const crossSpeed = 0.25;\r\n\r\n let width;\r\n let height;\r\n let across;\r\n let down;\r\n let crosses = [];\r\n let totalPoints;\r\n\r\n function draw() {\r\n // Sine wave\r\n time = time + 0.005;\r\n \r\n ctx.clearRect(0, 0, c.width, c.height);\r\n ctx.beginPath();\r\n \r\n for(let cnt = c.width; cnt > 0; cnt--) {\r\n ctx.lineTo(cnt, c.height * 0.5 - (Math.cos(time + cnt / 5 * 0.03) * (height * 0.3) ));\r\n }\r\n \r\n ctx.lineWidth = 0.5;\r\n ctx.strokeStyle = sineColour;\r\n ctx.stroke();\r\n \r\n // Crosses\r\n crosses.forEach(cross => {\r\n drawCross(cross.x, cross.y, range(0, crosses.length, minimumOpacity, maximumOpacity, cross.counter));\r\n \r\n cross.counter += cross.direction;\r\n if (cross.counter >= crosses.length) cross.direction = -1 * crossSpeed;\r\n if (cross.counter < 0) cross.direction = crossSpeed;\r\n })\r\n \r\n if (!reduceMotion) {\r\n window.requestAnimationFrame(draw);\r\n }\r\n }\r\n \r\n function onResize() {\r\n width = c.scrollWidth;\r\n height = c.scrollHeight;\r\n \r\n ctx.canvas.width = width;\r\n ctx.canvas.height = height;\r\n \r\n across = Math.ceil(width / crossGap);\r\n down = Math.ceil(height / crossGap);\r\n \r\n totalPoints = (across + 1) * (down + 1);\r\n const ids = shuffle(Array.from({ length: totalPoints }, (_, i) => (i)))\r\n crosses = [];\r\n for(let x = 0; x <= across; x++) {\r\n for(let y = 0; y <= down; y++) {\r\n crosses.push({\r\n counter: ids.shift(),\r\n direction: Math.random() > 0.5 ? crossSpeed : -1 * crossSpeed,\r\n x: crossGap * (x + 1) - crossGap / 1,\r\n y: crossGap * (y + 1) - crossGap / 2\r\n });\r\n }\r\n }\r\n }\r\n \r\n function drawCross(x, y, opacity) {\r\n ctx.beginPath();\r\n ctx.moveTo(x - 14, y);\r\n ctx.lineTo(x + 14, y);\r\n ctx.strokeStyle = `rgba(255, 255, 255, ${opacity}`;\r\n ctx.moveTo(x, y - 14);\r\n ctx.lineTo(x, y + 14);\r\n ctx.stroke();\r\n }\r\n\r\n window.addEventListener('resize', onResize);\r\n onResize();\r\n draw();\r\n}\r\n\r\nexport default HeroPattern;\r\n","const ResponsiveTable = () => {\r\n const tables = Array.from(document.querySelectorAll('.c-table--responsive'));\r\n tables.forEach(createResponsiveTable);\r\n\r\n /*\r\n Create responsive table headers for large tables\r\n * @param {HTMLTableElement} table\r\n /\r\n function createResponsiveTable(table) {\r\n const headers = table.querySelectorAll('thead > :first-child th');\r\n const breakPoint = Number(table.getAttribute('data-columns')) \|\| 2\r\n \r\n if (headers.length < breakPoint) {\r\n table.classList.remove('c-table--responsive');\r\n return;\r\n };\r\n\r\n Array.from(table.querySelectorAll('tbody tr')).forEach((row) => {\r\n Array.from(headers)\r\n .map((x) => x.textContent)\r\n .forEach((header, index) => {\r\n if (row.children[index]) {\r\n row.children[index].setAttribute('data-responsive-title', header);\r\n }\r\n });\r\n });\r\n }\r\n};\r\n\r\nexport default ResponsiveTable;\r\n","function ScrollSpy() {\r\n const spies = Array.from(document.querySelectorAll('.c-scroll-spy'));\r\n spies.forEach(setup);\r\n}\r\n\r\nfunction setup(element) {\r\n const anchors = Array.from(element.querySelectorAll('a'));\r\n const observer = new IntersectionObserver(observation(anchors));\r\n \r\n anchors.forEach(anchor => {\r\n const id = anchor.getAttribute('href').replace('#', '');\r\n const target = document.getElementById(id);\r\n if (!target) return;\r\n\r\n observer.observe(target);\r\n });\r\n}\r\n\r\n/\r\n @param {Array<HTMLAnchorElement>} results \r\n * @return {Array<IntersectionObserverEntry>}\r\n */\r\nfunction observation(anchors) {\r\n return (results) => {\r\n const firstObservation = results.find(x => x.isIntersecting);\r\n\r\n if (firstObservation) {\r\n anchors.forEach(x => {\r\n x.classList.toggle(\r\n 'c-scroll-spy-active',\r\n x.getAttribute('href') === '#' + firstObservation.target.id\r\n )\r\n })\r\n }\r\n }\r\n}\r\n\r\nexport default ScrollSpy;\r\n","import { debounce } from './utilities';\r\n\r\nfunction ScrollbarWidth() {\r\n setScrollbarWidth();\r\n window.addEventListener('resize', debounce(setScrollbarWidth, 250));\r\n}\r\n\r\nfunction setScrollbarWidth() {\r\n document.documentElement.style.setProperty(\r\n '--scrollbarWidth', \r\n window.innerWidth - document.body.clientWidth + 'px'\r\n );\r\n}\r\n\r\nexport default ScrollbarWidth;","function Tabs() {\r\n const tabs = Array.from(document.querySelectorAll('.c-tabs--anchor'));\r\n tabs.forEach(setupTabs);\r\n}\r\n\r\nfunction setupTabs(parent) {\r\n const controls = Array.from(parent.querySelectorAll('.c-tabs__control'));\r\n const content = Array.from(parent.querySelectorAll('.c-tab'));\r\n const persist = parent.classList.contains('c-tabs--persist');\r\n \r\n if (!controls.length \|\| !content.length) return;\r\n\r\n controls.forEach(control => {\r\n control.addEventListener('click', controlClick(controls, content, persist))\r\n })\r\n\r\n if (persist && window.location.hash) {\r\n const control = parent.querySelector('[href=\"' + window.location.hash + '\"]');\r\n if (control) control.dispatchEvent(new Event('click'));\r\n }\r\n}\r\n\r\nfunction controlClick(controls, contents, persist) {\r\n return (event) => {\r\n const control = event.currentTarget;\r\n const content = contents.find(x => x.id === control.getAttribute('href').replace('#', ''));\r\n \r\n if (!content) {\r\n return true;\r\n };\r\n\r\n event.preventDefault();\r\n \r\n if (persist) {\r\n history.pushState(null, null, control.getAttribute('href'));\r\n }\r\n\r\n controls.forEach(c => c.classList.toggle('c-tabs__control--active', c === control));\r\n contents.forEach(c => {\r\n const isCurrent = c === content;\r\n c.classList.toggle('c-tab--active', isCurrent);\r\n \r\n if (persist) return;\r\n\r\n if (isCurrent) {\r\n c.setAttribute('tabIndex', -1);\r\n \r\n const y = window.scrollY;\r\n c.focus();\r\n window.scrollTo({ behavior: \"auto\", top: y })\r\n } else {\r\n c.removeAttribute('tabIndex');\r\n }\r\n });\r\n }\r\n}\r\n\r\nexport default Tabs;\r\n","import Carousel from './imports/carousel';\r\nimport ClearForm from './imports/clear-form';\r\nimport Comparison from './imports/comparison';\r\nimport Gallery from './imports/gallery';\r\nimport HeroPattern from './imports/hero-pattern';\r\nimport ResponsiveTable from './imports/responsive-table';\r\nimport ScrollSpy from './imports/scroll-spy';\r\nimport ScrollbarWidth from './imports/scrollbar-width';\r\nimport Tabs from './imports/tabs';\r\n\r\n(() => {\r\n if(window.NodeList && !NodeList.prototype.forEach) {\r\n NodeList.prototype.forEach = Array.prototype.forEach;\r\n }\r\n if(window.HTMLCollection && !HTMLCollection.prototype.forEach) {\r\n HTMLCollection.prototype.forEach = Array.prototype.forEach;\r\n }\r\n \r\n Carousel();\r\n ClearForm();\r\n Comparison();\r\n Gallery();\r\n HeroPattern();\r\n Tabs();\r\n ScrollSpy();\r\n ResponsiveTable();\r\n ScrollbarWidth();\r\n})();"]}

package/dist/build/scss/library.css CHANGED Viewed

@@ -1,2 +1,2 @@
-@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");.u-breakout{left:50%;position:relative;transform:translateX(-50vw);width:100vw;padding-left:safe-space(0);padding-right:safe-space(0)}:root{--fluid-min-width:320;--fluid-max-width:1332;--fluid-screen:100vw;--fluid-bp:calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)))}@media screen and (min-width:1332px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}:root{--f--2-min:12.64;--f--2-max:12.5;--step--2:calc(var(--f--2-min)/16*1rem + (var(--f--2-max) - var(--f--2-min))*var(--fluid-bp));--f--1-min:14.22;--f--1-max:15;--step--1:calc(var(--f--1-min)/16*1rem + (var(--f--1-max) - var(--f--1-min))*var(--fluid-bp));--f-0-min:16;--f-0-max:18;--step-0:calc(var(--f-0-min)/16*1rem + (var(--f-0-max) - var(--f-0-min))*var(--fluid-bp));--f-1-min:18;--f-1-max:21.6;--step-1:calc(var(--f-1-min)/16*1rem + (var(--f-1-max) - var(--f-1-min))*var(--fluid-bp));--f-2-min:20.25;--f-2-max:25.92;--step-2:calc(var(--f-2-min)/16*1rem + (var(--f-2-max) - var(--f-2-min))*var(--fluid-bp));--f-3-min:22.78;--f-3-max:31.1;--step-3:calc(var(--f-3-min)/16*1rem + (var(--f-3-max) - var(--f-3-min))*var(--fluid-bp));--f-4-min:25.63;--f-4-max:37.32;--step-4:calc(var(--f-4-min)/16*1rem + (var(--f-4-max) - var(--f-4-min))*var(--fluid-bp));--f-5-min:28.83;--f-5-max:44.79;--step-5:calc(var(--f-5-min)/16*1rem + (var(--f-5-max) - var(--f-5-min))*var(--fluid-bp));--f-6-min:32.44;--f-6-max:53.75;--step-6:calc(var(--f-6-min)/16*1rem + (var(--f-6-max) - var(--f-6-min))*var(--fluid-bp));--f-7-min:36.49;--f-7-max:64.5;--step-7:calc(var(--f-7-min)/16*1rem + (var(--f-7-max) - var(--f-7-min))*var(--fluid-bp));--f-8-min:41.05;--f-8-max:77.4;--step-8:calc(var(--f-8-min)/16*1rem + (var(--f-8-max) - var(--f-8-min))*var(--fluid-bp));--f-9-min:46.18;--f-9-max:92.88;--step-9:calc(var(--f-9-min)/16*1rem + (var(--f-9-max) - var(--f-9-min))*var(--fluid-bp));--f-10-min:51.96;--f-10-max:111.45;--step-10:calc(var(--f-10-min)/16*1rem + (var(--f-10-max) - var(--f-10-min))*var(--fluid-bp));--max-screen:83.25;--fc-screen:100vw;--fc-bp:calc((var(--fc-screen) - 20em)/(var(--max-screen) - 20));--fc-base:18;--fc-3xs:4.5;--space-3xs:calc(var(--fc-3xs)/16*1rem);--fc-2xs:9;--space-2xs:calc(var(--fc-2xs)/16*1rem);--fc-xs:13.5;--space-xs:calc(var(--fc-xs)/16*1rem);--fc-s:18;--space-s:calc(var(--fc-s)/16*1rem);--fc-m:27;--space-m:calc(var(--fc-m)/16*1rem);--fc-l:36;--space-l:calc(var(--fc-l)/16*1rem);--fc-xl:54;--space-xl:calc(var(--fc-xl)/16*1rem);--fc-2xl:72;--space-2xl:calc(var(--fc-2xl)/16*1rem);--fc-3xl:108;--space-3xl:calc(var(--fc-3xl)/16*1rem);--fc-4xl:144;--space-4xl:calc(var(--fc-4xl)/16*1rem);--space--3xs:calc(var(--fc-)/16*1rem + (var(--fc-3xs) - var(--fc-))*var(--fluid-bp));--space-3xs-2xs:calc(var(--fc-3xs)/16*1rem + (var(--fc-2xs) - var(--fc-3xs))*var(--fluid-bp));--space-2xs-xs:calc(var(--fc-2xs)/16*1rem + (var(--fc-xs) - var(--fc-2xs))*var(--fluid-bp));--space-xs-s:calc(var(--fc-xs)/16*1rem + (var(--fc-s) - var(--fc-xs))*var(--fluid-bp));--space-m-l:calc(var(--fc-m)/16*1rem + (var(--fc-l) - var(--fc-m))*var(--fluid-bp));--space-l-xl:calc(var(--fc-l)/16*1rem + (var(--fc-xl) - var(--fc-l))*var(--fluid-bp));--space-xl-2xl:calc(var(--fc-xl)/16*1rem + (var(--fc-2xl) - var(--fc-xl))*var(--fluid-bp));--space-2xl-3xl:calc(var(--fc-2xl)/16*1rem + (var(--fc-3xl) - var(--fc-2xl))*var(--fluid-bp));--space-3xl-4xl:calc(var(--fc-3xl)/16*1rem + (var(--fc-4xl) - var(--fc-3xl))*var(--fluid-bp));--space-s-l:calc(var(--fc-s)/16*1rem + (var(--fc-l) - var(--fc-s))*var(--fluid-bp));--space-s-m:calc(var(--fc-s)/16*1rem + (var(--fc-m) - var(--fc-s))*var(--fluid-bp));--space-xs-l:calc(var(--fc-xs)/16*1rem + (var(--fc-l) - var(--fc-xs))*var(--fluid-bp));--space-m-xl:calc(var(--fc-m)/16*1rem + (var(--fc-xl) - var(--fc-m))*var(--fluid-bp));--space-l-2xl:calc(var(--fc-l)/16*1rem + (var(--fc-2xl) - var(--fc-l))*var(--fluid-bp));--space-s-xl:calc(var(--fc-s)/16*1rem + (var(--fc-xl) - var(--fc-s))*var(--fluid-bp));--space-l-3xl:calc(var(--fc-l)/16*1rem + (var(--fc-3xl) - var(--fc-l))*var(--fluid-bp));--space-xl-3xl:calc(var(--fc-xl)/16*1rem + (var(--fc-3xl) - var(--fc-xl))*var(--fluid-bp));--space-l-4xl:calc(var(--fc-l)/16*1rem + (var(--fc-4xl) - var(--fc-l))*var(--fluid-bp));--space-3xs-m:calc(var(--fc-3xs)/16*1rem + (var(--fc-m) - var(--fc-3xs))*var(--fluid-bp));--gutter:var(--space-s-l)}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../Inter-Regular.03253301.woff2) format("woff2"),url(../Inter-Regular.27892b21.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../Inter-SemiBold.97a52f0e.woff2) format("woff2"),url(../Inter-SemiBold.ba1d0d7d.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../Inter-Bold.a2748096.woff2) format("woff2"),url(../Inter-Bold.39130deb.woff) format("woff")}@media screen and (min-width:75em){:root{--fc-screen:calc(var(--max-screen)*1rem)}}*,:after,:before{box-sizing:border-box}body{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:100vh;margin:0}html{scroll-behavior:smooth}blockquote,figure,ol,pre,ul{padding:0;margin:0}img{max-width:100%;height:auto;border:none}article,aside,figure,footer,header,img,main,nav{display:block}iframe{border:none}body{font:400 1.125rem/1.2 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;letter-spacing:-.01em;font-size:18px;font-size:var(--step-0);color:#333}dl,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}ol,p,ul{line-height:1.2}a{text-decoration:none}a,a:hover{cursor:pointer;color:inherit}.mp ol,.mp ul{list-style:none}address,cite{font-style:normal}[type=button],[type=submit],button{border-radius:0;background:transparent;box-shadow:none;appearance:none;padding:0;cursor:pointer;border:none;color:inherit;font:inherit}.mp.c-button[disabled],[disabled]{opacity:.5;cursor:not-allowed}label{cursor:pointer}fieldset{border:0;padding:.01em 0 0}@media (prefers-reduced-motion:reduce){*{-webkit-animation:none!important;animation:none!important;transition:none!important;scroll-behavior:auto!important}}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#3d7b87;background:#ebf1f2;font-family:Source Code Pro,monospace;font-size:1rem;line-height:1.5em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{background:#cceae7;color:#263238}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{background:#cceae7;color:#263238}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{overflow:auto;position:relative;padding:18px;padding:var(--space-s)}.language-css>code,.language-sass>code,.language-scss>code{color:#f2a60d}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#3d7b87}.token.attr-name{color:#00a2c2}.token.attr-value,.token.attribute{color:#13aa13}.token.boolean{color:#ce0058}.token.builtin,.token.cdata,.token.char,.token.class{color:#00a2c2}.token.class-name{color:#6182b8}.token.comment{color:#aabfc9}.token.constant{color:#3d7b87}.token.deleted{color:#ce0058}.token.doctype{color:#aabfc9}.token.entity{color:#ce0058}.token.function{color:#3d7b87}.token.hexcode{color:#f2a60d}.token.id,.token.important{color:#3d7b87;font-weight:700}.token.inserted{color:#00a2c2}.token.keyword{color:#3d7b87}.token.number{color:#f2a60d}.token.operator{color:#00a2c2}.token.prolog{color:#aabfc9}.token.property{color:#00a2c2}.token.pseudo-class,.token.pseudo-element{color:#13aa13}.token.punctuation,.token.regex{color:#00a2c2}.token.selector{color:#ce0058}.token.string{color:#13aa13}.token.symbol{color:#3d7b87}.token.tag{color:#005461}.token.unit{color:#f2a60d}.token.url,.token.variable{color:#ce0058}.c-library hr,.u-hr{padding-bottom:27px;padding-bottom:var(--space-m-xl);margin:0 0 27px;margin-bottom:var(--space-m-xl);border:none;border-bottom:1px solid #bfd3d6}.u-border-top{border-top:1px solid #bfd3d6}.u-border{border:1px solid #bfd3d6}.o-grid{display:flex;flex-wrap:wrap;justify-content:stretch;margin-bottom:-18px;margin-bottom:calc(var(--gutter)*-1);width:100%}.o-grid--float:after{content:" ";display:table;clear:both}.o-grid--between{justify-content:space-between}.o-grid--no-height-match{align-items:start}.o-grid>*{width:100%;margin-bottom:18px;margin-bottom:var(--gutter)}@media (min-width:40em){.o-grid--of-two>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-two>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two>:nth-child(odd){margin-left:0}}@media (min-width:55em){.o-grid--of-two-late>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-two-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-late>:nth-child(odd){margin-left:0}}@media (min-width:38em) and (max-width:54.9375em){.o-grid--of-three>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(odd){margin-left:0}}@media (min-width:55em){.o-grid--of-three>*{width:calc(33.333% - 12.1px);width:calc(33.333% - var(--gutter)*2/3 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:67.9375em){.o-grid--of-three-late>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(odd){margin-left:0}}@media (min-width:68em){.o-grid--of-three-late>*{width:calc(33.333% - 12.1px);width:calc(33.333% - var(--gutter)*2/3 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:59.9375em){.o-grid--of-four>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(odd){margin-left:0}}@media (min-width:60em){.o-grid--of-four>*{width:calc(25% - 13.6px);width:calc(25% - var(--gutter)*3/4 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(4n+1){margin-left:0}}@media (max-width:54.9375em){.o-grid--swipeable{left:50%;position:relative;transform:translateX(-50vw);width:100vw;padding-left:var(--gutter);padding-right:var(--gutter);flex-wrap:nowrap;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.o-grid--swipeable>*{flex:0 0 auto;max-width:23em;width:calc(85vw - var(--gutter)*2.333);scroll-snap-align:center}.o-grid--swipeable>*+*{margin-left:var(--gutter)!important}}@media (min-width:55em){.o-grid--4\/7-switch>:nth-child(2n+2),.o-grid--4\/7>:nth-child(2n+2){width:57.1428571429%}.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(odd),.o-grid--4\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/3>:nth-child(odd),.o-grid--8\/4-switch>:nth-child(2n+2),.o-grid--8\/4>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--9\/3>:nth-child(odd){width:65.7142857143%}.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--3\/8>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--4\/7-switch>:nth-child(odd),.o-grid--4\/7>:nth-child(odd),.o-grid--4\/8-switch>:nth-child(2n+2),.o-grid--4\/8>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--9\/3>:nth-child(2n+2){width:31.4285714286%}.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(odd),.o-grid--4\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--9\/3>:nth-child(2n+2){margin-left:2.8571428571%;margin-right:0}.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/3>:nth-child(odd){max-width:828px}.o-grid[class*=switch]>:nth-child(odd){order:1}.o-grid--layout,.o-grid--layout>:last-child,.o-grid--layout>:nth-last-child(2){margin-bottom:0}.o-grid--push{justify-content:space-between}.o-grid--pull{justify-content:flex-start}.o-grid--float{display:block}.o-grid--float:not([class*=switch])>:nth-child(odd),.o-grid--float[class*=switch]>:nth-child(2n+2){float:left}.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(odd){float:right}}@media (min-width:70em){.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/3>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--9\/3>:nth-child(odd){width:74.2857142857%}.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--3\/8>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/3>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--9\/3>:nth-child(2n+2){width:22.8571428571%}}.c-library{display:grid;min-height:100vh;grid-template-rows:auto 1fr auto}.c-library--components{grid-template-rows:auto 1fr}.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:9px;padding:var(--space-2xs);flex-direction:column;align-items:flex-start;background:#005461;color:#fff;font-weight:700}@media only screen and (min-width:650px){.c-library__header{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);flex-direction:row;align-items:center}}@media only screen and (min-width:1000px){.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:18px;padding:var(--space-s) var(--space-s-l)}}.c-library__header img{filter:saturate(0) brightness(10)}.c-library__header .c-library-page-active{position:relative}.c-library__header .c-library-page-active:after{content:"";position:absolute;left:0;width:100%;bottom:-6px;border-bottom:1px solid}.c-library__body{display:grid;grid-template-rows:auto auto}@media only screen and (min-width:600px){.c-library__body{grid-template-columns:10em 1fr}}@media only screen and (min-width:800px){.c-library__body{grid-template-columns:17em 1fr}}@media only screen and (min-width:600px){.c-library--components .c-library__body>*{overflow-y:scroll;height:calc(100vh - 115px)}}.c-library__sidebar{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);border-right:1px solid #ebf1f2;grid-row:-1;scroll-behavior:none}@media only screen and (min-width:600px){.c-library__sidebar{grid-row:auto}}@media only screen and (min-width:800px){.c-library__sidebar{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}}.c-library__sidebar>*{padding:18px;padding:var(--space-s-l) var(--space-s) var(--space-s-l) var(--space-s-l)}.c-library__sidebar li{position:relative}.c-library__sidebar li a{color:#006daf}.c-library__sidebar li a:hover{text-decoration:underline;color:#006daf}.c-library__sidebar li+li{margin-top:13.5px;margin-top:var(--space-xs)}.c-library__sidebar ul ul{padding:13.5px;padding:var(--space-xs);padding-bottom:0}.c-library__sidebar ul ul li+li{margin-top:9px;margin-top:var(--space-2xs)}.c-library__skip-link{padding:13.5px;padding:var(--space-xs)}@media only screen and (min-width:600px){.c-library__skip-link{display:none}}.c-library__logo{display:flex;align-items:center;max-width:15%;min-width:100px}.c-library__logo-name{padding-left:13.5px;padding-left:var(--space-xs-s);margin-left:13.5px;margin-left:var(--space-xs-s);border-left:1px solid #3d7b87;white-space:nowrap}.c-library__logo-name span{display:block}.c-library__logo-name span:last-child,.c-library__logo-name span:nth-last-child(3){text-transform:uppercase;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);letter-spacing:.08em;color:#bfd3d6}.c-library__logo-name span:nth-last-child(2){color:#fff;letter-spacing:-.03em;font-size:37.32px;font-size:var(--step-4)}.c-library__logo-name span:nth-last-child(3){color:#3d7b87}.has-js .c-library__sidebar ul>li>ul{display:none}.has-js .c-library__sidebar ul>.c-library-accordion-open>ul{display:block}.c-library .c-library-accordion-open>.c-library-accordion__toggle{transform:rotate(180deg)}.c-library .c-library-accordion__toggle{color:#006daf;line-height:1;font-size:1rem;position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;padding:.25rem}.c-library-menu-active{font-weight:700;position:relative}.c-library-menu-active:before{content:"▸ ";position:absolute;left:-17px;top:0}.c-library-stretch{display:flex;flex-direction:column;flex:1}.c-library__main{overflow-y:scroll}.c-library__frame{position:relative;width:100%}.c-library__frame-links{position:absolute;right:0;top:calc(var(--space-m)*-1 + var(--space-s)*-1);z-index:1}.c-library__frame-links a,.c-library__frame-links button{border-radius:0 0 .25em .25em;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:.25em .666em;background:#bfd3d6;color:#6c6c6c}.c-library__frame-background{border-radius:0 0 0 .25em;top:0}.c-library__frame iframe{position:absolute;height:100%;width:100%;left:0;top:0;transition:all .3s cubic-bezier(.22,.61,.36,1)}.c-library-code,.c-library-pre{font-family:Source Code Pro}.c-library-pre{overflow-x:auto;background:#ebf1f2;padding:18px;padding:var(--space-s);line-height:1.4}.c-library-pre--bordered{border-bottom:1px solid #bfd3d6}.c-library-status,.c-library-version{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#6c6c6c}.c-library-status{padding:.25em .666em;border-radius:.25em;background:#bfd3d6}.c-library-status--ready{background:#13aa13;color:#fff}.c-library-status--development,.c-library-status--in-production,.c-library-status--placeholder{background:#f2a60d;color:#fff}.c-library-status--deprecated{background:#ce0058;color:#fff}.c-library__swatch-grid{display:grid;gap:0 1em;grid-auto-rows:minmax(4em,auto);margin-bottom:var(--space-m)}@media only screen and (min-width:680px){.c-library__swatch-grid{gap:0;grid-template-columns:repeat(5,auto);grid-template-rows:5em auto}}.c-library__swatch-grid--has-labels{grid-template-columns:15em auto;grid-template-rows:auto;grid-auto-flow:row}@media only screen and (min-width:1000px){.c-library__swatch-grid--has-labels{grid-auto-flow:column;grid-template-columns:repeat(5,1fr);grid-template-rows:5em auto}}.c-library__swatch-labels,.c-library__swatches{display:grid;grid-template-columns:repeat(auto-fit,165px)}.c-library__swatch{display:flex}.c-library__swatch>*{justify-content:center;font-weight:700;margin:auto}.c-library__swatches>*{height:0;padding-bottom:50%;position:relative}.c-library__swatches>*>*{display:flex;justify-content:center;align-items:center;padding:.5rem;font-weight:700;text-align:center;position:absolute;height:100%;width:100%;left:0;top:0}.c-library__swatch-grid table{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__swatch-grid table td,.c-library__swatch-grid table th{padding:9px 0 9px 4.5px;padding:var(--space-2xs) 0 var(--space-2xs) var(--space-3xs)}.c-library__swatch-grid table th{widtH:3em}.c-library__swatch-grid table td{font-family:monospace}.c-library__image-row{display:flex;max-width:100%}.c-library__image-row img{flex:1 1 auto;margin:0 2% 0 0;object-fit:contain;width:6%}.c-library__image-row img:last-child{margin-right:0}.c-library__space{display:block}.c-library__space span{background:linear-gradient(45deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,0)),rgba(206,0,88,.5);height:0;padding-bottom:100%;position:relative;display:block}.c-library__space code{position:absolute;line-height:1;left:100%;top:50%;margin-left:18px;margin-left:var(--space-s);white-space:nowrap;transform:translateY(-50%)}.c-library-grid{background:#00758c;padding:3rem 1rem;display:flex;justify-content:center;align-items:center;color:#fff;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}.c-library-grid--alt{background:#3d7b87;padding:2rem 1rem}.c-library-grid--alt:before{content:" ";display:block}.c-library-grid--first{background:#005461;padding:2rem 1rem}.c-library-grid--first:before{content:"First on mobile"}.c-library-copy{position:relative}.c-library-copy__trigger{position:absolute;background:#bfd3d6;bottom:0;right:0;font-weight:700;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:4.5px 9px;padding:var(--space-3xs) var(--space-2xs);letter-spacing:.02em}.c-library-copy__trigger:hover{color:#ce0058}.c-library__typo__sidebar{width:14.2857142857%}.c-library__typo__sidebar span{display:block}.c-library__typo__sidebar .x2{margin-top:4.25em;border:1px solid #333;border-width:1px 0;height:2em;line-height:2em}.c-library__typo__main{width:82.8571428571%}.c-library__semi{font-weight:600}.c-library__photo-grid{display:grid;gap:2px;grid-template-columns:1fr;margin-top:54px;margin-top:var(--space-xl)}@media only screen and (min-width:880px){.c-library__photo-grid{grid-auto-flow:dense;grid-auto-rows:auto}.c-library__photo-grid img{height:100%;width:100%;object-fit:cover}.c-library__photo-grid div{grid-column:1/3;grid-row:1/2;display:flex}.c-library__photo-grid div h2{margin:auto var(--space-s)}.c-library__photo-grid.grid-1{grid-template-columns:40% 20% 40%;grid-template-rows:var(--space-2xl) 400px 400px}.c-library__photo-grid.grid-1 img:nth-child(2){grid-row:2/3;grid-column:1/3}.c-library__photo-grid.grid-1 img:nth-child(3){grid-column:3/4;grid-row:1/3}.c-library__photo-grid.grid-1 img:nth-child(5){grid-column:2/4}.c-library__photo-grid.grid-2{grid-template-columns:50% 50%;grid-template-rows:var(--space-2xl) 300px 300px}.c-library__photo-grid.grid-2 div{grid-column:1/2}.c-library__photo-grid.grid-2 img:nth-child(2){grid-row:2/4}.c-library__photo-grid.grid-2 img:nth-child(3){grid-row:1/3}}.c-library .c-alert ul li{list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;margin-left:1em;padding-left:.5rem}.c-library .c-alert ul li h3,.c-library .c-alert ul li h4{line-height:1.6;font-size:1em;color:#13aa13}@media only screen and (max-width:1050px){.c-library__logo-name span:last-child,.c-library__logo-name span:nth-last-child(3){letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__logo-name span:nth-last-child(2){letter-spacing:-.02em;font-size:21.6px;font-size:var(--step-1)}.c-library__header nav li:last-child{display:none}}@media only screen and (min-width:650px) and (max-width:700px),screen and (max-width:450px){.c-library__header nav .u-row{gap:9px;gap:var(--space-2xs);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}}@media only screen and (max-width:650px){.c-library__header nav a{padding:9px 0;padding:var(--space-2xs) 0;display:block}.c-library__header .c-library-page-active:after{bottom:4.5px;bottom:var(--space-3xs)}}
+@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");.u-breakout{left:50%;left:calc(50% + var(--scrollbarWidth)/2.0001);position:relative;transform:translateX(-50vw);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:safe-space(0);padding-right:safe-space(0)}:root{--fluid-min-width:320;--fluid-max-width:1332;--fluid-screen:100vw;--fluid-bp:calc((var(--fluid-screen) - var(--fluid-min-width)/16*1rem)/(var(--fluid-max-width) - var(--fluid-min-width)))}@media screen and (min-width:1332px){:root{--fluid-screen:calc(var(--fluid-max-width)*1px)}}:root{--f--2-min:12.64;--f--2-max:12.5;--step--2:calc(var(--f--2-min)/16*1rem + (var(--f--2-max) - var(--f--2-min))*var(--fluid-bp));--f--1-min:14.22;--f--1-max:15;--step--1:calc(var(--f--1-min)/16*1rem + (var(--f--1-max) - var(--f--1-min))*var(--fluid-bp));--f-0-min:16;--f-0-max:18;--step-0:calc(var(--f-0-min)/16*1rem + (var(--f-0-max) - var(--f-0-min))*var(--fluid-bp));--f-1-min:18;--f-1-max:21.6;--step-1:calc(var(--f-1-min)/16*1rem + (var(--f-1-max) - var(--f-1-min))*var(--fluid-bp));--f-2-min:20.25;--f-2-max:25.92;--step-2:calc(var(--f-2-min)/16*1rem + (var(--f-2-max) - var(--f-2-min))*var(--fluid-bp));--f-3-min:22.78;--f-3-max:31.1;--step-3:calc(var(--f-3-min)/16*1rem + (var(--f-3-max) - var(--f-3-min))*var(--fluid-bp));--f-4-min:25.63;--f-4-max:37.32;--step-4:calc(var(--f-4-min)/16*1rem + (var(--f-4-max) - var(--f-4-min))*var(--fluid-bp));--f-5-min:28.83;--f-5-max:44.79;--step-5:calc(var(--f-5-min)/16*1rem + (var(--f-5-max) - var(--f-5-min))*var(--fluid-bp));--f-6-min:32.44;--f-6-max:53.75;--step-6:calc(var(--f-6-min)/16*1rem + (var(--f-6-max) - var(--f-6-min))*var(--fluid-bp));--f-7-min:36.49;--f-7-max:64.5;--step-7:calc(var(--f-7-min)/16*1rem + (var(--f-7-max) - var(--f-7-min))*var(--fluid-bp));--f-8-min:41.05;--f-8-max:77.4;--step-8:calc(var(--f-8-min)/16*1rem + (var(--f-8-max) - var(--f-8-min))*var(--fluid-bp));--f-9-min:46.18;--f-9-max:92.88;--step-9:calc(var(--f-9-min)/16*1rem + (var(--f-9-max) - var(--f-9-min))*var(--fluid-bp));--f-10-min:51.96;--f-10-max:111.45;--step-10:calc(var(--f-10-min)/16*1rem + (var(--f-10-max) - var(--f-10-min))*var(--fluid-bp));--max-screen:83.25;--fc-screen:100vw;--fc-bp:calc((var(--fc-screen) - 20em)/(var(--max-screen) - 20));--fc-base:18;--fc-3xs:4.5;--space-3xs:calc(var(--fc-3xs)/16*1rem);--fc-2xs:9;--space-2xs:calc(var(--fc-2xs)/16*1rem);--fc-xs:13.5;--space-xs:calc(var(--fc-xs)/16*1rem);--fc-s:18;--space-s:calc(var(--fc-s)/16*1rem);--fc-m:27;--space-m:calc(var(--fc-m)/16*1rem);--fc-l:36;--space-l:calc(var(--fc-l)/16*1rem);--fc-xl:54;--space-xl:calc(var(--fc-xl)/16*1rem);--fc-2xl:72;--space-2xl:calc(var(--fc-2xl)/16*1rem);--fc-3xl:108;--space-3xl:calc(var(--fc-3xl)/16*1rem);--fc-4xl:144;--space-4xl:calc(var(--fc-4xl)/16*1rem);--space--3xs:calc(var(--fc-)/16*1rem + (var(--fc-3xs) - var(--fc-))*var(--fluid-bp));--space-3xs-2xs:calc(var(--fc-3xs)/16*1rem + (var(--fc-2xs) - var(--fc-3xs))*var(--fluid-bp));--space-2xs-xs:calc(var(--fc-2xs)/16*1rem + (var(--fc-xs) - var(--fc-2xs))*var(--fluid-bp));--space-xs-s:calc(var(--fc-xs)/16*1rem + (var(--fc-s) - var(--fc-xs))*var(--fluid-bp));--space-m-l:calc(var(--fc-m)/16*1rem + (var(--fc-l) - var(--fc-m))*var(--fluid-bp));--space-l-xl:calc(var(--fc-l)/16*1rem + (var(--fc-xl) - var(--fc-l))*var(--fluid-bp));--space-xl-2xl:calc(var(--fc-xl)/16*1rem + (var(--fc-2xl) - var(--fc-xl))*var(--fluid-bp));--space-2xl-3xl:calc(var(--fc-2xl)/16*1rem + (var(--fc-3xl) - var(--fc-2xl))*var(--fluid-bp));--space-3xl-4xl:calc(var(--fc-3xl)/16*1rem + (var(--fc-4xl) - var(--fc-3xl))*var(--fluid-bp));--space-s-l:calc(var(--fc-s)/16*1rem + (var(--fc-l) - var(--fc-s))*var(--fluid-bp));--space-s-m:calc(var(--fc-s)/16*1rem + (var(--fc-m) - var(--fc-s))*var(--fluid-bp));--space-xs-l:calc(var(--fc-xs)/16*1rem + (var(--fc-l) - var(--fc-xs))*var(--fluid-bp));--space-m-xl:calc(var(--fc-m)/16*1rem + (var(--fc-xl) - var(--fc-m))*var(--fluid-bp));--space-l-2xl:calc(var(--fc-l)/16*1rem + (var(--fc-2xl) - var(--fc-l))*var(--fluid-bp));--space-s-xl:calc(var(--fc-s)/16*1rem + (var(--fc-xl) - var(--fc-s))*var(--fluid-bp));--space-l-3xl:calc(var(--fc-l)/16*1rem + (var(--fc-3xl) - var(--fc-l))*var(--fluid-bp));--space-xl-3xl:calc(var(--fc-xl)/16*1rem + (var(--fc-3xl) - var(--fc-xl))*var(--fluid-bp));--space-l-4xl:calc(var(--fc-l)/16*1rem + (var(--fc-4xl) - var(--fc-l))*var(--fluid-bp));--space-3xs-m:calc(var(--fc-3xs)/16*1rem + (var(--fc-m) - var(--fc-3xs))*var(--fluid-bp));--gutter:var(--space-s-l)}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(../Inter-Regular.03253301.woff2) format("woff2"),url(../Inter-Regular.27892b21.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(../Inter-SemiBold.97a52f0e.woff2) format("woff2"),url(../Inter-SemiBold.ba1d0d7d.woff) format("woff")}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(../Inter-Bold.a2748096.woff2) format("woff2"),url(../Inter-Bold.39130deb.woff) format("woff")}@media screen and (min-width:75em){:root{--fc-screen:calc(var(--max-screen)*1rem)}}*,:after,:before{box-sizing:border-box}body{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:100vh;margin:0}html{scroll-behavior:smooth}blockquote,figure,ol,pre,ul{padding:0;margin:0}img{max-width:100%;height:auto;border:none}article,aside,figure,footer,header,img,main,nav{display:block}iframe{border:none}body{font:400 1.125rem/1.2 Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;letter-spacing:-.01em;font-size:18px;font-size:var(--step-0);color:#333}dl,h1,h2,h3,h4,h5,h6,ol,p,ul{margin:0}ol,p,ul{line-height:1.2}a{text-decoration:none}a,a:hover{cursor:pointer;color:inherit}.mp ol,.mp ul{list-style:none}address,cite{font-style:normal}[type=button],[type=submit],button{border-radius:0;background:transparent;box-shadow:none;appearance:none;padding:0;cursor:pointer;border:none;color:inherit;font:inherit}.mp.c-button[disabled],[disabled]{opacity:.5;cursor:not-allowed}label{cursor:pointer}fieldset{border:0;padding:.01em 0 0}@media (prefers-reduced-motion:reduce){*{-webkit-animation:none!important;animation:none!important;transition:none!important;scroll-behavior:auto!important}}code[class*=language-],pre[class*=language-]{text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;color:#3d7b87;background:#ebf1f2;font-family:Source Code Pro,monospace;font-size:1rem;line-height:1.5em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection{background:#cceae7;color:#263238}code[class*=language-]::selection,code[class*=language-] ::selection,pre[class*=language-]::selection,pre[class*=language-] ::selection{background:#cceae7;color:#263238}:not(pre)>code[class*=language-]{white-space:normal;border-radius:.2em;padding:.1em}pre[class*=language-]{overflow:auto;position:relative;padding:18px;padding:var(--space-s)}.language-css>code,.language-sass>code,.language-scss>code{color:#f2a60d}[class*=language-] .namespace{opacity:.7}.token.atrule{color:#3d7b87}.token.attr-name{color:#00a2c2}.token.attr-value,.token.attribute{color:#13aa13}.token.boolean{color:#ce0058}.token.builtin,.token.cdata,.token.char,.token.class{color:#00a2c2}.token.class-name{color:#6182b8}.token.comment{color:#aabfc9}.token.constant{color:#3d7b87}.token.deleted{color:#ce0058}.token.doctype{color:#aabfc9}.token.entity{color:#ce0058}.token.function{color:#3d7b87}.token.hexcode{color:#f2a60d}.token.id,.token.important{color:#3d7b87;font-weight:700}.token.inserted{color:#00a2c2}.token.keyword{color:#3d7b87}.token.number{color:#f2a60d}.token.operator{color:#00a2c2}.token.prolog{color:#aabfc9}.token.property{color:#00a2c2}.token.pseudo-class,.token.pseudo-element{color:#13aa13}.token.punctuation,.token.regex{color:#00a2c2}.token.selector{color:#ce0058}.token.string{color:#13aa13}.token.symbol{color:#3d7b87}.token.tag{color:#005461}.token.unit{color:#f2a60d}.token.url,.token.variable{color:#ce0058}.c-library hr,.o-prose hr,.u-hr{padding-bottom:27px;padding-bottom:var(--space-m-xl);margin:0 0 27px;margin-bottom:var(--space-m-xl);border:none;border-bottom:1px solid #bfd3d6}.u-border-top{border-top:1px solid #bfd3d6}.u-border{border:1px solid #bfd3d6}.o-grid{display:flex;flex-wrap:wrap;justify-content:stretch;margin-bottom:-18px;margin-bottom:calc(var(--gutter)*-1);width:100%}.o-grid--float:after{content:" ";display:table;clear:both}.o-grid--between{justify-content:space-between}.o-grid--no-height-match{align-items:start}.o-grid>*{width:100%;margin-bottom:18px;margin-bottom:var(--gutter)}@media (min-width:40em){.o-grid--of-two>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-two>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two>:nth-child(odd){margin-left:0}}@media (min-width:55em){.o-grid--of-two-late>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-two-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-two-late>:nth-child(odd){margin-left:0}}@media (min-width:38em) and (max-width:54.9375em){.o-grid--of-three>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(odd){margin-left:0}}@media (min-width:55em){.o-grid--of-three>*{width:calc(33.333% - 12.1px);width:calc(33.333% - var(--gutter)*2/3 - .1px)}.o-grid--of-three>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:67.9375em){.o-grid--of-three-late>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(odd){margin-left:0}}@media (min-width:68em){.o-grid--of-three-late>*{width:calc(33.333% - 12.1px);width:calc(33.333% - var(--gutter)*2/3 - .1px)}.o-grid--of-three-late>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-three-late>:nth-child(3n+1){margin-left:0}}@media (min-width:38em) and (max-width:59.9375em){.o-grid--of-four>*{width:calc(50% - 9.1px);width:calc(50% - var(--gutter)*1/2 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(odd){margin-left:0}}@media (min-width:60em){.o-grid--of-four>*{width:calc(25% - 13.6px);width:calc(25% - var(--gutter)*3/4 - .1px)}.o-grid--of-four>*+*{margin-left:18px;margin-left:var(--gutter)}.o-grid--of-four>:nth-child(4n+1){margin-left:0}}@media (max-width:54.9375em){.o-grid--swipeable{left:50%;left:calc(50% + var(--scrollbarWidth)/2.0001);position:relative;transform:translateX(-50vw);width:100vw;width:calc(100vw - var(--scrollbarWidth));padding-left:var(--gutter);padding-right:var(--gutter);flex-wrap:nowrap;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.o-grid--swipeable>*{flex:0 0 auto;max-width:23em;width:calc(85vw - var(--gutter)*2.333);scroll-snap-align:center}.o-grid--swipeable>*+*{margin-left:var(--gutter)!important}}@media (min-width:55em){.o-grid--4\/7-switch>:nth-child(2n+2),.o-grid--4\/7>:nth-child(2n+2){width:57.1428571429%}.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(odd),.o-grid--4\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/3>:nth-child(odd),.o-grid--8\/4-switch>:nth-child(2n+2),.o-grid--8\/4>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--9\/3>:nth-child(odd){width:65.7142857143%}.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--3\/8>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--4\/7-switch>:nth-child(odd),.o-grid--4\/7>:nth-child(odd),.o-grid--4\/8-switch>:nth-child(2n+2),.o-grid--4\/8>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--9\/3>:nth-child(2n+2){width:31.4285714286%}.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--4\/8-switch>:nth-child(odd),.o-grid--4\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/3>:nth-child(2n+2),.o-grid--8\/4-switch>:nth-child(odd),.o-grid--8\/4>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--9\/3>:nth-child(2n+2){margin-left:2.8571428571%;margin-right:0}.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/3>:nth-child(odd){max-width:828px}.o-grid[class*=switch]>:nth-child(odd){order:1}.o-grid--layout,.o-grid--layout>:last-child,.o-grid--layout>:nth-last-child(2){margin-bottom:0}.o-grid--push{justify-content:space-between}.o-grid--pull{justify-content:flex-start}.o-grid--float{display:block}.o-grid--float:not([class*=switch])>:nth-child(odd),.o-grid--float[class*=switch]>:nth-child(2n+2){float:left}.o-grid--float:not([class*=switch])>:nth-child(2n+2),.o-grid--float[class*=switch]>:nth-child(odd){float:right}}@media (min-width:70em){.o-grid--3\/8-switch>:nth-child(odd),.o-grid--3\/8>:nth-child(2n+2),.o-grid--3\/9-switch>:nth-child(odd),.o-grid--3\/9>:nth-child(2n+2),.o-grid--8\/3-switch>:nth-child(2n+2),.o-grid--8\/3>:nth-child(odd),.o-grid--9\/3-switch>:nth-child(2n+2),.o-grid--9\/3>:nth-child(odd){width:74.2857142857%}.o-grid--3\/8-switch>:nth-child(2n+2),.o-grid--3\/8>:nth-child(odd),.o-grid--3\/9-switch>:nth-child(2n+2),.o-grid--3\/9>:nth-child(odd),.o-grid--8\/3-switch>:nth-child(odd),.o-grid--8\/3>:nth-child(2n+2),.o-grid--9\/3-switch>:nth-child(odd),.o-grid--9\/3>:nth-child(2n+2){width:22.8571428571%}}.c-library{display:grid;min-height:100vh;grid-template-rows:auto 1fr auto}.c-library--components{grid-template-rows:auto 1fr}.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:9px;padding:var(--space-2xs);flex-direction:column;align-items:flex-start;background:#005461;color:#fff;font-weight:700}@media only screen and (min-width:650px){.c-library__header{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);flex-direction:row;align-items:center}}@media only screen and (min-width:1000px){.c-library__header{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:18px;padding:var(--space-s) var(--space-s-l)}}.c-library__header img{filter:saturate(0) brightness(10)}.c-library__header .c-library-page-active{position:relative}.c-library__header .c-library-page-active:after{content:"";position:absolute;left:0;width:100%;bottom:-6px;border-bottom:1px solid}.c-library__body{display:grid;grid-template-rows:auto auto}@media only screen and (min-width:600px){.c-library__body{grid-template-columns:10em 1fr}}@media only screen and (min-width:800px){.c-library__body{grid-template-columns:17em 1fr}}@media only screen and (min-width:600px){.c-library--components .c-library__body>*{overflow-y:scroll;height:calc(100vh - var(--headerHeight) - 1px)}}.c-library__sidebar{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2);border-right:1px solid #ebf1f2;grid-row:-1;scroll-behavior:none}@media only screen and (min-width:600px){.c-library__sidebar{grid-row:auto}}@media only screen and (min-width:800px){.c-library__sidebar{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}}.c-library__sidebar>*{padding:18px;padding:var(--space-s-l) var(--space-s) var(--space-s-l) var(--space-s-l)}.c-library__sidebar li{position:relative}.c-library__sidebar li a{color:#006daf}.c-library__sidebar li a:hover{text-decoration:underline;color:#006daf}.c-library__sidebar li+li{margin-top:13.5px;margin-top:var(--space-xs)}.c-library__sidebar ul ul{padding:13.5px;padding:var(--space-xs);padding-bottom:0}.c-library__sidebar ul ul li+li{margin-top:9px;margin-top:var(--space-2xs)}.c-library__skip-link{padding:13.5px;padding:var(--space-xs)}@media only screen and (min-width:600px){.c-library__skip-link{display:none}}.c-library__logo{display:flex;align-items:center;max-width:15%;min-width:100px}.c-library__logo-name{padding-left:13.5px;padding-left:var(--space-xs-s);margin-left:13.5px;margin-left:var(--space-xs-s);border-left:1px solid #3d7b87;white-space:nowrap}.c-library__logo-name span{display:block}.c-library__logo-name span:last-child,.c-library__logo-name span:nth-last-child(3){text-transform:uppercase;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);letter-spacing:.08em;color:#bfd3d6}.c-library__logo-name span:nth-last-child(2){color:#fff;letter-spacing:-.03em;font-size:37.32px;font-size:var(--step-4)}.c-library__logo-name span:nth-last-child(3){color:#3d7b87}.has-js .c-library__sidebar ul>li>ul{display:none}.has-js .c-library__sidebar ul>.c-library-accordion-open>ul{display:block}.c-library .c-library-accordion-open>.c-library-accordion__toggle{transform:rotate(180deg)}.c-library .c-library-accordion__toggle{color:#006daf;line-height:1;font-size:1rem;position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;padding:.25rem}.c-library-menu-active{font-weight:700;position:relative}.c-library-menu-active:before{content:"▸ ";position:absolute;left:-17px;top:0}.c-library-stretch{display:flex;flex-direction:column;flex:1}.c-library__main{overflow-y:auto}@media only screen and (min-width:600px){.c-library__main{overflow-y:scroll}}.c-library__frame{position:relative;width:100%}.c-library__frame-links{position:absolute;right:0;top:calc(var(--space-m)*-1 + var(--space-s)*-1);z-index:1}.c-library__frame-links a,.c-library__frame-links button{border-radius:0 0 .25em .25em;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:.25em .666em;background:#bfd3d6;color:#6c6c6c}.c-library__frame-background{border-radius:0 0 0 .25em;top:0}.c-library__frame iframe{position:absolute;height:100%;width:100%;left:0;top:0;transition:all .3s cubic-bezier(.22,.61,.36,1)}.c-library-code,.c-library-pre{font-family:Source Code Pro}.c-library-pre{overflow-x:auto;background:#ebf1f2;padding:18px;padding:var(--space-s);line-height:1.4}.c-library-pre--bordered{border-bottom:1px solid #bfd3d6}.c-library-status,.c-library-version{letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);color:#6c6c6c}.c-library-status{padding:.25em .666em;border-radius:.25em;background:#bfd3d6}.c-library-status--ready{background:#13aa13;color:#fff}.c-library-status--development,.c-library-status--in-production,.c-library-status--placeholder{background:#f2a60d;color:#fff}.c-library-status--deprecated{background:#ce0058;color:#fff}.c-library__swatch-grid{display:grid;gap:0 1em;grid-auto-rows:minmax(4em,auto);margin-bottom:var(--space-m)}@media only screen and (min-width:680px){.c-library__swatch-grid{gap:0;grid-template-columns:repeat(5,auto);grid-template-rows:5em auto}}.c-library__swatch-grid--has-labels{grid-template-columns:15em auto;grid-template-rows:auto;grid-auto-flow:row}@media only screen and (min-width:1000px){.c-library__swatch-grid--has-labels{grid-auto-flow:column;grid-template-columns:repeat(5,1fr);grid-template-rows:5em auto}}.c-library__swatch-labels,.c-library__swatches{display:grid;grid-template-columns:repeat(auto-fit,165px)}.c-library__swatch{display:flex}.c-library__swatch>*{justify-content:center;font-weight:700;margin:auto}.c-library__swatches>*{height:0;padding-bottom:50%;position:relative}.c-library__swatches>*>*{display:flex;justify-content:center;align-items:center;padding:.5rem;font-weight:700;text-align:center;position:absolute;height:100%;width:100%;left:0;top:0}.c-library__swatch-grid table{letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__swatch-grid table td,.c-library__swatch-grid table th{padding:9px 0 9px 4.5px;padding:var(--space-2xs) 0 var(--space-2xs) var(--space-3xs)}.c-library__swatch-grid table th{widtH:3em}.c-library__swatch-grid table td{font-family:monospace}.c-library__image-row{display:flex;max-width:100%}.c-library__image-row img{flex:1 1 auto;margin:0 2% 0 0;object-fit:contain;width:6%}.c-library__image-row img:last-child{margin-right:0}.c-library__space{display:block}.c-library__space span{background:linear-gradient(45deg,hsla(0,0%,100%,.2),hsla(0,0%,100%,0)),rgba(206,0,88,.5);height:0;padding-bottom:100%;position:relative;display:block}.c-library__space code{position:absolute;line-height:1;left:100%;top:50%;margin-left:18px;margin-left:var(--space-s);white-space:nowrap;transform:translateY(-50%)}.c-library-grid{background:#00758c;padding:3rem 1rem;display:flex;justify-content:center;align-items:center;color:#fff;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1)}.c-library-grid--alt{background:#3d7b87;padding:2rem 1rem}.c-library-grid--alt:before{content:" ";display:block}.c-library-grid--first{background:#005461;padding:2rem 1rem}.c-library-grid--first:before{content:"First on mobile"}.c-library-copy{position:relative}.c-library-copy__trigger{position:absolute;background:#bfd3d6;bottom:0;right:0;font-weight:700;letter-spacing:-.01em;font-size:15px;font-size:var(--step--1);padding:4.5px 9px;padding:var(--space-3xs) var(--space-2xs);letter-spacing:.02em}.c-library-copy__trigger:hover{color:#ce0058}.c-library__typo__sidebar{width:14.2857142857%}.c-library__typo__sidebar span{display:block}.c-library__typo__sidebar .x2{margin-top:4.25em;border:1px solid #333;border-width:1px 0;height:2em;line-height:2em}.c-library__typo__main{width:82.8571428571%}.c-library__semi{font-weight:600}.c-library__photo-grid{display:grid;gap:2px;grid-template-columns:1fr;margin-top:54px;margin-top:var(--space-xl)}@media only screen and (min-width:880px){.c-library__photo-grid{grid-auto-flow:dense;grid-auto-rows:auto}.c-library__photo-grid img{height:100%;width:100%;object-fit:cover}.c-library__photo-grid div{grid-column:1/3;grid-row:1/2;display:flex}.c-library__photo-grid div h2{margin:auto var(--space-s)}.c-library__photo-grid.grid-1{grid-template-columns:40% 20% 40%;grid-template-rows:var(--space-2xl) 400px 400px}.c-library__photo-grid.grid-1 img:nth-child(2){grid-row:2/3;grid-column:1/3}.c-library__photo-grid.grid-1 img:nth-child(3){grid-column:3/4;grid-row:1/3}.c-library__photo-grid.grid-1 img:nth-child(5){grid-column:2/4}.c-library__photo-grid.grid-2{grid-template-columns:50% 50%;grid-template-rows:var(--space-2xl) 300px 300px}.c-library__photo-grid.grid-2 div{grid-column:1/2}.c-library__photo-grid.grid-2 img:nth-child(2){grid-row:2/4}.c-library__photo-grid.grid-2 img:nth-child(3){grid-row:1/3}}.c-library .c-alert ul li{list-style:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="20" viewBox="0 0 10 20"><circle cx="5" cy="14" r="3.5" fill="%2313AA13" fill-rule="evenodd"/></svg>') outside;margin-left:1em;padding-left:.5rem}.c-library .c-alert ul li h3,.c-library .c-alert ul li h4{line-height:1.6;font-size:1em;color:#13aa13}@media only screen and (max-width:1050px){.c-library__logo-name span:last-child,.c-library__logo-name span:nth-last-child(3){letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}.c-library__logo-name span:nth-last-child(2){letter-spacing:-.02em;font-size:21.6px;font-size:var(--step-1)}.c-library__header nav li:last-child{display:none}}@media only screen and (min-width:650px) and (max-width:700px),screen and (max-width:450px){.c-library__header nav .u-row{gap:9px;gap:var(--space-2xs);letter-spacing:-.01em;font-size:12.5px;font-size:var(--step--2)}}@media only screen and (max-width:650px){.c-library__header nav a{padding:9px 0;padding:var(--space-2xs) 0;display:block}.c-library__header .c-library-page-active:after{bottom:4.5px;bottom:var(--space-3xs)}}
 /*# sourceMappingURL=../library.css.map */

package/dist/build/scss/library.css.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["scss\\library.scss","scss\\tools\\breakout.scss","scss\\foundations\\typography.scss","scss\\foundations\\space.scss","scss\\tools\\index.scss","scss\\elements\\reset.scss","scss\\objects\\syntax-highlighting.scss","scss\\utilities\\hr.scss","scss\\objects\\grid.scss"],"names":[],"mappings":"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","file":"library.css","sourceRoot":"..\\..\\src\\assets","sourcesContent":["@import './tools';\r\n@import './foundations';\r\n@import './elements/reset';\r\n@import './objects/syntax-highlighting';\r\n@import './utilities/hr.scss';\r\n@import './objects/grid';\r\n\r\n@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');\r\n\r\n.c-library {\r\n display: grid;\r\n min-height: 100vh;\r\n grid-template-rows: auto 1fr auto;\r\n \r\n &--components {\r\n grid-template-rows: auto 1fr;\r\n }\r\n\r\n &__header {\r\n @include step(-1);\r\n @include padding('2xs');\r\n flex-direction: column;\r\n align-items: flex-start;\r\n \r\n background: color('petrol');\r\n color: color('white');\r\n font-weight: weight('bold');\r\n \r\n @media only screen and (min-width:650px) {\r\n @include step(-2);\r\n flex-direction: row;\r\n align-items: center;\r\n }\r\n\r\n @media only screen and (min-width:1000px) {\r\n @include step(-1);\r\n @include padding('s', 's-l');\r\n }\r\n\r\n img {\r\n filter: saturate(0) brightness(10);\r\n }\r\n\r\n .c-library-page-active {\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n width: 100%;\r\n bottom: -6px;\r\n border-bottom: 1px solid;\r\n }\r\n }\r\n }\r\n\r\n &__body {\r\n display: grid;\r\n grid-template-rows: auto auto;\r\n\r\n @media only screen and (min-width: 600px) {\r\n grid-template-columns: 10em 1fr;\r\n }\r\n \r\n @media only screen and (min-width: 800px) {\r\n grid-template-columns: 17em 1fr;\r\n }\r\n }\r\n\r\n @media only screen and (min-width: 600px) {\r\n &--components &__body > * {\r\n overflow-y: scroll;\r\n height: calc(100vh - 115px);\r\n }\r\n }\r\n\r\n &__sidebar {\r\n @include step(-2);\r\n border-right: 1px solid color('petrol', 'step-3');\r\n grid-row: -1;\r\n scroll-behavior: none;\r\n \r\n @media only screen and (min-width: 600px) {\r\n grid-row: auto;\r\n }\r\n\r\n @media only screen and (min-width: 800px) {\r\n @include step(-1);\r\n }\r\n\r\n & > * {\r\n @include padding('s-l', 's', 's-l', 's-l');\r\n }\r\n\r\n li {\r\n position: relative;\r\n }\r\n\r\n li a {\r\n color: color('utility-blue');\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n color: color('utility-blue');\r\n }\r\n }\r\n\r\n li + li {\r\n @include margin-top('xs');\r\n }\r\n\r\n ul ul {\r\n @include padding('xs');\r\n padding-bottom: 0;\r\n\r\n li + li {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n }\r\n\r\n &__skip-link {\r\n @include padding('xs');\r\n \r\n @media only screen and (min-width: 600px) {\r\n display: none;\r\n }\r\n }\r\n\r\n &__logo {\r\n display: flex;\r\n align-items: center;\r\n // margin-left: -110px;\r\n max-width: 15%;\r\n min-width: 100px;\r\n\r\n @media only screen and (min-width:600px) {\r\n // margin-left: 0;\r\n }\r\n \r\n &-name {\r\n @include padding-left('xs-s');\r\n @include margin-left('xs-s');\r\n border-left: 1px solid color('petrol', 'step-1');\r\n white-space: nowrap;\r\n\r\n span {\r\n display: block;\r\n\r\n &:nth-last-child(3),\r\n &:nth-last-child(1) {\r\n text-transform: uppercase;\r\n @include step(-1);\r\n letter-spacing: 0.08em;\r\n color: color('petrol', 'step-2');\r\n }\r\n\r\n &:nth-last-child(2) {\r\n color: color('white');\r\n @include step(4);\r\n }\r\n\r\n &:nth-last-child(3) {\r\n color: color('petrol', 'step-1');\r\n }\r\n }\r\n }\r\n }\r\n\r\n .has-js &__sidebar ul > li > ul {\r\n display: none;\r\n }\r\n\r\n .has-js &__sidebar ul > .c-library-accordion-open > ul {\r\n display: block;\r\n }\r\n\r\n .c-library-accordion-open > .c-library-accordion__toggle {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .c-library-accordion__toggle {\r\n color: color('utility-blue');\r\n line-height: 1;\r\n font-size: 1rem;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.25rem;\r\n }\r\n\r\n &-menu-active {\r\n font-weight: weight('bold');\r\n position: relative;\r\n\r\n &::before {\r\n content: '▸ ';\r\n position: absolute;\r\n left: -17px;\r\n top: 0;\r\n }\r\n }\r\n\r\n &-stretch {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n\r\n &__main {\r\n overflow-y: scroll;\r\n }\r\n\r\n &__frame {\r\n position: relative;\r\n width: 100%;\r\n \r\n &-links {\r\n position: absolute;\r\n right: 0;\r\n top: calc(-1 * (var(--space-m) + var(--space-s)));\r\n z-index: 1;\r\n\r\n a, button {\r\n border-radius: 0 0 0.25em 0.25em;\r\n @include step(-1);\r\n padding: 0.25em 0.666em;\r\n background: color('petrol', 'step-2');\r\n color: color('grey', 'step-1');\r\n }\r\n }\r\n\r\n &-background {\r\n border-radius: 0 0 0 0.25em;\r\n top: 0;\r\n }\r\n\r\n iframe {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n }\r\n }\r\n\r\n &-code {\r\n font-family: 'Source Code Pro';\r\n }\r\n\r\n &-pre {\r\n overflow-x: auto;\r\n background: color('petrol', 'step-3');\r\n @include padding('s');\r\n font-family: 'Source Code Pro';\r\n line-height: 1.4;\r\n\r\n &--bordered {\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n }\r\n }\r\n\r\n &-version {\r\n @include step(-1);\r\n color: color('grey', 'step-1');\r\n }\r\n\r\n &-status {\r\n @include step(-1);\r\n padding: 0.25em 0.666em;\r\n border-radius: 0.25em;\r\n background: color('petrol', 'step-2');\r\n color: color('grey', 'step-1');\r\n\r\n &--ready {\r\n background: color('green');\r\n color: color('white');\r\n }\r\n\r\n &--in-production,\r\n &--development,\r\n &--placeholder {\r\n background: color('utility-orange');\r\n color: color('white');\r\n }\r\n\r\n &--deprecated {\r\n background: color('red');\r\n color: color('white');\r\n }\r\n }\r\n\r\n &__swatch-grid {\r\n display: grid;\r\n gap: 0 1em;\r\n grid-auto-rows: minmax(4em, auto);\r\n margin-bottom: var(--space-m);\r\n \r\n @media only screen and (min-width: 680px) {\r\n gap: 0;\r\n grid-template-columns: repeat(5, auto);\r\n grid-template-rows: 5em auto;\r\n }\r\n }\r\n \r\n &__swatch-grid--has-labels {\r\n grid-template-columns: 15em auto;\r\n grid-template-rows: auto;\r\n grid-auto-flow: row;\r\n \r\n @media only screen and (min-width:1000px) {\r\n grid-auto-flow: column;\r\n grid-template-columns: repeat(5, 1fr);\r\n grid-template-rows: 5em auto;\r\n }\r\n }\r\n \r\n &__swatches,\r\n &__swatch-labels {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, 165px);\r\n }\r\n \r\n &__swatch {\r\n display: flex;\r\n \r\n & > * {\r\n justify-content: center;\r\n font-weight: weight('bold');\r\n margin: auto;\r\n }\r\n }\r\n \r\n &__swatches {\r\n & > * {\r\n height: 0;\r\n padding-bottom: 50%;\r\n position: relative;\r\n \r\n & > * {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0.5rem;\r\n font-weight: weight('bold');\r\n text-align: center;\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n }\r\n }\r\n }\r\n \r\n &__swatch-grid table {\r\n @include step(-2);\r\n \r\n td,\r\n th {\r\n @include padding('2xs', 0, '2xs', '3xs');\r\n }\r\n th {\r\n widtH: 3em;\r\n }\r\n td {\r\n font-family: monospace;\r\n }\r\n }\r\n\r\n &__image-row {\r\n display: flex;\r\n max-width: 100%;\r\n\r\n img {\r\n flex: 1 1 auto;\r\n margin: 0 2% 0 0;\r\n object-fit: contain;\r\n width: 6%;\r\n\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n\r\n &__space {\r\n display: block;\r\n\r\n span {\r\n background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(206, 0, 88, 0.5);\r\n height: 0;\r\n padding-bottom: 100%;\r\n position: relative;\r\n display: block;\r\n }\r\n\r\n code {\r\n position: absolute;\r\n line-height: 1;\r\n left: 100%;\r\n top: 50%;\r\n @include margin-left('s');\r\n white-space: nowrap;\r\n transform: translateY(-50%);\r\n }\r\n }\r\n\r\n &-grid {\r\n background: color('blue', 'step--1');\r\n padding: 3rem 1rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: color('white');\r\n @include step(-1);\r\n\r\n &--alt {\r\n background: color('petrol', 'step-1');\r\n padding: 2rem 1rem;\r\n \r\n &:before {\r\n content: '\\00a0';\r\n display: block;\r\n }\r\n }\r\n\r\n &--first {\r\n background: color('petrol');\r\n padding: 2rem 1rem;\r\n \r\n &:before {\r\n content: 'First on mobile';\r\n }\r\n }\r\n }\r\n\r\n &-copy {\r\n position: relative;\r\n\r\n &__trigger {\r\n position: absolute;\r\n background: color('petrol', 'step-2');\r\n bottom: 0;\r\n right: 0;\r\n font-weight: weight('bold');\r\n @include step(-1);\r\n @include padding('3xs', '2xs');\r\n letter-spacing: ls('2%');\r\n \r\n &:hover {\r\n color: color('red');\r\n }\r\n }\r\n }\r\n\r\n hr {\r\n @extend .u-hr\r\n }\r\n\r\n &__typo {\r\n\r\n &__sidebar {\r\n width: grid-column(2);\r\n\r\n span {\r\n display: block;\r\n\r\n }\r\n\r\n .x2 {\r\n margin-top: 4.25em;\r\n border: 1px solid color(\"grey\");\r\n border-width: 1px 0;\r\n height: 2em;\r\n line-height: 2em;\r\n }\r\n }\r\n\r\n &__main {\r\n width: grid-column(10);\r\n }\r\n }\r\n\r\n &__semi {\r\n font-weight: 600;\r\n }\r\n\r\n &__photo-grid {\r\n display: grid;\r\n gap: 2px;\r\n grid-template-columns: 1fr;\r\n @include margin-top(xl);\r\n\r\n @media only screen and (min-width: 880px) {\r\n grid-auto-flow: dense;\r\n grid-auto-rows: auto;\r\n\r\n img {\r\n height: 100%;\r\n width: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n div {\r\n grid-column: 1/3;\r\n grid-row: 1/2;\r\n display: flex;\r\n\r\n h2 {\r\n margin: auto var(--space-s);\r\n }\r\n }\r\n\r\n &.grid-1 {\r\n grid-template-columns: 40% 20% 40%;\r\n grid-template-rows: var(--space-2xl) 400px 400px;\r\n\r\n img { \r\n &:nth-child(2) {\r\n grid-row: 2/3;\r\n grid-column: 1/3;\r\n }\r\n \r\n &:nth-child(3) {\r\n grid-column: 3/4;\r\n grid-row: 1/3;\r\n }\r\n \r\n &:nth-child(5) {\r\n grid-column: 2/4;\r\n }\r\n }\r\n }\r\n\r\n &.grid-2 {\r\n grid-template-columns: 50% 50%;\r\n grid-template-rows: var(--space-2xl) 300px 300px;\r\n\r\n div {\r\n grid-column: 1/2;\r\n }\r\n\r\n img {\r\n &:nth-child(2) {\r\n grid-row: 2/4;\r\n }\r\n &:nth-child(3) {\r\n grid-row: 1/3;\r\n }\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n .c-alert ul li {\r\n list-style: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>') outside; \r\n margin-left: 1em;\r\n padding-left: 0.5rem;\r\n\r\n h3,\r\n h4 {\r\n line-height: lh('prose');\r\n font-size: 1em;\r\n color: color('green');\r\n }\r\n }\r\n}\r\n\r\n// Header responsive styles\r\n@media only screen and (max-width: 1050px) {\r\n .c-library__logo-name span:nth-last-child(3),\r\n .c-library__logo-name span:nth-last-child(1) {\r\n @include step(-2);\r\n }\r\n\r\n .c-library__logo-name span:nth-last-child(2) {\r\n @include step(1);\r\n }\r\n\r\n .c-library__header nav li:last-child {\r\n display: none;\r\n }\r\n}\r\n\r\n@media only screen and (min-width: 650px) and (max-width: 700px),\r\n screen and (max-width: 450px) {\r\n .c-library__header nav .u-row {\r\n @include space('gap', '2xs');\r\n @include step(-2);\r\n }\r\n}\r\n\r\n.c-library__header {\r\n @media only screen and (max-width: 650px) {\r\n nav a {\r\n @include padding('2xs',0);\r\n display: block;\r\n }\r\n\r\n .c-library-page-active:after {\r\n @include space('bottom','3xs');\r\n }\r\n }\r\n}","// Breakout\r\n// Force an element to fill 100% of the window width, ignoring its container\r\n\r\n@mixin breakout($pad: 0) {\r\n left: 50%;\r\n position: relative;\r\n transform: translateX(-50vw);\r\n width: 100vw;\r\n padding-left: safe-space($pad);\r\n padding-right: safe-space($pad);\r\n}\r\n\r\n.u-breakout {\r\n @include breakout\r\n}","$weights: (\r\n base: 400,\r\n semi: 600,\r\n bold: 700\r\n);\r\n\r\n$line-heights: (\r\n base: 1.2,\r\n prose: 1.6,\r\n);\r\n\r\n$letter-spacings: (\r\n '4%': 0.04em,\r\n '2%': 0.02em,\r\n base: -0.01em,\r\n '-2%': -0.02em,\r\n '-3%': -0.03em\r\n);\r\n\r\n$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n\r\n/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, /\r\n$steps: (\r\n -2: (\r\n min: 12.64,\r\n max: 12.50,\r\n ls: base\r\n ),\r\n\r\n -1: (\r\n min: 14.22,\r\n max: 15.00,\r\n ls: base\r\n ),\r\n\r\n 0: (\r\n min: 16.00,\r\n max: 18.00,\r\n ls: base\r\n ),\r\n\r\n 1: (\r\n min: 18.00,\r\n max: 21.60,\r\n ls: '-2%'\r\n ),\r\n\r\n 2: (\r\n min: 20.25,\r\n max: 25.92,\r\n ls: '-2%'\r\n ),\r\n\r\n 3: (\r\n min: 22.78,\r\n max: 31.10,\r\n ls: '-2%'\r\n ),\r\n\r\n 4: (\r\n min: 25.63,\r\n max: 37.32,\r\n ls: '-3%'\r\n ),\r\n\r\n 5: (\r\n min: 28.83,\r\n max: 44.79,\r\n ls: '-3%'\r\n ),\r\n\r\n 6: (\r\n min: 32.44,\r\n max: 53.75,\r\n ls: '-3%'\r\n ),\r\n\r\n 7: (\r\n min: 36.49,\r\n max: 64.50,\r\n ls: '-3%'\r\n ),\r\n\r\n 8: (\r\n min: 41.05,\r\n max: 77.40,\r\n ls: '-3%'\r\n ),\r\n\r\n 9: (\r\n min: 46.18,\r\n max: 92.88,\r\n ls: '-3%'\r\n ),\r\n\r\n 10: (\r\n min: 51.96,\r\n max: 111.45,\r\n ls: '-3%'\r\n )\r\n);\r\n\r\n$f-min-width: 320;\r\n$f-max-width: 1332;\r\n\r\n:root {\r\n --fluid-min-width: #{$f-min-width};\r\n --fluid-max-width: #{$f-max-width};\r\n\r\n --fluid-screen: 100vw;\r\n --fluid-bp: calc(\r\n (var(--fluid-screen) - var(--fluid-min-width) / 16 1rem) /\r\n (var(--fluid-max-width) - var(--fluid-min-width))\r\n );\r\n}\r\n\r\n@media screen and (min-width: #{$f-max-width * 1px}) {\r\n :root {\r\n --fluid-screen: calc(var(--fluid-max-width) * 1px);\r\n }\r\n}\r\n\r\n:root {\r\n @each $name, $step in $steps {\r\n --f-#{$name}-min: #{map-get($step, min)};\r\n --f-#{$name}-max: #{map-get($step, max)};\r\n --step-#{$name}: calc(\r\n ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) \r\n var(--fluid-bp)\r\n );\r\n }\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 400;\r\n font-display: swap;\r\n src: url(\"../fonts/Inter-Regular.woff2\") format(\"woff2\"),\r\n url(\"../fonts/Inter-Regular.woff\") format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 600;\r\n font-display: swap;\r\n src: url('../fonts/Inter-SemiBold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-SemiBold.woff') format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 700;\r\n font-display: swap;\r\n src: url('../fonts/Inter-Bold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-Bold.woff') format(\"woff\");\r\n}","@use 'sass:math';\r\n\r\n$wrapper: 78.75rem;\r\n\r\n$space-base: 18;\r\n$spaces: (\r\n \"3xs\": 0.25,\r\n \"2xs\": 0.5,\r\n \"xs\": 0.75,\r\n \"s\": 1,\r\n \"m\": 1.5,\r\n \"l\": 2,\r\n \"xl\": 3,\r\n \"2xl\": 4,\r\n \"3xl\": 6,\r\n \"4xl\": 8,\r\n);\r\n\r\n:root {\r\n --max-screen: #{ math.div($f-max-width, 16) };\r\n --fc-screen: 100vw;\r\n --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));\r\n\r\n --fc-base: #{$space-base};\r\n\r\n @each $space, $_ in $spaces {\r\n --fc-#{$space}: #{space-size($space)};\r\n --space-#{$space}: calc(var(--fc-#{$space}) / 16 1rem);\r\n }\r\n\r\n $min: \"\";\r\n @each $max, $_ in $spaces {\r\n @if ($min) {\r\n @include space-between($min, $max);\r\n }\r\n $min: $max;\r\n }\r\n\r\n @include space-between(s, l);\r\n @include space-between(s, m);\r\n @include space-between(xs, l);\r\n @include space-between(m, xl);\r\n @include space-between(l, 2xl);\r\n @include space-between(s, xl);\r\n @include space-between(l, 3xl);\r\n @include space-between(xl, 3xl);\r\n @include space-between(l, 4xl);\r\n @include space-between(3xs, m);\r\n\r\n --gutter: var(--space-s-l);\r\n}\r\n\r\n@media screen and (min-width: 75em) {\r\n :root {\r\n --fc-screen: calc(var(--max-screen) * 1rem);\r\n }\r\n}\r\n","@import './breakout.scss';\r\n\r\n@function color($palette, $tone: 'step-0') {\r\n @return map-get(map-get($colours, $palette), $tone);\r\n}\r\n\r\n@function lh($size: 'base') {\r\n @return map-get($line-heights, $size);\r\n}\r\n\r\n@function ls($size: 'base') {\r\n @return map-get($letter-spacings, $size);\r\n}\r\n\r\n@function weight($size: 'base') {\r\n @return map-get($weights, $size);\r\n}\r\n\r\n@mixin step($step: 0) {\r\n letter-spacing: ls(map-get(map-get($steps, $step), ls));\r\n font-size: 1px * map-get(map-get($steps, $step), max);\r\n font-size: var(--step-#{$step});\r\n}\r\n\r\n@mixin flow($size) {\r\n & > * + * {\r\n @include margin-top($size);\r\n }\r\n}\r\n\r\n@function space-size($key: s) {\r\n @return $space-base * map-get($spaces, $key);\r\n}\r\n\r\n@function space-unit($key: s) {\r\n @return space-size($key) * 1px;\r\n}\r\n\r\n@mixin space-between($min, $max) {\r\n --space-#{$min}-#{$max}: calc(\r\n ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) \r\n var(--fluid-bp)\r\n );\r\n}\r\n\r\n@function safe-space($value, $safe: false) {\r\n @if (type-of($value) == number) {\r\n @return $value;\r\n } @else if (type-of($value) == null) {\r\n @return 0;\r\n } @else if (type-of($value) == string) {\r\n $split: get-min-max($value);\r\n $min: nth($split, 1);\r\n\r\n @if ($value == 'gutter') {\r\n @if ($safe) {\r\n @return space-unit(s);\r\n } @else {\r\n @return var(--gutter); \r\n }\r\n }\r\n\r\n @if ($value == 'auto') {\r\n @return auto;\r\n }\r\n \r\n @if ($safe) {\r\n @return space-unit($min);\r\n } @else {\r\n @return var(--space-#{$value}); \r\n }\r\n }\r\n}\r\n\r\n@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }\r\n@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }\r\n@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }\r\n@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }\r\n@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }\r\n@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }\r\n@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }\r\n@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }\r\n@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }\r\n@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }\r\n@mixin top($arg1: '') { @include space('top', $arg1); }\r\n\r\n@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {\r\n @if ($arg4 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);\r\n } @else if ($arg3 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);\r\n } @else if ($arg2 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2);\r\n } @else if ($arg1 != '') {\r\n #{$property}: safe-space($arg1, true);\r\n #{$property}: safe-space($arg1);\r\n }\r\n}\r\n\r\n@function get-min-max($value) {\r\n $split: str-split($value, '-');\r\n $min: nth($split, 1);\r\n\r\n @if (length($split) == 1) {\r\n @return ($min, null);\r\n } @else {\r\n @return ($min, nth($split, 2))\r\n }\r\n}\r\n\r\n@function str-split($string, $separator) {\r\n // empty array/list\r\n $split-arr: ();\r\n // first index of separator in string\r\n $index : str-index($string, $separator);\r\n // loop through string\r\n @while $index != null {\r\n // get the substring from the first character to the separator\r\n $item: str-slice($string, 1, $index - 1);\r\n // push item to array\r\n $split-arr: append($split-arr, $item);\r\n // remove item and separator from string\r\n $string: str-slice($string, $index + 1);\r\n // find new index of separator\r\n $index : str-index($string, $separator);\r\n }\r\n // add the remaining string to list (the last item)\r\n $split-arr: append($split-arr, $string);\r\n\r\n @return $split-arr;\r\n}\r\n\r\n@mixin hyphenated {\r\n @media only screen and (max-width: 28rem) {\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n\r\n @media only screen and (max-width: 70rem) {\r\n [lang='de-DE'] & {\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n }\r\n}","\r\n,\r\n:before,\r\n:after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n min-height: 100vh;\r\n margin: 0;\r\n}\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nblockquote,\r\npre,\r\nol,\r\nul,\r\nfigure {\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n height: auto;\r\n border: none;\r\n}\r\n\r\narticle,\r\naside,\r\nfigure,\r\nfooter,\r\nheader,\r\naside,\r\nmain,\r\nnav {\r\n display: block;\r\n}\r\n\r\niframe {\r\n border: none;\r\n}\r\n\r\n// Typography\r\n\r\n@mixin mp-reset-base {\r\n font: weight() #{1.125rem}/lh() $font-stack;\r\n @include step();\r\n color: color('grey');\r\n}\r\n\r\nbody {\r\n @include mp-reset-base();\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nul,\r\nol,\r\ndl {\r\n margin: 0\r\n}\r\n\r\nul, ol, p {\r\n line-height: lh();\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\na,\r\na:hover {\r\n cursor: pointer;\r\n color: inherit;\r\n}\r\n\r\n// Lists\r\n\r\n.mp ol,\r\n.mp ul {\r\n list-style: none;\r\n}\r\n\r\n// Font styles\r\n\r\ncite,\r\naddress {\r\n font-style: normal;\r\n}\r\n\r\n// Form\r\n\r\n[type=\"submit\"],\r\n[type=\"button\"],\r\nbutton {\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n}\r\n\r\n[disabled],\r\n.mp.c-button[disabled] {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\nlabel {\r\n cursor: pointer;\r\n}\r\n\r\nfieldset {\r\n border: 0;\r\n padding: 0.01em 0 0 0;\r\n}\r\n\r\n// Animation\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n * {\r\n -webkit-animation: none!important;\r\n animation: none!important;\r\n transition: none!important;\r\n scroll-behavior: auto!important;\r\n }\r\n}\r\n","code[class=\"language-\"],\r\npre[class=\"language-\"] {\r\n\ttext-align: left;\r\n\twhite-space: pre;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n color: color('petrol', 'step-1');\r\n background: color('petrol', 'step-3');\r\n font-family: 'Source Code Pro', monospace;\r\n\tfont-size: 1rem;\r\n\tline-height: 1.5em;\r\n\r\n\t-moz-tab-size: 4;\r\n\t-o-tab-size: 4;\r\n\ttab-size: 4;\r\n\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n}\r\n\r\ncode[class=\"language-\"]::-moz-selection,\r\npre[class=\"language-\"]::-moz-selection,\r\ncode[class=\"language-\"] ::-moz-selection,\r\npre[class=\"language-\"] ::-moz-selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\ncode[class=\"language-\"]::selection,\r\npre[class=\"language-\"]::selection,\r\ncode[class=\"language-\"] ::selection,\r\npre[class=\"language-\"] ::selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\n:not(pre) > code[class=\"language-\"] {\r\n\twhite-space: normal;\r\n\tborder-radius: 0.2em;\r\n\tpadding: 0.1em;\r\n}\r\n\r\npre[class=\"language-\"] {\r\n\toverflow: auto;\r\n position: relative;\r\n @include padding('s');\r\n}\r\n\r\n.language-css > code,\r\n.language-sass > code,\r\n.language-scss > code {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n[class=\"language-\"] .namespace {\r\n\topacity: 0.7;\r\n}\r\n\r\n.token.atrule {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.attr-name {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.attr-value {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.attribute {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.boolean {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.builtin {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.cdata {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.char {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class-name {\r\n\tcolor: #6182b8;\r\n}\r\n\r\n.token.comment {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.constant {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.deleted {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.doctype {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.entity {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.function {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.hexcode {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.id {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.important {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.inserted {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.keyword {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.number {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.operator {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.prolog {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.property {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.pseudo-class {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.pseudo-element {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.punctuation {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.regex {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.selector {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.string {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.symbol {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.tag {\r\n\tcolor: color('petrol');\r\n}\r\n\r\n.token.unit {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.url {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.variable {\r\n\tcolor: color('red');\r\n}\r\n\r\n",".u-hr {\r\n margin: 0;\r\n border: none;\r\n @include padding-bottom('m-xl');\r\n @include margin-bottom('m-xl');\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-top {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border {\r\n border: 1px solid color('petrol', 'step-2');\r\n}","@use 'sass:math';\r\n\r\n// Layout\r\n$grid-width: 1260;\r\n$grid-columns: 12;\r\n$grid-column-width: 72;\r\n$grid-gutter-width: 36;\r\n\r\n@function grid-gutter() {\r\n @return math.div($grid-gutter-width, $grid-width) 100%;\r\n}\r\n\r\n@function grid-column($count) {\r\n @return math.div(\r\n (\r\n ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)\r\n ), $grid-width\r\n ) * 100%;\r\n}\r\n\r\n@function grid-column-px($count) {\r\n @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;\r\n}\r\n\r\n.o-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: stretch;\r\n margin-bottom: calc(-1 * #{space-unit()});\r\n margin-bottom: calc(-1 * var(--gutter));\r\n width: 100%;\r\n\r\n &--float:after {\r\n content: \" \";\r\n display: table;\r\n clear: both;\r\n }\r\n\r\n &--between {\r\n justify-content: space-between;\r\n }\r\n\r\n &--no-height-match {\r\n align-items: start;\r\n }\r\n\r\n & > * {\r\n width: 100%;\r\n @include margin-bottom(\"gutter\");\r\n }\r\n\r\n &--of-two {\r\n @media (min-width: 40em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-two-late {\r\n @media (min-width: 55em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-three {\r\n @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n & > * {\r\n width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);\r\n width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(3n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-three-late {\r\n @media (min-width: 38em) and (max-width: 67.9375em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 68em) {\r\n & > * {\r\n width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);\r\n width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(3n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-four {\r\n @media (min-width: 38em) and (max-width: 59.9375em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60em) {\r\n & > * {\r\n width: calc((25% - (3 * #{space-unit()} / 4)) - 0.1px);\r\n width: calc((25% - (3 * var(--gutter) / 4)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(4n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--swipeable {\r\n @media (max-width: 54.9375em) {\r\n @include breakout('gutter');\r\n flex-wrap: nowrap;\r\n overflow-x: scroll;\r\n scroll-snap-type: x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n\r\n & > * {\r\n flex: 0 0 auto;\r\n max-width: 23em;\r\n width: calc(85vw - var(--gutter)2.333); // !important\r\n scroll-snap-align: center;\r\n }\r\n\r\n & > + * {\r\n margin-left: var(--gutter) !important;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n &--4\\/7 > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 2) {\r\n width: grid-column(7)\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--8\\/4 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/4-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(8);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--4\\/8 > :nth-child(2n + 1),\r\n &--4\\/7 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 1) {\r\n width: grid-column(4);\r\n }\r\n\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n margin-left: grid-gutter();\r\n margin-right: 0;\r\n }\r\n\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n max-width: grid-column-px(8);\r\n }\r\n\r\n &[class=\"switch\"] > :nth-child(2n + 1) {\r\n order: 1;\r\n }\r\n\r\n &--layout {\r\n margin-bottom: 0;\r\n\r\n & > :nth-last-child(1),\r\n & > :nth-last-child(2) {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n &--push {\r\n justify-content: space-between;\r\n }\r\n\r\n &--pull {\r\n justify-content: flex-start;\r\n }\r\n\r\n &--float {\r\n display: block;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 1),\r\n &--float[class=\"switch\"] > :nth-child(2n + 2) {\r\n float: left;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 2),\r\n &--float[class*=\"switch\"] > :nth-child(2n + 1) {\r\n float: right;\r\n }\r\n }\r\n\r\n @media (min-width: 70em) {\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(9);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2) {\r\n width: grid-column(3);\r\n }\r\n }\r\n}\r\n"]}
1	+ {"version":3,"sources":["scss\\library.scss","scss\\tools\\breakout.scss","scss\\foundations\\typography.scss","scss\\foundations\\space.scss","scss\\tools\\index.scss","scss\\elements\\reset.scss","scss\\objects\\syntax-highlighting.scss","scss\\utilities\\hr.scss","scss\\objects\\grid.scss"],"names":[],"mappings":"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","file":"library.css","sourceRoot":"..\\..\\src\\assets","sourcesContent":["@import './tools';\r\n@import './foundations';\r\n@import './elements/reset';\r\n@import './objects/syntax-highlighting';\r\n@import './utilities/hr.scss';\r\n@import './objects/grid';\r\n\r\n@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');\r\n\r\n.c-library {\r\n display: grid;\r\n min-height: 100vh;\r\n grid-template-rows: auto 1fr auto;\r\n \r\n &--components {\r\n grid-template-rows: auto 1fr;\r\n }\r\n\r\n &__header {\r\n @include step(-1);\r\n @include padding('2xs');\r\n flex-direction: column;\r\n align-items: flex-start;\r\n \r\n background: color('petrol');\r\n color: color('white');\r\n font-weight: weight('bold');\r\n \r\n @media only screen and (min-width:650px) {\r\n @include step(-2);\r\n flex-direction: row;\r\n align-items: center;\r\n }\r\n\r\n @media only screen and (min-width:1000px) {\r\n @include step(-1);\r\n @include padding('s', 's-l');\r\n }\r\n\r\n img {\r\n filter: saturate(0) brightness(10);\r\n }\r\n\r\n .c-library-page-active {\r\n position: relative;\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n left: 0;\r\n width: 100%;\r\n bottom: -6px;\r\n border-bottom: 1px solid;\r\n }\r\n }\r\n }\r\n\r\n &__body {\r\n display: grid;\r\n grid-template-rows: auto auto;\r\n\r\n @media only screen and (min-width: 600px) {\r\n grid-template-columns: 10em 1fr;\r\n }\r\n \r\n @media only screen and (min-width: 800px) {\r\n grid-template-columns: 17em 1fr;\r\n }\r\n }\r\n\r\n @media only screen and (min-width: 600px) {\r\n &--components &__body > * {\r\n overflow-y: scroll;\r\n height: calc( 100vh - var(--headerHeight) - 1px );\r\n }\r\n }\r\n\r\n &__sidebar {\r\n @include step(-2);\r\n border-right: 1px solid color('petrol', 'step-3');\r\n grid-row: -1;\r\n scroll-behavior: none;\r\n \r\n @media only screen and (min-width: 600px) {\r\n grid-row: auto;\r\n }\r\n\r\n @media only screen and (min-width: 800px) {\r\n @include step(-1);\r\n }\r\n\r\n & > * {\r\n @include padding('s-l', 's', 's-l', 's-l');\r\n }\r\n\r\n li {\r\n position: relative;\r\n }\r\n\r\n li a {\r\n color: color('utility-blue');\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n color: color('utility-blue');\r\n }\r\n }\r\n\r\n li + li {\r\n @include margin-top('xs');\r\n }\r\n\r\n ul ul {\r\n @include padding('xs');\r\n padding-bottom: 0;\r\n\r\n li + li {\r\n @include margin-top('2xs');\r\n }\r\n }\r\n }\r\n\r\n &__skip-link {\r\n @include padding('xs');\r\n \r\n @media only screen and (min-width: 600px) {\r\n display: none;\r\n }\r\n }\r\n\r\n &__logo {\r\n display: flex;\r\n align-items: center;\r\n // margin-left: -110px;\r\n max-width: 15%;\r\n min-width: 100px;\r\n\r\n @media only screen and (min-width:600px) {\r\n // margin-left: 0;\r\n }\r\n \r\n &-name {\r\n @include padding-left('xs-s');\r\n @include margin-left('xs-s');\r\n border-left: 1px solid color('petrol', 'step-1');\r\n white-space: nowrap;\r\n\r\n span {\r\n display: block;\r\n\r\n &:nth-last-child(3),\r\n &:nth-last-child(1) {\r\n text-transform: uppercase;\r\n @include step(-1);\r\n letter-spacing: 0.08em;\r\n color: color('petrol', 'step-2');\r\n }\r\n\r\n &:nth-last-child(2) {\r\n color: color('white');\r\n @include step(4);\r\n }\r\n\r\n &:nth-last-child(3) {\r\n color: color('petrol', 'step-1');\r\n }\r\n }\r\n }\r\n }\r\n\r\n .has-js &__sidebar ul > li > ul {\r\n display: none;\r\n }\r\n\r\n .has-js &__sidebar ul > .c-library-accordion-open > ul {\r\n display: block;\r\n }\r\n\r\n .c-library-accordion-open > .c-library-accordion__toggle {\r\n transform: rotate(180deg);\r\n }\r\n\r\n .c-library-accordion__toggle {\r\n color: color('utility-blue');\r\n line-height: 1;\r\n font-size: 1rem;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 0.25rem;\r\n }\r\n\r\n &-menu-active {\r\n font-weight: weight('bold');\r\n position: relative;\r\n\r\n &::before {\r\n content: '▸ ';\r\n position: absolute;\r\n left: -17px;\r\n top: 0;\r\n }\r\n }\r\n\r\n &-stretch {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n\r\n &__main {\r\n overflow-y: auto;\r\n\r\n @media only screen and (min-width: 600px) {\r\n overflow-y: scroll;\r\n }\r\n }\r\n\r\n &__frame {\r\n position: relative;\r\n width: 100%;\r\n \r\n &-links {\r\n position: absolute;\r\n right: 0;\r\n top: calc(-1 * (var(--space-m) + var(--space-s)));\r\n z-index: 1;\r\n\r\n a, button {\r\n border-radius: 0 0 0.25em 0.25em;\r\n @include step(-1);\r\n padding: 0.25em 0.666em;\r\n background: color('petrol', 'step-2');\r\n color: color('grey', 'step-1');\r\n }\r\n }\r\n\r\n &-background {\r\n border-radius: 0 0 0 0.25em;\r\n top: 0;\r\n }\r\n\r\n iframe {\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n transition: all .3s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n }\r\n }\r\n\r\n &-code {\r\n font-family: 'Source Code Pro';\r\n }\r\n\r\n &-pre {\r\n overflow-x: auto;\r\n background: color('petrol', 'step-3');\r\n @include padding('s');\r\n font-family: 'Source Code Pro';\r\n line-height: 1.4;\r\n\r\n &--bordered {\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n }\r\n }\r\n\r\n &-version {\r\n @include step(-1);\r\n color: color('grey', 'step-1');\r\n }\r\n\r\n &-status {\r\n @include step(-1);\r\n padding: 0.25em 0.666em;\r\n border-radius: 0.25em;\r\n background: color('petrol', 'step-2');\r\n color: color('grey', 'step-1');\r\n\r\n &--ready {\r\n background: color('green');\r\n color: color('white');\r\n }\r\n\r\n &--in-production,\r\n &--development,\r\n &--placeholder {\r\n background: color('utility-orange');\r\n color: color('white');\r\n }\r\n\r\n &--deprecated {\r\n background: color('red');\r\n color: color('white');\r\n }\r\n }\r\n\r\n &__swatch-grid {\r\n display: grid;\r\n gap: 0 1em;\r\n grid-auto-rows: minmax(4em, auto);\r\n margin-bottom: var(--space-m);\r\n \r\n @media only screen and (min-width: 680px) {\r\n gap: 0;\r\n grid-template-columns: repeat(5, auto);\r\n grid-template-rows: 5em auto;\r\n }\r\n }\r\n \r\n &__swatch-grid--has-labels {\r\n grid-template-columns: 15em auto;\r\n grid-template-rows: auto;\r\n grid-auto-flow: row;\r\n \r\n @media only screen and (min-width:1000px) {\r\n grid-auto-flow: column;\r\n grid-template-columns: repeat(5, 1fr);\r\n grid-template-rows: 5em auto;\r\n }\r\n }\r\n \r\n &__swatches,\r\n &__swatch-labels {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, 165px);\r\n }\r\n \r\n &__swatch {\r\n display: flex;\r\n \r\n & > * {\r\n justify-content: center;\r\n font-weight: weight('bold');\r\n margin: auto;\r\n }\r\n }\r\n \r\n &__swatches {\r\n & > * {\r\n height: 0;\r\n padding-bottom: 50%;\r\n position: relative;\r\n \r\n & > * {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 0.5rem;\r\n font-weight: weight('bold');\r\n text-align: center;\r\n position: absolute;\r\n height: 100%;\r\n width: 100%;\r\n left: 0;\r\n top: 0;\r\n }\r\n }\r\n }\r\n \r\n &__swatch-grid table {\r\n @include step(-2);\r\n \r\n td,\r\n th {\r\n @include padding('2xs', 0, '2xs', '3xs');\r\n }\r\n th {\r\n widtH: 3em;\r\n }\r\n td {\r\n font-family: monospace;\r\n }\r\n }\r\n\r\n &__image-row {\r\n display: flex;\r\n max-width: 100%;\r\n\r\n img {\r\n flex: 1 1 auto;\r\n margin: 0 2% 0 0;\r\n object-fit: contain;\r\n width: 6%;\r\n\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n }\r\n }\r\n\r\n &__space {\r\n display: block;\r\n\r\n span {\r\n background: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(206, 0, 88, 0.5);\r\n height: 0;\r\n padding-bottom: 100%;\r\n position: relative;\r\n display: block;\r\n }\r\n\r\n code {\r\n position: absolute;\r\n line-height: 1;\r\n left: 100%;\r\n top: 50%;\r\n @include margin-left('s');\r\n white-space: nowrap;\r\n transform: translateY(-50%);\r\n }\r\n }\r\n\r\n &-grid {\r\n background: color('blue', 'step--1');\r\n padding: 3rem 1rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: color('white');\r\n @include step(-1);\r\n\r\n &--alt {\r\n background: color('petrol', 'step-1');\r\n padding: 2rem 1rem;\r\n \r\n &:before {\r\n content: '\\00a0';\r\n display: block;\r\n }\r\n }\r\n\r\n &--first {\r\n background: color('petrol');\r\n padding: 2rem 1rem;\r\n \r\n &:before {\r\n content: 'First on mobile';\r\n }\r\n }\r\n }\r\n\r\n &-copy {\r\n position: relative;\r\n\r\n &__trigger {\r\n position: absolute;\r\n background: color('petrol', 'step-2');\r\n bottom: 0;\r\n right: 0;\r\n font-weight: weight('bold');\r\n @include step(-1);\r\n @include padding('3xs', '2xs');\r\n letter-spacing: ls('2%');\r\n \r\n &:hover {\r\n color: color('red');\r\n }\r\n }\r\n }\r\n\r\n hr {\r\n @extend .u-hr\r\n }\r\n\r\n &__typo {\r\n\r\n &__sidebar {\r\n width: grid-column(2);\r\n\r\n span {\r\n display: block;\r\n\r\n }\r\n\r\n .x2 {\r\n margin-top: 4.25em;\r\n border: 1px solid color(\"grey\");\r\n border-width: 1px 0;\r\n height: 2em;\r\n line-height: 2em;\r\n }\r\n }\r\n\r\n &__main {\r\n width: grid-column(10);\r\n }\r\n }\r\n\r\n &__semi {\r\n font-weight: 600;\r\n }\r\n\r\n &__photo-grid {\r\n display: grid;\r\n gap: 2px;\r\n grid-template-columns: 1fr;\r\n @include margin-top(xl);\r\n\r\n @media only screen and (min-width: 880px) {\r\n grid-auto-flow: dense;\r\n grid-auto-rows: auto;\r\n\r\n img {\r\n height: 100%;\r\n width: 100%;\r\n object-fit: cover;\r\n }\r\n\r\n div {\r\n grid-column: 1/3;\r\n grid-row: 1/2;\r\n display: flex;\r\n\r\n h2 {\r\n margin: auto var(--space-s);\r\n }\r\n }\r\n\r\n &.grid-1 {\r\n grid-template-columns: 40% 20% 40%;\r\n grid-template-rows: var(--space-2xl) 400px 400px;\r\n\r\n img { \r\n &:nth-child(2) {\r\n grid-row: 2/3;\r\n grid-column: 1/3;\r\n }\r\n \r\n &:nth-child(3) {\r\n grid-column: 3/4;\r\n grid-row: 1/3;\r\n }\r\n \r\n &:nth-child(5) {\r\n grid-column: 2/4;\r\n }\r\n }\r\n }\r\n\r\n &.grid-2 {\r\n grid-template-columns: 50% 50%;\r\n grid-template-rows: var(--space-2xl) 300px 300px;\r\n\r\n div {\r\n grid-column: 1/2;\r\n }\r\n\r\n img {\r\n &:nth-child(2) {\r\n grid-row: 2/4;\r\n }\r\n &:nth-child(3) {\r\n grid-row: 1/3;\r\n }\r\n }\r\n }\r\n }\r\n\r\n }\r\n\r\n .c-alert ul li {\r\n list-style: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"20\" viewBox=\"0 0 10 20\"><circle cx=\"5\" cy=\"14\" r=\"3.5\" fill=\"%2313AA13\" fill-rule=\"evenodd\"/></svg>') outside; \r\n margin-left: 1em;\r\n padding-left: 0.5rem;\r\n\r\n h3,\r\n h4 {\r\n line-height: lh('prose');\r\n font-size: 1em;\r\n color: color('green');\r\n }\r\n }\r\n}\r\n\r\n// Header responsive styles\r\n@media only screen and (max-width: 1050px) {\r\n .c-library__logo-name span:nth-last-child(3),\r\n .c-library__logo-name span:nth-last-child(1) {\r\n @include step(-2);\r\n }\r\n\r\n .c-library__logo-name span:nth-last-child(2) {\r\n @include step(1);\r\n }\r\n\r\n .c-library__header nav li:last-child {\r\n display: none;\r\n }\r\n}\r\n\r\n@media only screen and (min-width: 650px) and (max-width: 700px),\r\n screen and (max-width: 450px) {\r\n .c-library__header nav .u-row {\r\n @include space('gap', '2xs');\r\n @include step(-2);\r\n }\r\n}\r\n\r\n.c-library__header {\r\n @media only screen and (max-width: 650px) {\r\n nav a {\r\n @include padding('2xs',0);\r\n display: block;\r\n }\r\n\r\n .c-library-page-active:after {\r\n @include space('bottom','3xs');\r\n }\r\n }\r\n}","// Breakout\r\n// Force an element to fill 100% of the window width, ignoring its container\r\n\r\n@mixin breakout($pad: 0) {\r\n left: 50%;\r\n left: calc( 50% + var(--scrollbarWidth)/2.0001 );\r\n position: relative;\r\n transform: translateX(-50vw);\r\n width: 100vw;\r\n width: calc( 100vw - var(--scrollbarWidth) );\r\n padding-left: safe-space($pad);\r\n padding-right: safe-space($pad);\r\n}\r\n\r\n.u-breakout {\r\n @include breakout\r\n}","$weights: (\r\n base: 400,\r\n semi: 600,\r\n bold: 700\r\n);\r\n\r\n$line-heights: (\r\n base: 1.2,\r\n prose: 1.6,\r\n);\r\n\r\n$letter-spacings: (\r\n '4%': 0.04em,\r\n '2%': 0.02em,\r\n base: -0.01em,\r\n '-2%': -0.02em,\r\n '-3%': -0.03em\r\n);\r\n\r\n$font-stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;\r\n\r\n/* @link https://utopia.fyi/generator-mk-ii?c=320,16,1.2,1332,18,1.2,10,2, /\r\n$steps: (\r\n -2: (\r\n min: 12.64,\r\n max: 12.50,\r\n ls: base\r\n ),\r\n\r\n -1: (\r\n min: 14.22,\r\n max: 15.00,\r\n ls: base\r\n ),\r\n\r\n 0: (\r\n min: 16.00,\r\n max: 18.00,\r\n ls: base\r\n ),\r\n\r\n 1: (\r\n min: 18.00,\r\n max: 21.60,\r\n ls: '-2%'\r\n ),\r\n\r\n 2: (\r\n min: 20.25,\r\n max: 25.92,\r\n ls: '-2%'\r\n ),\r\n\r\n 3: (\r\n min: 22.78,\r\n max: 31.10,\r\n ls: '-2%'\r\n ),\r\n\r\n 4: (\r\n min: 25.63,\r\n max: 37.32,\r\n ls: '-3%'\r\n ),\r\n\r\n 5: (\r\n min: 28.83,\r\n max: 44.79,\r\n ls: '-3%'\r\n ),\r\n\r\n 6: (\r\n min: 32.44,\r\n max: 53.75,\r\n ls: '-3%'\r\n ),\r\n\r\n 7: (\r\n min: 36.49,\r\n max: 64.50,\r\n ls: '-3%'\r\n ),\r\n\r\n 8: (\r\n min: 41.05,\r\n max: 77.40,\r\n ls: '-3%'\r\n ),\r\n\r\n 9: (\r\n min: 46.18,\r\n max: 92.88,\r\n ls: '-3%'\r\n ),\r\n\r\n 10: (\r\n min: 51.96,\r\n max: 111.45,\r\n ls: '-3%'\r\n )\r\n);\r\n\r\n$f-min-width: 320;\r\n$f-max-width: 1332;\r\n\r\n:root {\r\n --fluid-min-width: #{$f-min-width};\r\n --fluid-max-width: #{$f-max-width};\r\n\r\n --fluid-screen: 100vw;\r\n --fluid-bp: calc(\r\n (var(--fluid-screen) - var(--fluid-min-width) / 16 1rem) /\r\n (var(--fluid-max-width) - var(--fluid-min-width))\r\n );\r\n}\r\n\r\n@media screen and (min-width: #{$f-max-width * 1px}) {\r\n :root {\r\n --fluid-screen: calc(var(--fluid-max-width) * 1px);\r\n }\r\n}\r\n\r\n:root {\r\n @each $name, $step in $steps {\r\n --f-#{$name}-min: #{map-get($step, min)};\r\n --f-#{$name}-max: #{map-get($step, max)};\r\n --step-#{$name}: calc(\r\n ((var(--f-#{$name}-min) / 16) * 1rem) + (var(--f-#{$name}-max) - var(--f-#{$name}-min)) \r\n var(--fluid-bp)\r\n );\r\n }\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 400;\r\n font-display: swap;\r\n src: url(\"../fonts/Inter-Regular.woff2\") format(\"woff2\"),\r\n url(\"../fonts/Inter-Regular.woff\") format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 600;\r\n font-display: swap;\r\n src: url('../fonts/Inter-SemiBold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-SemiBold.woff') format(\"woff\");\r\n}\r\n\r\n@font-face {\r\n font-family: 'Inter';\r\n font-style: normal;\r\n font-weight: 700;\r\n font-display: swap;\r\n src: url('../fonts/Inter-Bold.woff2') format(\"woff2\"),\r\n url('../fonts/Inter-Bold.woff') format(\"woff\");\r\n}","@use 'sass:math';\r\n\r\n$wrapper: 78.75rem;\r\n\r\n$space-base: 18;\r\n$spaces: (\r\n \"3xs\": 0.25,\r\n \"2xs\": 0.5,\r\n \"xs\": 0.75,\r\n \"s\": 1,\r\n \"m\": 1.5,\r\n \"l\": 2,\r\n \"xl\": 3,\r\n \"2xl\": 4,\r\n \"3xl\": 6,\r\n \"4xl\": 8,\r\n);\r\n\r\n:root {\r\n --max-screen: #{ math.div($f-max-width, 16) };\r\n --fc-screen: 100vw;\r\n --fc-bp: calc((var(--fc-screen) - 20em) / (var(--max-screen) - 20));\r\n\r\n --fc-base: #{$space-base};\r\n\r\n @each $space, $_ in $spaces {\r\n --fc-#{$space}: #{space-size($space)};\r\n --space-#{$space}: calc(var(--fc-#{$space}) / 16 1rem);\r\n }\r\n\r\n $min: \"\";\r\n @each $max, $_ in $spaces {\r\n @if ($min) {\r\n @include space-between($min, $max);\r\n }\r\n $min: $max;\r\n }\r\n\r\n @include space-between(s, l);\r\n @include space-between(s, m);\r\n @include space-between(xs, l);\r\n @include space-between(m, xl);\r\n @include space-between(l, 2xl);\r\n @include space-between(s, xl);\r\n @include space-between(l, 3xl);\r\n @include space-between(xl, 3xl);\r\n @include space-between(l, 4xl);\r\n @include space-between(3xs, m);\r\n\r\n --gutter: var(--space-s-l);\r\n}\r\n\r\n@media screen and (min-width: 75em) {\r\n :root {\r\n --fc-screen: calc(var(--max-screen) * 1rem);\r\n }\r\n}\r\n","@import './breakout.scss';\r\n\r\n@function color($palette, $tone: 'step-0') {\r\n @return map-get(map-get($colours, $palette), $tone);\r\n}\r\n\r\n@function lh($size: 'base') {\r\n @return map-get($line-heights, $size);\r\n}\r\n\r\n@function ls($size: 'base') {\r\n @return map-get($letter-spacings, $size);\r\n}\r\n\r\n@function weight($size: 'base') {\r\n @return map-get($weights, $size);\r\n}\r\n\r\n@mixin step($step: 0) {\r\n letter-spacing: ls(map-get(map-get($steps, $step), ls));\r\n font-size: 1px * map-get(map-get($steps, $step), max);\r\n font-size: var(--step-#{$step});\r\n}\r\n\r\n@mixin flow($size) {\r\n & > * + * {\r\n @include margin-top($size);\r\n }\r\n}\r\n\r\n@function space-size($key: s) {\r\n @return $space-base * map-get($spaces, $key);\r\n}\r\n\r\n@function space-unit($key: s) {\r\n @return space-size($key) * 1px;\r\n}\r\n\r\n@mixin space-between($min, $max) {\r\n --space-#{$min}-#{$max}: calc(\r\n ((var(--fc-#{$min}) / 16) * 1rem) + (var(--fc-#{$max}) - var(--fc-#{$min})) \r\n var(--fluid-bp)\r\n );\r\n}\r\n\r\n@function safe-space($value, $safe: false) {\r\n @if (type-of($value) == number) {\r\n @return $value;\r\n } @else if (type-of($value) == null) {\r\n @return 0;\r\n } @else if (type-of($value) == string) {\r\n $split: get-min-max($value);\r\n $min: nth($split, 1);\r\n\r\n @if ($value == 'gutter') {\r\n @if ($safe) {\r\n @return space-unit(s);\r\n } @else {\r\n @return var(--gutter); \r\n }\r\n }\r\n\r\n @if ($value == 'auto') {\r\n @return auto;\r\n }\r\n \r\n @if ($safe) {\r\n @return space-unit($min);\r\n } @else {\r\n @return var(--space-#{$value}); \r\n }\r\n }\r\n}\r\n\r\n@mixin padding($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('padding', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin padding-top($arg1: '') { @include space('padding-top', $arg1); }\r\n@mixin padding-right($arg1: '') { @include space('padding-right', $arg1); }\r\n@mixin padding-bottom($arg1: '') { @include space('padding-bottom', $arg1); }\r\n@mixin padding-left($arg1: '') { @include space('padding-left', $arg1); }\r\n@mixin margin($arg1: '', $arg2: '', $arg3: '', $arg4: '') { @include space('margin', $arg1, $arg2, $arg3, $arg4); }\r\n@mixin margin-top($arg1: '') { @include space('margin-top', $arg1); }\r\n@mixin margin-right($arg1: '') { @include space('margin-right', $arg1); }\r\n@mixin margin-bottom($arg1: '') { @include space('margin-bottom', $arg1); }\r\n@mixin margin-left($arg1: '') { @include space('margin-left', $arg1); }\r\n@mixin grid-gap($arg1: '', $arg2: '') { @include space('grid-gap', $arg1, $arg2); }\r\n@mixin gap($arg1: '', $arg2: '') { @include space('gap', $arg1, $arg2); }\r\n@mixin top($arg1: '') { @include space('top', $arg1); }\r\n\r\n@mixin space($property, $arg1: '', $arg2: '', $arg3: '', $arg4: '') {\r\n @if ($arg4 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true) safe-space($arg4, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3) safe-space($arg4);\r\n } @else if ($arg3 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true) safe-space($arg3, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2) safe-space($arg3);\r\n } @else if ($arg2 != '') {\r\n #{$property}: safe-space($arg1, true) safe-space($arg2, true);\r\n #{$property}: safe-space($arg1) safe-space($arg2);\r\n } @else if ($arg1 != '') {\r\n #{$property}: safe-space($arg1, true);\r\n #{$property}: safe-space($arg1);\r\n }\r\n}\r\n\r\n@function get-min-max($value) {\r\n $split: str-split($value, '-');\r\n $min: nth($split, 1);\r\n\r\n @if (length($split) == 1) {\r\n @return ($min, null);\r\n } @else {\r\n @return ($min, nth($split, 2))\r\n }\r\n}\r\n\r\n@function str-split($string, $separator) {\r\n // empty array/list\r\n $split-arr: ();\r\n // first index of separator in string\r\n $index : str-index($string, $separator);\r\n // loop through string\r\n @while $index != null {\r\n // get the substring from the first character to the separator\r\n $item: str-slice($string, 1, $index - 1);\r\n // push item to array\r\n $split-arr: append($split-arr, $item);\r\n // remove item and separator from string\r\n $string: str-slice($string, $index + 1);\r\n // find new index of separator\r\n $index : str-index($string, $separator);\r\n }\r\n // add the remaining string to list (the last item)\r\n $split-arr: append($split-arr, $string);\r\n\r\n @return $split-arr;\r\n}\r\n\r\n@mixin hyphenated {\r\n @media only screen and (max-width: 28rem) {\r\n word-break: break-word;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n\r\n @media only screen and (max-width: 70rem) {\r\n [lang='de-DE'] & {\r\n word-break: break-word;\r\n -webkit-hyphens: auto;\r\n -ms-hyphens: auto;\r\n hyphens: auto;\r\n }\r\n }\r\n}","\r\n,\r\n:before,\r\n:after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: stretch;\r\n min-height: 100vh;\r\n margin: 0;\r\n}\r\n\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\nblockquote,\r\npre,\r\nol,\r\nul,\r\nfigure {\r\n padding: 0;\r\n margin: 0;\r\n}\r\n\r\nimg {\r\n max-width: 100%;\r\n display: block;\r\n height: auto;\r\n border: none;\r\n}\r\n\r\narticle,\r\naside,\r\nfigure,\r\nfooter,\r\nheader,\r\naside,\r\nmain,\r\nnav {\r\n display: block;\r\n}\r\n\r\niframe {\r\n border: none;\r\n}\r\n\r\n// Typography\r\n\r\n@mixin mp-reset-base {\r\n font: weight() #{1.125rem}/lh() $font-stack;\r\n @include step();\r\n color: color('grey');\r\n}\r\n\r\nbody {\r\n @include mp-reset-base();\r\n}\r\n\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nul,\r\nol,\r\ndl {\r\n margin: 0\r\n}\r\n\r\nul, ol, p {\r\n line-height: lh();\r\n}\r\n\r\na {\r\n text-decoration: none;\r\n}\r\n\r\na,\r\na:hover {\r\n cursor: pointer;\r\n color: inherit;\r\n}\r\n\r\n// Lists\r\n\r\n.mp ol,\r\n.mp ul {\r\n list-style: none;\r\n}\r\n\r\n// Font styles\r\n\r\ncite,\r\naddress {\r\n font-style: normal;\r\n}\r\n\r\n// Form\r\n\r\n[type=\"submit\"],\r\n[type=\"button\"],\r\nbutton {\r\n border-radius: 0;\r\n background: transparent;\r\n box-shadow: none;\r\n appearance: none;\r\n padding: 0;\r\n cursor: pointer;\r\n border: none;\r\n color: inherit;\r\n font: inherit;\r\n}\r\n\r\n[disabled],\r\n.mp.c-button[disabled] {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\nlabel {\r\n cursor: pointer;\r\n}\r\n\r\nfieldset {\r\n border: 0;\r\n padding: 0.01em 0 0 0;\r\n}\r\n\r\n// Animation\r\n\r\n@media (prefers-reduced-motion:reduce) {\r\n * {\r\n -webkit-animation: none!important;\r\n animation: none!important;\r\n transition: none!important;\r\n scroll-behavior: auto!important;\r\n }\r\n}\r\n","code[class=\"language-\"],\r\npre[class=\"language-\"] {\r\n\ttext-align: left;\r\n\twhite-space: pre;\r\n\tword-spacing: normal;\r\n\tword-break: normal;\r\n\tword-wrap: normal;\r\n color: color('petrol', 'step-1');\r\n background: color('petrol', 'step-3');\r\n font-family: 'Source Code Pro', monospace;\r\n\tfont-size: 1rem;\r\n\tline-height: 1.5em;\r\n\r\n\t-moz-tab-size: 4;\r\n\t-o-tab-size: 4;\r\n\ttab-size: 4;\r\n\r\n\t-webkit-hyphens: none;\r\n\t-moz-hyphens: none;\r\n\t-ms-hyphens: none;\r\n\thyphens: none;\r\n}\r\n\r\ncode[class=\"language-\"]::-moz-selection,\r\npre[class=\"language-\"]::-moz-selection,\r\ncode[class=\"language-\"] ::-moz-selection,\r\npre[class=\"language-\"] ::-moz-selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\ncode[class=\"language-\"]::selection,\r\npre[class=\"language-\"]::selection,\r\ncode[class=\"language-\"] ::selection,\r\npre[class=\"language-\"] ::selection {\r\n\tbackground: #cceae7;\r\n\tcolor: #263238;\r\n}\r\n\r\n:not(pre) > code[class=\"language-\"] {\r\n\twhite-space: normal;\r\n\tborder-radius: 0.2em;\r\n\tpadding: 0.1em;\r\n}\r\n\r\npre[class=\"language-\"] {\r\n\toverflow: auto;\r\n position: relative;\r\n @include padding('s');\r\n}\r\n\r\n.language-css > code,\r\n.language-sass > code,\r\n.language-scss > code {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n[class=\"language-\"] .namespace {\r\n\topacity: 0.7;\r\n}\r\n\r\n.token.atrule {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.attr-name {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.attr-value {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.attribute {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.boolean {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.builtin {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.cdata {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.char {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.class-name {\r\n\tcolor: #6182b8;\r\n}\r\n\r\n.token.comment {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.constant {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.deleted {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.doctype {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.entity {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.function {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.hexcode {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.id {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.important {\r\n\tcolor: color('petrol', 'step-1');\r\n\tfont-weight: bold;\r\n}\r\n\r\n.token.inserted {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.keyword {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.number {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.operator {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.prolog {\r\n\tcolor: #aabfc9;\r\n}\r\n\r\n.token.property {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.pseudo-class {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.pseudo-element {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.punctuation {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.regex {\r\n\tcolor: color('blue');\r\n}\r\n\r\n.token.selector {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.string {\r\n\tcolor: color('green');\r\n}\r\n\r\n.token.symbol {\r\n\tcolor: color('petrol', 'step-1');\r\n}\r\n\r\n.token.tag {\r\n\tcolor: color('petrol');\r\n}\r\n\r\n.token.unit {\r\n\tcolor: color('utility-orange');\r\n}\r\n\r\n.token.url {\r\n\tcolor: color('red');\r\n}\r\n\r\n.token.variable {\r\n\tcolor: color('red');\r\n}\r\n\r\n",".u-hr {\r\n margin: 0;\r\n border: none;\r\n @include padding-bottom('m-xl');\r\n @include margin-bottom('m-xl');\r\n border-bottom: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border-top {\r\n border-top: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.u-border {\r\n border: 1px solid color('petrol', 'step-2');\r\n}\r\n\r\n.o-prose hr {\r\n @extend .u-hr\r\n}","@use 'sass:math';\r\n\r\n// Layout\r\n$grid-width: 1260;\r\n$grid-columns: 12;\r\n$grid-column-width: 72;\r\n$grid-gutter-width: 36;\r\n\r\n@function grid-gutter() {\r\n @return math.div($grid-gutter-width, $grid-width) 100%;\r\n}\r\n\r\n@function grid-column($count) {\r\n @return math.div(\r\n (\r\n ($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)\r\n ), $grid-width\r\n ) * 100%;\r\n}\r\n\r\n@function grid-column-px($count) {\r\n @return (($count * $grid-column-width) + (($count - 1) * $grid-gutter-width)) * 1px;\r\n}\r\n\r\n.o-grid {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: stretch;\r\n margin-bottom: calc(-1 * #{space-unit()});\r\n margin-bottom: calc(-1 * var(--gutter));\r\n width: 100%;\r\n\r\n &--float:after {\r\n content: \" \";\r\n display: table;\r\n clear: both;\r\n }\r\n\r\n &--between {\r\n justify-content: space-between;\r\n }\r\n\r\n &--no-height-match {\r\n align-items: start;\r\n }\r\n\r\n & > * {\r\n width: 100%;\r\n @include margin-bottom(\"gutter\");\r\n }\r\n\r\n &--of-two {\r\n @media (min-width: 40em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-two-late {\r\n @media (min-width: 55em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-three {\r\n @media (min-width: 38em) and (max-width: 54.9375em) { // 608 - 1087\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n & > * {\r\n width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);\r\n width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(3n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-three-late {\r\n @media (min-width: 38em) and (max-width: 67.9375em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 68em) {\r\n & > * {\r\n width: calc((33.333% - (2 * #{space-unit()} / 3)) - 0.1px);\r\n width: calc((33.333% - (2 * var(--gutter) / 3)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(3n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--of-four {\r\n @media (min-width: 38em) and (max-width: 59.9375em) {\r\n & > * {\r\n width: calc((50% - (1 * #{space-unit()} / 2)) - 0.1px);\r\n width: calc((50% - (1 * var(--gutter) / 2)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(2n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 60em) {\r\n & > * {\r\n width: calc((25% - (3 * #{space-unit()} / 4)) - 0.1px);\r\n width: calc((25% - (3 * var(--gutter) / 4)) - 0.1px);\r\n\r\n & + * {\r\n @include margin-left(\"gutter\");\r\n }\r\n\r\n &:nth-child(4n + 1) {\r\n margin-left: 0;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &--swipeable {\r\n @media (max-width: 54.9375em) {\r\n @include breakout('gutter');\r\n flex-wrap: nowrap;\r\n overflow-x: scroll;\r\n scroll-snap-type: x mandatory;\r\n -webkit-overflow-scrolling: touch;\r\n\r\n & > * {\r\n flex: 0 0 auto;\r\n max-width: 23em;\r\n width: calc(85vw - var(--gutter)2.333); // !important\r\n scroll-snap-align: center;\r\n }\r\n\r\n & > + * {\r\n margin-left: var(--gutter) !important;\r\n }\r\n }\r\n }\r\n\r\n @media (min-width: 55em) {\r\n &--4\\/7 > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 2) {\r\n width: grid-column(7)\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--8\\/4 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/4-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(8);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--4\\/8 > :nth-child(2n + 1),\r\n &--4\\/7 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/8-switch > :nth-child(2n + 2),\r\n &--4\\/7-switch > :nth-child(2n + 1) {\r\n width: grid-column(4);\r\n }\r\n\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--4\\/8 > :nth-child(2n + 2),\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--8\\/4 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/4-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1),\r\n &--4\\/8-switch > :nth-child(2n + 1) {\r\n margin-left: grid-gutter();\r\n margin-right: 0;\r\n }\r\n\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n max-width: grid-column-px(8);\r\n }\r\n\r\n &[class=\"switch\"] > :nth-child(2n + 1) {\r\n order: 1;\r\n }\r\n\r\n &--layout {\r\n margin-bottom: 0;\r\n\r\n & > :nth-last-child(1),\r\n & > :nth-last-child(2) {\r\n margin-bottom: 0;\r\n }\r\n }\r\n\r\n &--push {\r\n justify-content: space-between;\r\n }\r\n\r\n &--pull {\r\n justify-content: flex-start;\r\n }\r\n\r\n &--float {\r\n display: block;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 1),\r\n &--float[class=\"switch\"] > :nth-child(2n + 2) {\r\n float: left;\r\n }\r\n\r\n &--float:not([class=\"switch\"]) > :nth-child(2n + 2),\r\n &--float[class*=\"switch\"] > :nth-child(2n + 1) {\r\n float: right;\r\n }\r\n }\r\n\r\n @media (min-width: 70em) {\r\n &--9\\/3 > :nth-child(2n + 1),\r\n &--8\\/3 > :nth-child(2n + 1),\r\n &--3\\/9 > :nth-child(2n + 2),\r\n &--3\\/8 > :nth-child(2n + 2),\r\n &--9\\/3-switch > :nth-child(2n + 2),\r\n &--8\\/3-switch > :nth-child(2n + 2),\r\n &--3\\/9-switch > :nth-child(2n + 1),\r\n &--3\\/8-switch > :nth-child(2n + 1) {\r\n width: grid-column(9);\r\n }\r\n\r\n &--9\\/3 > :nth-child(2n + 2),\r\n &--8\\/3 > :nth-child(2n + 2),\r\n &--3\\/9 > :nth-child(2n + 1),\r\n &--3\\/8 > :nth-child(2n + 1),\r\n &--9\\/3-switch > :nth-child(2n + 1),\r\n &--8\\/3-switch > :nth-child(2n + 1),\r\n &--3\\/9-switch > :nth-child(2n + 2),\r\n &--3\\/8-switch > :nth-child(2n + 2) {\r\n width: grid-column(3);\r\n }\r\n }\r\n}\r\n"]}