@apolitical/component-library 0.0.4-beta.5 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/fonts/Moderat-Black-Italic.woff2 +0 -0
  2. package/fonts/Moderat-Black.woff2 +0 -0
  3. package/fonts/Moderat-Bold-Italic.woff2 +0 -0
  4. package/fonts/Moderat-Bold.woff2 +0 -0
  5. package/fonts/Moderat-Medium-Italic.woff2 +0 -0
  6. package/fonts/Moderat-Medium.woff2 +0 -0
  7. package/index.d.ts +1 -0
  8. package/index.js +1 -1
  9. package/index.mjs +32 -6
  10. package/layout/index.d.ts +1 -0
  11. package/layout/layout.d.ts +6 -0
  12. package/package.json +2 -2
  13. package/style.css +1 -1
  14. package/styles/README.md +2 -20
  15. package/styles/base/_accessibility.scss +26 -0
  16. package/styles/base/_blockquotes.scss +29 -0
  17. package/styles/base/_fonts.scss +41 -0
  18. package/styles/base/_hr.scss +15 -0
  19. package/styles/{base-styles → base}/_index.scss +3 -1
  20. package/styles/base/_links.scss +16 -0
  21. package/styles/base/_lists.scss +27 -0
  22. package/styles/base/_text.scss +80 -0
  23. package/styles/base/_titles.scss +130 -0
  24. package/styles/base/buttons/_buttons.scss +234 -0
  25. package/styles/index.scss +4 -2
  26. package/styles/mixins/_index.scss +0 -1
  27. package/styles/variables/assets/_assets.scss +1 -3
  28. package/styles/base-styles/_accessibility.scss +0 -31
  29. package/styles/base-styles/_blockquotes.scss +0 -31
  30. package/styles/base-styles/_hr.scss +0 -17
  31. package/styles/base-styles/_links.scss +0 -18
  32. package/styles/base-styles/_lists.scss +0 -30
  33. package/styles/base-styles/_text.scss +0 -83
  34. package/styles/base-styles/_titles.scss +0 -132
  35. package/styles/base-styles/buttons/_buttons.scss +0 -236
  36. package/styles/mixins/_selectors.scss +0 -8
  37. /package/styles/{base-styles → base}/buttons/_icons.scss +0 -0
  38. /package/styles/{base-styles → base}/buttons/_index.scss +0 -0
  39. /package/styles/{base-styles → base}/buttons/_mixins.scss +0 -0
Binary file
Binary file
Binary file
Binary file
Binary file
package/index.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export * from './demo';
2
+ export * from './layout';
package/index.js CHANGED
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n="_container_a7v7k_1",o={container:n};function t(r){return e.jsx("div",{className:o.container,children:e.jsx("h1",{children:"Component library demo!"})})}exports.Demo=t;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n="_container_a7v7k_1",r={container:n};function i(t){return e.jsxs("div",{className:r.container,children:[e.jsx("small",{className:"pre-title",children:"Component library"}),e.jsx("h1",{children:"Component library demo!"}),e.jsx("h2",{children:"A demo of the component library"}),e.jsxs("p",{children:["Text with ",e.jsx("a",{href:"https://google.com",children:"link"})]}),e.jsx("button",{className:"primary large icon arrow_left left",children:"Button"}),e.jsx("button",{className:"secondary icon pencil right animate",children:"Button"}),e.jsx("button",{className:"tertiary small icon heart_empty hover_heart right",children:"Button"}),e.jsx("hr",{}),e.jsxs("ul",{children:[e.jsx("li",{children:"Item 1"}),e.jsx("li",{children:"Item 2"})]}),e.jsx("p",{children:"More text."}),e.jsxs("ol",{children:[e.jsx("li",{children:"Item 1"}),e.jsx("li",{children:"Item 2"})]}),e.jsx("blockquote",{children:"A quote."})]})}function o({children:t}){return e.jsx("div",{children:t})}exports.Demo=i;exports.Layout=o;
package/index.mjs CHANGED
@@ -1,10 +1,36 @@
1
- import { jsx as n } from "react/jsx-runtime";
2
- const o = "_container_a7v7k_1", r = {
3
- container: o
1
+ import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
+ const r = "_container_a7v7k_1", i = {
3
+ container: r
4
4
  };
5
- function c(e) {
6
- return /* @__PURE__ */ n("div", { className: r.container, children: /* @__PURE__ */ n("h1", { children: "Component library demo!" }) });
5
+ function o(n) {
6
+ return /* @__PURE__ */ t("div", { className: i.container, children: [
7
+ /* @__PURE__ */ e("small", { className: "pre-title", children: "Component library" }),
8
+ /* @__PURE__ */ e("h1", { children: "Component library demo!" }),
9
+ /* @__PURE__ */ e("h2", { children: "A demo of the component library" }),
10
+ /* @__PURE__ */ t("p", { children: [
11
+ "Text with ",
12
+ /* @__PURE__ */ e("a", { href: "https://google.com", children: "link" })
13
+ ] }),
14
+ /* @__PURE__ */ e("button", { className: "primary large icon arrow_left left", children: "Button" }),
15
+ /* @__PURE__ */ e("button", { className: "secondary icon pencil right animate", children: "Button" }),
16
+ /* @__PURE__ */ e("button", { className: "tertiary small icon heart_empty hover_heart right", children: "Button" }),
17
+ /* @__PURE__ */ e("hr", {}),
18
+ /* @__PURE__ */ t("ul", { children: [
19
+ /* @__PURE__ */ e("li", { children: "Item 1" }),
20
+ /* @__PURE__ */ e("li", { children: "Item 2" })
21
+ ] }),
22
+ /* @__PURE__ */ e("p", { children: "More text." }),
23
+ /* @__PURE__ */ t("ol", { children: [
24
+ /* @__PURE__ */ e("li", { children: "Item 1" }),
25
+ /* @__PURE__ */ e("li", { children: "Item 2" })
26
+ ] }),
27
+ /* @__PURE__ */ e("blockquote", { children: "A quote." })
28
+ ] });
29
+ }
30
+ function c({ children: n }) {
31
+ return /* @__PURE__ */ e("div", { children: n });
7
32
  }
8
33
  export {
9
- c as Demo
34
+ o as Demo,
35
+ c as Layout
10
36
  };
@@ -0,0 +1 @@
1
+ export { default as Layout } from './layout';
@@ -0,0 +1,6 @@
1
+ /// <reference types="react" />
2
+ interface Props {
3
+ children: React.ReactNode;
4
+ }
5
+ export declare function Layout({ children }: Props): import("react/jsx-runtime").JSX.Element;
6
+ export default Layout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apolitical/component-library",
3
- "version": "0.0.4-beta.5",
3
+ "version": "0.0.5",
4
4
  "main": "./index.js",
5
5
  "types": "./index.d.ts",
6
6
  "exports": {
@@ -8,6 +8,6 @@
8
8
  "import": "./index.mjs",
9
9
  "require": "./index.js"
10
10
  },
11
- "./styles.css": "./styles.css"
11
+ "./style.css": "./style.css"
12
12
  }
13
13
  }
package/style.css CHANGED
@@ -1 +1 @@
1
- ._container_a7v7k_1 h1{color:#4f43ba}
1
+ ._container_a7v7k_1 h1{color:#4f43ba}@layer reset{html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}html{font-size:100%}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;--webkit-text-size-adjust: 100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;text-rendering:optimizelegibility;line-height:1}ul{list-style:disc}ol{list-style:decimal}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}}@layer base{@font-face{font-family:Moderat;src:url(fonts/Moderat-Medium.woff2) format("woff2");font-display:optional;font-weight:400}@font-face{font-family:Moderat;src:url(fonts/Moderat-Medium-Italic.woff2) format("woff2");font-display:optional;font-weight:400;font-style:italic}@font-face{font-family:Moderat;src:url(fonts/Moderat-Bold.woff2) format("woff2");font-display:optional;font-weight:600}@font-face{font-family:Moderat;src:url(fonts/Moderat-Bold-Italic.woff2) format("woff2");font-display:optional;font-weight:600;font-style:italic}@font-face{font-family:Moderat;src:url(fonts/Moderat-Black.woff2) format("woff2");font-display:optional;font-weight:900}@font-face{font-family:Moderat;src:url(fonts/Moderat-Black-Italic.woff2) format("woff2");font-display:optional;font-weight:900;font-style:italic}body{font-family:Moderat,sans-serif}}@layer base{a:focus,a:focus-visible,button:focus,button:focus-visible,input:focus,input:focus-visible,textarea:focus,textarea:focus-visible,[role=menu]:focus,[role=menu]:focus-visible,li[tabindex]:focus,li[tabindex]:focus-visible{outline:none;box-shadow:0 0 0 .25rem #dedcfa}a:active,button:active,input:active,textarea:active,[role=menu]:active,li[tabindex]:active{box-shadow:none}[role=menu]:focus,[role=menu]:focus-visible,[role=menu] a:focus,[role=menu] a:focus-visible,li[tabindex]:focus,li[tabindex]:focus-visible{box-shadow:0 0 0 .25rem #dedcfa inset}.hidden{width:0;height:0;display:block;overflow:hidden}}@layer base{blockquote{margin:1.25rem 0 .625rem;padding:.25rem 0 0 1.5rem;font-size:1.125rem;color:#151921;font-weight:700;font-style:italic;line-height:1.75rem;border-left:.375rem solid rgb(124,220,197)}blockquote p:last-of-type{margin-bottom:0}@media only screen and (min-width: 769px){blockquote{margin-top:1.875rem;margin-bottom:1.25rem;font-size:1.25rem}}}@layer base{button,.button{background:rgb(79,67,186);padding:.625rem 1.5rem .75rem;position:relative;text-align:center;font-size:1rem;color:#fff;font-weight:700;text-decoration:none;border-radius:360rem;border:none;cursor:pointer;box-sizing:border-box;display:inline-block}button:hover,.button:hover{background:rgb(124,114,225)}button:active,.button:active{background:rgb(57,45,135)}button:focus,button:focus-visible,.button:focus,.button:focus-visible{background:rgb(101,89,212)}button.large,.button.large{padding:.875rem 1.5rem 1rem;font-size:1.125rem}button.large.icon,.button.large.icon{margin-top:.125rem}button.large.icon.left:before,.button.large.icon.left:before{margin-right:.75rem}button.large.icon.right:before,.button.large.icon.right:before{margin-left:.75rem}button.small,.button.small{padding:.5rem 1rem .625rem;font-size:.875rem}button.small.icon,.button.small.icon{margin-top:.125rem}button.small.icon.left:before,.button.small.icon.left:before{margin-right:.5rem}button.small.icon.right:before,.button.small.icon.right:before{margin-left:.5rem}button.full-width,.button.full-width{width:100%}button.destructive,button.destructive:hover,button.destructive:active,button.destructive:focus,button.destructive:focus-visible,.button.destructive,.button.destructive:hover,.button.destructive:active,.button.destructive:focus,.button.destructive:focus-visible{background:rgb(195,65,65);color:#fff}button.destructive:hover,button.destructive:active,.button.destructive:hover,.button.destructive:active{background:rgb(155,36,36)}button.destructive:focus,button.destructive:focus-visible,.button.destructive:focus,.button.destructive:focus-visible{box-shadow:0 0 0 .25rem #fff2f2}button.secondary,.button.secondary{background:rgb(255,255,255);color:#4f43ba;border:.0625rem solid rgb(79,67,186)}button.secondary:hover,.button.secondary:hover{background:rgb(197,194,245)}button.secondary:active,button.secondary:focus,button.secondary:focus-visible,.button.secondary:active,.button.secondary:focus,.button.secondary:focus-visible{color:#fff;border-color:transparent}button.secondary:active,.button.secondary:active{background:rgb(57,45,135)}button.secondary:focus,button.secondary:focus-visible,.button.secondary:focus,.button.secondary:focus-visible{background:rgb(101,89,212)}button.secondary.muted,.button.secondary.muted{border-color:#c0cbdf}button.secondary.muted,button.secondary.muted:hover,button.secondary.muted:active,button.secondary.muted:focus,button.secondary.muted:focus-visible,.button.secondary.muted,.button.secondary.muted:hover,.button.secondary.muted:active,.button.secondary.muted:focus,.button.secondary.muted:focus-visible{background:rgb(255,255,255);color:#596580}button.secondary.muted:hover,button.secondary.muted:focus,button.secondary.muted:focus-visible,.button.secondary.muted:hover,.button.secondary.muted:focus,.button.secondary.muted:focus-visible{color:#4f43ba}button.secondary.disabled,button.secondary.disabled:hover,button.secondary.disabled:active,button.secondary.disabled:focus,button.secondary.disabled:focus-visible,.button.secondary.disabled,.button.secondary.disabled:hover,.button.secondary.disabled:active,.button.secondary.disabled:focus,.button.secondary.disabled:focus-visible{background:rgb(255,255,255);color:#4f43ba;border-color:#4f43ba}button.tertiary,.button.tertiary{padding:.1rem .5rem .2rem;bottom:.1rem;right:.5rem;text-decoration:underline;text-decoration-color:transparent}@media (prefers-reduced-motion: no-preference){button.tertiary,.button.tertiary{transition:color .2s ease-in-out 0s,text-decoration-color .2s ease-in-out 0s}}button.tertiary,button.tertiary:focus,button.tertiary:focus-visible,.button.tertiary,.button.tertiary:focus,.button.tertiary:focus-visible{background:none;color:#4f43ba;text-decoration-color:transparent}button.tertiary:hover,button.tertiary:active,.button.tertiary:hover,.button.tertiary:active{text-decoration-color:currentcolor}button.tertiary:hover,.button.tertiary:hover{color:#7c72e1}button.tertiary:active,.button.tertiary:active{color:#392d87}button.tertiary.muted,.button.tertiary.muted{color:#596580}button.tertiary.muted:hover,button.tertiary.muted:focus,button.tertiary.muted:focus-visible,.button.tertiary.muted:hover,.button.tertiary.muted:focus,.button.tertiary.muted:focus-visible{color:#7c72e1}button.tertiary.disabled,button.tertiary.disabled:hover,button.tertiary.disabled:active,button.tertiary.disabled:focus,button.tertiary.disabled:focus-visible,.button.tertiary.disabled,.button.tertiary.disabled:hover,.button.tertiary.disabled:active,.button.tertiary.disabled:focus,.button.tertiary.disabled:focus-visible{background:none;color:#4f43ba;text-decoration-color:transparent}button.icon,.button.icon{display:inline-flex;flex-flow:row;align-content:center;justify-content:center}button.icon:before,.button.icon:before{content:"";background:currentcolor;width:1rem;height:1rem;display:block}button.icon.right:before,.button.icon.right:before{order:2}button.icon.hover_arrow_left:hover:before,button.icon.hover_arrow_left:focus:before,button.icon.hover_arrow_left:focus-visible:before,.button.icon.hover_arrow_left:hover:before,.button.icon.hover_arrow_left:focus:before,.button.icon.hover_arrow_left:focus-visible:before,button.icon.arrow_left:before,.button.icon.arrow_left:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_left.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_left.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_arrow_left:hover:before,button.large.icon.hover_arrow_left:focus:before,button.large.icon.hover_arrow_left:focus-visible:before,.large.button.icon.hover_arrow_left:hover:before,.large.button.icon.hover_arrow_left:focus:before,.large.button.icon.hover_arrow_left:focus-visible:before,button.large.icon.arrow_left:before,.large.button.icon.arrow_left:before{margin-top:.1875rem}button.left.large.icon.hover_arrow_left:hover:before,button.left.large.icon.hover_arrow_left:focus:before,button.left.large.icon.hover_arrow_left:focus-visible:before,.left.large.button.icon.hover_arrow_left:hover:before,.left.large.button.icon.hover_arrow_left:focus:before,.left.large.button.icon.hover_arrow_left:focus-visible:before,button.left.large.icon.arrow_left:before,.left.large.button.icon.arrow_left:before{margin-right:.5rem}button.right.large.icon.hover_arrow_left:hover:before,button.right.large.icon.hover_arrow_left:focus:before,button.right.large.icon.hover_arrow_left:focus-visible:before,.right.large.button.icon.hover_arrow_left:hover:before,.right.large.button.icon.hover_arrow_left:focus:before,.right.large.button.icon.hover_arrow_left:focus-visible:before,button.right.large.icon.arrow_left:before,.right.large.button.icon.arrow_left:before{margin-left:.5rem}button.icon.hover_arrow_left:hover:before,button.icon.hover_arrow_left:focus:before,button.icon.hover_arrow_left:focus-visible:before,.button.icon.hover_arrow_left:hover:before,.button.icon.hover_arrow_left:focus:before,.button.icon.hover_arrow_left:focus-visible:before,button.icon.arrow_left:before,.button.icon.arrow_left:before{margin-top:.1875rem}button.left.icon.hover_arrow_left:hover:before,button.left.icon.hover_arrow_left:focus:before,button.left.icon.hover_arrow_left:focus-visible:before,.left.button.icon.hover_arrow_left:hover:before,.left.button.icon.hover_arrow_left:focus:before,.left.button.icon.hover_arrow_left:focus-visible:before,button.left.icon.arrow_left:before,.left.button.icon.arrow_left:before{margin-right:.5rem}button.right.icon.hover_arrow_left:hover:before,button.right.icon.hover_arrow_left:focus:before,button.right.icon.hover_arrow_left:focus-visible:before,.right.button.icon.hover_arrow_left:hover:before,.right.button.icon.hover_arrow_left:focus:before,.right.button.icon.hover_arrow_left:focus-visible:before,button.right.icon.arrow_left:before,.right.button.icon.arrow_left:before{margin-left:.5rem}button.small.icon.hover_arrow_left:hover:before,button.small.icon.hover_arrow_left:focus:before,button.small.icon.hover_arrow_left:focus-visible:before,.small.button.icon.hover_arrow_left:hover:before,.small.button.icon.hover_arrow_left:focus:before,.small.button.icon.hover_arrow_left:focus-visible:before,button.small.icon.arrow_left:before,.small.button.icon.arrow_left:before{margin-top:.25rem}button.left.small.icon.hover_arrow_left:hover:before,button.left.small.icon.hover_arrow_left:focus:before,button.left.small.icon.hover_arrow_left:focus-visible:before,.left.small.button.icon.hover_arrow_left:hover:before,.left.small.button.icon.hover_arrow_left:focus:before,.left.small.button.icon.hover_arrow_left:focus-visible:before,button.left.small.icon.arrow_left:before,.left.small.button.icon.arrow_left:before{margin-right:.4375rem}button.right.small.icon.hover_arrow_left:hover:before,button.right.small.icon.hover_arrow_left:focus:before,button.right.small.icon.hover_arrow_left:focus-visible:before,.right.small.button.icon.hover_arrow_left:hover:before,.right.small.button.icon.hover_arrow_left:focus:before,.right.small.button.icon.hover_arrow_left:focus-visible:before,button.right.small.icon.arrow_left:before,.right.small.button.icon.arrow_left:before{margin-left:.4375rem}button.icon.hover_arrow_right:hover:before,button.icon.hover_arrow_right:focus:before,button.icon.hover_arrow_right:focus-visible:before,.button.icon.hover_arrow_right:hover:before,.button.icon.hover_arrow_right:focus:before,.button.icon.hover_arrow_right:focus-visible:before,button.icon.arrow_right:before,.button.icon.arrow_right:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_right.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_right.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_arrow_right:hover:before,button.large.icon.hover_arrow_right:focus:before,button.large.icon.hover_arrow_right:focus-visible:before,.large.button.icon.hover_arrow_right:hover:before,.large.button.icon.hover_arrow_right:focus:before,.large.button.icon.hover_arrow_right:focus-visible:before,button.large.icon.arrow_right:before,.large.button.icon.arrow_right:before{margin-top:.1875rem}button.left.large.icon.hover_arrow_right:hover:before,button.left.large.icon.hover_arrow_right:focus:before,button.left.large.icon.hover_arrow_right:focus-visible:before,.left.large.button.icon.hover_arrow_right:hover:before,.left.large.button.icon.hover_arrow_right:focus:before,.left.large.button.icon.hover_arrow_right:focus-visible:before,button.left.large.icon.arrow_right:before,.left.large.button.icon.arrow_right:before{margin-right:.5rem}button.right.large.icon.hover_arrow_right:hover:before,button.right.large.icon.hover_arrow_right:focus:before,button.right.large.icon.hover_arrow_right:focus-visible:before,.right.large.button.icon.hover_arrow_right:hover:before,.right.large.button.icon.hover_arrow_right:focus:before,.right.large.button.icon.hover_arrow_right:focus-visible:before,button.right.large.icon.arrow_right:before,.right.large.button.icon.arrow_right:before{margin-left:.5rem}button.icon.hover_arrow_right:hover:before,button.icon.hover_arrow_right:focus:before,button.icon.hover_arrow_right:focus-visible:before,.button.icon.hover_arrow_right:hover:before,.button.icon.hover_arrow_right:focus:before,.button.icon.hover_arrow_right:focus-visible:before,button.icon.arrow_right:before,.button.icon.arrow_right:before{margin-top:.1875rem}button.left.icon.hover_arrow_right:hover:before,button.left.icon.hover_arrow_right:focus:before,button.left.icon.hover_arrow_right:focus-visible:before,.left.button.icon.hover_arrow_right:hover:before,.left.button.icon.hover_arrow_right:focus:before,.left.button.icon.hover_arrow_right:focus-visible:before,button.left.icon.arrow_right:before,.left.button.icon.arrow_right:before{margin-right:.5rem}button.right.icon.hover_arrow_right:hover:before,button.right.icon.hover_arrow_right:focus:before,button.right.icon.hover_arrow_right:focus-visible:before,.right.button.icon.hover_arrow_right:hover:before,.right.button.icon.hover_arrow_right:focus:before,.right.button.icon.hover_arrow_right:focus-visible:before,button.right.icon.arrow_right:before,.right.button.icon.arrow_right:before{margin-left:.5rem}button.small.icon.hover_arrow_right:hover:before,button.small.icon.hover_arrow_right:focus:before,button.small.icon.hover_arrow_right:focus-visible:before,.small.button.icon.hover_arrow_right:hover:before,.small.button.icon.hover_arrow_right:focus:before,.small.button.icon.hover_arrow_right:focus-visible:before,button.small.icon.arrow_right:before,.small.button.icon.arrow_right:before{margin-top:.25rem}button.left.small.icon.hover_arrow_right:hover:before,button.left.small.icon.hover_arrow_right:focus:before,button.left.small.icon.hover_arrow_right:focus-visible:before,.left.small.button.icon.hover_arrow_right:hover:before,.left.small.button.icon.hover_arrow_right:focus:before,.left.small.button.icon.hover_arrow_right:focus-visible:before,button.left.small.icon.arrow_right:before,.left.small.button.icon.arrow_right:before{margin-right:.4375rem}button.right.small.icon.hover_arrow_right:hover:before,button.right.small.icon.hover_arrow_right:focus:before,button.right.small.icon.hover_arrow_right:focus-visible:before,.right.small.button.icon.hover_arrow_right:hover:before,.right.small.button.icon.hover_arrow_right:focus:before,.right.small.button.icon.hover_arrow_right:focus-visible:before,button.right.small.icon.arrow_right:before,.right.small.button.icon.arrow_right:before{margin-left:.4375rem}button.icon.hover_arrow_corner-down_right:hover:before,button.icon.hover_arrow_corner-down_right:focus:before,button.icon.hover_arrow_corner-down_right:focus-visible:before,.button.icon.hover_arrow_corner-down_right:hover:before,.button.icon.hover_arrow_corner-down_right:focus:before,.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.icon.arrow_corner-down_right:before,.button.icon.arrow_corner-down_right:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_corner-down_right.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_corner-down_right.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_arrow_corner-down_right:hover:before,button.large.icon.hover_arrow_corner-down_right:focus:before,button.large.icon.hover_arrow_corner-down_right:focus-visible:before,.large.button.icon.hover_arrow_corner-down_right:hover:before,.large.button.icon.hover_arrow_corner-down_right:focus:before,.large.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.large.icon.arrow_corner-down_right:before,.large.button.icon.arrow_corner-down_right:before{width:.75rem}button.large.icon.hover_arrow_corner-down_right:hover:before,button.large.icon.hover_arrow_corner-down_right:focus:before,button.large.icon.hover_arrow_corner-down_right:focus-visible:before,.large.button.icon.hover_arrow_corner-down_right:hover:before,.large.button.icon.hover_arrow_corner-down_right:focus:before,.large.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.large.icon.arrow_corner-down_right:before,.large.button.icon.arrow_corner-down_right:before{height:.75rem}button.large.icon.hover_arrow_corner-down_right:hover:before,button.large.icon.hover_arrow_corner-down_right:focus:before,button.large.icon.hover_arrow_corner-down_right:focus-visible:before,.large.button.icon.hover_arrow_corner-down_right:hover:before,.large.button.icon.hover_arrow_corner-down_right:focus:before,.large.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.large.icon.arrow_corner-down_right:before,.large.button.icon.arrow_corner-down_right:before{margin-top:.375rem}button.left.large.icon.hover_arrow_corner-down_right:hover:before,button.left.large.icon.hover_arrow_corner-down_right:focus:before,button.left.large.icon.hover_arrow_corner-down_right:focus-visible:before,.left.large.button.icon.hover_arrow_corner-down_right:hover:before,.left.large.button.icon.hover_arrow_corner-down_right:focus:before,.left.large.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.left.large.icon.arrow_corner-down_right:before,.left.large.button.icon.arrow_corner-down_right:before{margin-right:.5rem}button.right.large.icon.hover_arrow_corner-down_right:hover:before,button.right.large.icon.hover_arrow_corner-down_right:focus:before,button.right.large.icon.hover_arrow_corner-down_right:focus-visible:before,.right.large.button.icon.hover_arrow_corner-down_right:hover:before,.right.large.button.icon.hover_arrow_corner-down_right:focus:before,.right.large.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.right.large.icon.arrow_corner-down_right:before,.right.large.button.icon.arrow_corner-down_right:before{margin-left:.5rem}button.icon.hover_arrow_corner-down_right:hover:before,button.icon.hover_arrow_corner-down_right:focus:before,button.icon.hover_arrow_corner-down_right:focus-visible:before,.button.icon.hover_arrow_corner-down_right:hover:before,.button.icon.hover_arrow_corner-down_right:focus:before,.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.icon.arrow_corner-down_right:before,.button.icon.arrow_corner-down_right:before{width:.75rem}button.icon.hover_arrow_corner-down_right:hover:before,button.icon.hover_arrow_corner-down_right:focus:before,button.icon.hover_arrow_corner-down_right:focus-visible:before,.button.icon.hover_arrow_corner-down_right:hover:before,.button.icon.hover_arrow_corner-down_right:focus:before,.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.icon.arrow_corner-down_right:before,.button.icon.arrow_corner-down_right:before{height:.75rem}button.icon.hover_arrow_corner-down_right:hover:before,button.icon.hover_arrow_corner-down_right:focus:before,button.icon.hover_arrow_corner-down_right:focus-visible:before,.button.icon.hover_arrow_corner-down_right:hover:before,.button.icon.hover_arrow_corner-down_right:focus:before,.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.icon.arrow_corner-down_right:before,.button.icon.arrow_corner-down_right:before{margin-top:.25rem}button.left.icon.hover_arrow_corner-down_right:hover:before,button.left.icon.hover_arrow_corner-down_right:focus:before,button.left.icon.hover_arrow_corner-down_right:focus-visible:before,.left.button.icon.hover_arrow_corner-down_right:hover:before,.left.button.icon.hover_arrow_corner-down_right:focus:before,.left.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.left.icon.arrow_corner-down_right:before,.left.button.icon.arrow_corner-down_right:before{margin-right:.75rem}button.right.icon.hover_arrow_corner-down_right:hover:before,button.right.icon.hover_arrow_corner-down_right:focus:before,button.right.icon.hover_arrow_corner-down_right:focus-visible:before,.right.button.icon.hover_arrow_corner-down_right:hover:before,.right.button.icon.hover_arrow_corner-down_right:focus:before,.right.button.icon.hover_arrow_corner-down_right:focus-visible:before,button.right.icon.arrow_corner-down_right:before,.right.button.icon.arrow_corner-down_right:before{margin-left:.75rem}button.icon.hover_arrow_corner-down_left:hover:before,button.icon.hover_arrow_corner-down_left:focus:before,button.icon.hover_arrow_corner-down_left:focus-visible:before,.button.icon.hover_arrow_corner-down_left:hover:before,.button.icon.hover_arrow_corner-down_left:focus:before,.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.icon.arrow_corner-down_left:before,.button.icon.arrow_corner-down_left:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_corner-down_left.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow_corner-down_left.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_arrow_corner-down_left:hover:before,button.large.icon.hover_arrow_corner-down_left:focus:before,button.large.icon.hover_arrow_corner-down_left:focus-visible:before,.large.button.icon.hover_arrow_corner-down_left:hover:before,.large.button.icon.hover_arrow_corner-down_left:focus:before,.large.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.large.icon.arrow_corner-down_left:before,.large.button.icon.arrow_corner-down_left:before{width:.75rem}button.large.icon.hover_arrow_corner-down_left:hover:before,button.large.icon.hover_arrow_corner-down_left:focus:before,button.large.icon.hover_arrow_corner-down_left:focus-visible:before,.large.button.icon.hover_arrow_corner-down_left:hover:before,.large.button.icon.hover_arrow_corner-down_left:focus:before,.large.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.large.icon.arrow_corner-down_left:before,.large.button.icon.arrow_corner-down_left:before{height:.75rem}button.large.icon.hover_arrow_corner-down_left:hover:before,button.large.icon.hover_arrow_corner-down_left:focus:before,button.large.icon.hover_arrow_corner-down_left:focus-visible:before,.large.button.icon.hover_arrow_corner-down_left:hover:before,.large.button.icon.hover_arrow_corner-down_left:focus:before,.large.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.large.icon.arrow_corner-down_left:before,.large.button.icon.arrow_corner-down_left:before{margin-top:.375rem}button.left.large.icon.hover_arrow_corner-down_left:hover:before,button.left.large.icon.hover_arrow_corner-down_left:focus:before,button.left.large.icon.hover_arrow_corner-down_left:focus-visible:before,.left.large.button.icon.hover_arrow_corner-down_left:hover:before,.left.large.button.icon.hover_arrow_corner-down_left:focus:before,.left.large.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.left.large.icon.arrow_corner-down_left:before,.left.large.button.icon.arrow_corner-down_left:before{margin-right:.5rem}button.right.large.icon.hover_arrow_corner-down_left:hover:before,button.right.large.icon.hover_arrow_corner-down_left:focus:before,button.right.large.icon.hover_arrow_corner-down_left:focus-visible:before,.right.large.button.icon.hover_arrow_corner-down_left:hover:before,.right.large.button.icon.hover_arrow_corner-down_left:focus:before,.right.large.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.right.large.icon.arrow_corner-down_left:before,.right.large.button.icon.arrow_corner-down_left:before{margin-left:.5rem}button.icon.hover_arrow_corner-down_left:hover:before,button.icon.hover_arrow_corner-down_left:focus:before,button.icon.hover_arrow_corner-down_left:focus-visible:before,.button.icon.hover_arrow_corner-down_left:hover:before,.button.icon.hover_arrow_corner-down_left:focus:before,.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.icon.arrow_corner-down_left:before,.button.icon.arrow_corner-down_left:before{width:.75rem}button.icon.hover_arrow_corner-down_left:hover:before,button.icon.hover_arrow_corner-down_left:focus:before,button.icon.hover_arrow_corner-down_left:focus-visible:before,.button.icon.hover_arrow_corner-down_left:hover:before,.button.icon.hover_arrow_corner-down_left:focus:before,.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.icon.arrow_corner-down_left:before,.button.icon.arrow_corner-down_left:before{height:.75rem}button.icon.hover_arrow_corner-down_left:hover:before,button.icon.hover_arrow_corner-down_left:focus:before,button.icon.hover_arrow_corner-down_left:focus-visible:before,.button.icon.hover_arrow_corner-down_left:hover:before,.button.icon.hover_arrow_corner-down_left:focus:before,.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.icon.arrow_corner-down_left:before,.button.icon.arrow_corner-down_left:before{margin-top:.25rem}button.left.icon.hover_arrow_corner-down_left:hover:before,button.left.icon.hover_arrow_corner-down_left:focus:before,button.left.icon.hover_arrow_corner-down_left:focus-visible:before,.left.button.icon.hover_arrow_corner-down_left:hover:before,.left.button.icon.hover_arrow_corner-down_left:focus:before,.left.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.left.icon.arrow_corner-down_left:before,.left.button.icon.arrow_corner-down_left:before{margin-right:.75rem}button.right.icon.hover_arrow_corner-down_left:hover:before,button.right.icon.hover_arrow_corner-down_left:focus:before,button.right.icon.hover_arrow_corner-down_left:focus-visible:before,.right.button.icon.hover_arrow_corner-down_left:hover:before,.right.button.icon.hover_arrow_corner-down_left:focus:before,.right.button.icon.hover_arrow_corner-down_left:focus-visible:before,button.right.icon.arrow_corner-down_left:before,.right.button.icon.arrow_corner-down_left:before{margin-left:.75rem}button.icon.hover_arrow-down:hover:before,button.icon.hover_arrow-down:focus:before,button.icon.hover_arrow-down:focus-visible:before,.button.icon.hover_arrow-down:hover:before,.button.icon.hover_arrow-down:focus:before,.button.icon.hover_arrow-down:focus-visible:before,button.icon.arrow-down:before,.button.icon.arrow-down:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow-down.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/arrow-down.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_arrow-down:hover:before,button.large.icon.hover_arrow-down:focus:before,button.large.icon.hover_arrow-down:focus-visible:before,.large.button.icon.hover_arrow-down:hover:before,.large.button.icon.hover_arrow-down:focus:before,.large.button.icon.hover_arrow-down:focus-visible:before,button.large.icon.arrow-down:before,.large.button.icon.arrow-down:before{margin-top:.25rem}button.left.large.icon.hover_arrow-down:hover:before,button.left.large.icon.hover_arrow-down:focus:before,button.left.large.icon.hover_arrow-down:focus-visible:before,.left.large.button.icon.hover_arrow-down:hover:before,.left.large.button.icon.hover_arrow-down:focus:before,.left.large.button.icon.hover_arrow-down:focus-visible:before,button.left.large.icon.arrow-down:before,.left.large.button.icon.arrow-down:before{margin-right:.625rem}button.right.large.icon.hover_arrow-down:hover:before,button.right.large.icon.hover_arrow-down:focus:before,button.right.large.icon.hover_arrow-down:focus-visible:before,.right.large.button.icon.hover_arrow-down:hover:before,.right.large.button.icon.hover_arrow-down:focus:before,.right.large.button.icon.hover_arrow-down:focus-visible:before,button.right.large.icon.arrow-down:before,.right.large.button.icon.arrow-down:before{margin-left:.625rem}button.icon.hover_arrow-down:hover:before,button.icon.hover_arrow-down:focus:before,button.icon.hover_arrow-down:focus-visible:before,.button.icon.hover_arrow-down:hover:before,.button.icon.hover_arrow-down:focus:before,.button.icon.hover_arrow-down:focus-visible:before,button.icon.arrow-down:before,.button.icon.arrow-down:before{margin-top:.1875rem}button.left.icon.hover_arrow-down:hover:before,button.left.icon.hover_arrow-down:focus:before,button.left.icon.hover_arrow-down:focus-visible:before,.left.button.icon.hover_arrow-down:hover:before,.left.button.icon.hover_arrow-down:focus:before,.left.button.icon.hover_arrow-down:focus-visible:before,button.left.icon.arrow-down:before,.left.button.icon.arrow-down:before{margin-right:.5rem}button.right.icon.hover_arrow-down:hover:before,button.right.icon.hover_arrow-down:focus:before,button.right.icon.hover_arrow-down:focus-visible:before,.right.button.icon.hover_arrow-down:hover:before,.right.button.icon.hover_arrow-down:focus:before,.right.button.icon.hover_arrow-down:focus-visible:before,button.right.icon.arrow-down:before,.right.button.icon.arrow-down:before{margin-left:.5rem}button.small.icon.hover_arrow-down:hover:before,button.small.icon.hover_arrow-down:focus:before,button.small.icon.hover_arrow-down:focus-visible:before,.small.button.icon.hover_arrow-down:hover:before,.small.button.icon.hover_arrow-down:focus:before,.small.button.icon.hover_arrow-down:focus-visible:before,button.small.icon.arrow-down:before,.small.button.icon.arrow-down:before{margin-top:.25rem}button.icon.hover_chevron_left:hover:before,button.icon.hover_chevron_left:focus:before,button.icon.hover_chevron_left:focus-visible:before,.button.icon.hover_chevron_left:hover:before,.button.icon.hover_chevron_left:focus:before,.button.icon.hover_chevron_left:focus-visible:before,button.icon.chevron_left:before,.button.icon.chevron_left:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/chevron_left.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/chevron_left.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_chevron_left:hover:before,button.large.icon.hover_chevron_left:focus:before,button.large.icon.hover_chevron_left:focus-visible:before,.large.button.icon.hover_chevron_left:hover:before,.large.button.icon.hover_chevron_left:focus:before,.large.button.icon.hover_chevron_left:focus-visible:before,button.large.icon.chevron_left:before,.large.button.icon.chevron_left:before{width:1rem}button.large.icon.hover_chevron_left:hover:before,button.large.icon.hover_chevron_left:focus:before,button.large.icon.hover_chevron_left:focus-visible:before,.large.button.icon.hover_chevron_left:hover:before,.large.button.icon.hover_chevron_left:focus:before,.large.button.icon.hover_chevron_left:focus-visible:before,button.large.icon.chevron_left:before,.large.button.icon.chevron_left:before{height:1rem}button.large.icon.hover_chevron_left:hover:before,button.large.icon.hover_chevron_left:focus:before,button.large.icon.hover_chevron_left:focus-visible:before,.large.button.icon.hover_chevron_left:hover:before,.large.button.icon.hover_chevron_left:focus:before,.large.button.icon.hover_chevron_left:focus-visible:before,button.large.icon.chevron_left:before,.large.button.icon.chevron_left:before{margin-top:.25rem}button.left.large.icon.hover_chevron_left:hover:before,button.left.large.icon.hover_chevron_left:focus:before,button.left.large.icon.hover_chevron_left:focus-visible:before,.left.large.button.icon.hover_chevron_left:hover:before,.left.large.button.icon.hover_chevron_left:focus:before,.left.large.button.icon.hover_chevron_left:focus-visible:before,button.left.large.icon.chevron_left:before,.left.large.button.icon.chevron_left:before{margin-right:.5rem}button.right.large.icon.hover_chevron_left:hover:before,button.right.large.icon.hover_chevron_left:focus:before,button.right.large.icon.hover_chevron_left:focus-visible:before,.right.large.button.icon.hover_chevron_left:hover:before,.right.large.button.icon.hover_chevron_left:focus:before,.right.large.button.icon.hover_chevron_left:focus-visible:before,button.right.large.icon.chevron_left:before,.right.large.button.icon.chevron_left:before{margin-left:.5rem}button.icon.hover_chevron_left:hover:before,button.icon.hover_chevron_left:focus:before,button.icon.hover_chevron_left:focus-visible:before,.button.icon.hover_chevron_left:hover:before,.button.icon.hover_chevron_left:focus:before,.button.icon.hover_chevron_left:focus-visible:before,button.icon.chevron_left:before,.button.icon.chevron_left:before{width:.875rem}button.icon.hover_chevron_left:hover:before,button.icon.hover_chevron_left:focus:before,button.icon.hover_chevron_left:focus-visible:before,.button.icon.hover_chevron_left:hover:before,.button.icon.hover_chevron_left:focus:before,.button.icon.hover_chevron_left:focus-visible:before,button.icon.chevron_left:before,.button.icon.chevron_left:before{height:.875rem}button.icon.hover_chevron_left:hover:before,button.icon.hover_chevron_left:focus:before,button.icon.hover_chevron_left:focus-visible:before,.button.icon.hover_chevron_left:hover:before,.button.icon.hover_chevron_left:focus:before,.button.icon.hover_chevron_left:focus-visible:before,button.icon.chevron_left:before,.button.icon.chevron_left:before{margin-top:.1875rem}button.left.icon.hover_chevron_left:hover:before,button.left.icon.hover_chevron_left:focus:before,button.left.icon.hover_chevron_left:focus-visible:before,.left.button.icon.hover_chevron_left:hover:before,.left.button.icon.hover_chevron_left:focus:before,.left.button.icon.hover_chevron_left:focus-visible:before,button.left.icon.chevron_left:before,.left.button.icon.chevron_left:before{margin-right:.5rem}button.right.icon.hover_chevron_left:hover:before,button.right.icon.hover_chevron_left:focus:before,button.right.icon.hover_chevron_left:focus-visible:before,.right.button.icon.hover_chevron_left:hover:before,.right.button.icon.hover_chevron_left:focus:before,.right.button.icon.hover_chevron_left:focus-visible:before,button.right.icon.chevron_left:before,.right.button.icon.chevron_left:before{margin-left:.5rem}button.small.icon.hover_chevron_left:hover:before,button.small.icon.hover_chevron_left:focus:before,button.small.icon.hover_chevron_left:focus-visible:before,.small.button.icon.hover_chevron_left:hover:before,.small.button.icon.hover_chevron_left:focus:before,.small.button.icon.hover_chevron_left:focus-visible:before,button.small.icon.chevron_left:before,.small.button.icon.chevron_left:before{width:.875rem}button.small.icon.hover_chevron_left:hover:before,button.small.icon.hover_chevron_left:focus:before,button.small.icon.hover_chevron_left:focus-visible:before,.small.button.icon.hover_chevron_left:hover:before,.small.button.icon.hover_chevron_left:focus:before,.small.button.icon.hover_chevron_left:focus-visible:before,button.small.icon.chevron_left:before,.small.button.icon.chevron_left:before{height:.875rem}button.icon.hover_chevron_right:hover:before,button.icon.hover_chevron_right:focus:before,button.icon.hover_chevron_right:focus-visible:before,.button.icon.hover_chevron_right:hover:before,.button.icon.hover_chevron_right:focus:before,.button.icon.hover_chevron_right:focus-visible:before,button.icon.chevron_right:before,.button.icon.chevron_right:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/chevron_right.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/chevron_right.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_chevron_right:hover:before,button.large.icon.hover_chevron_right:focus:before,button.large.icon.hover_chevron_right:focus-visible:before,.large.button.icon.hover_chevron_right:hover:before,.large.button.icon.hover_chevron_right:focus:before,.large.button.icon.hover_chevron_right:focus-visible:before,button.large.icon.chevron_right:before,.large.button.icon.chevron_right:before{width:1rem}button.large.icon.hover_chevron_right:hover:before,button.large.icon.hover_chevron_right:focus:before,button.large.icon.hover_chevron_right:focus-visible:before,.large.button.icon.hover_chevron_right:hover:before,.large.button.icon.hover_chevron_right:focus:before,.large.button.icon.hover_chevron_right:focus-visible:before,button.large.icon.chevron_right:before,.large.button.icon.chevron_right:before{height:1rem}button.large.icon.hover_chevron_right:hover:before,button.large.icon.hover_chevron_right:focus:before,button.large.icon.hover_chevron_right:focus-visible:before,.large.button.icon.hover_chevron_right:hover:before,.large.button.icon.hover_chevron_right:focus:before,.large.button.icon.hover_chevron_right:focus-visible:before,button.large.icon.chevron_right:before,.large.button.icon.chevron_right:before{margin-top:.25rem}button.left.large.icon.hover_chevron_right:hover:before,button.left.large.icon.hover_chevron_right:focus:before,button.left.large.icon.hover_chevron_right:focus-visible:before,.left.large.button.icon.hover_chevron_right:hover:before,.left.large.button.icon.hover_chevron_right:focus:before,.left.large.button.icon.hover_chevron_right:focus-visible:before,button.left.large.icon.chevron_right:before,.left.large.button.icon.chevron_right:before{margin-right:.5rem}button.right.large.icon.hover_chevron_right:hover:before,button.right.large.icon.hover_chevron_right:focus:before,button.right.large.icon.hover_chevron_right:focus-visible:before,.right.large.button.icon.hover_chevron_right:hover:before,.right.large.button.icon.hover_chevron_right:focus:before,.right.large.button.icon.hover_chevron_right:focus-visible:before,button.right.large.icon.chevron_right:before,.right.large.button.icon.chevron_right:before{margin-left:.5rem}button.icon.hover_chevron_right:hover:before,button.icon.hover_chevron_right:focus:before,button.icon.hover_chevron_right:focus-visible:before,.button.icon.hover_chevron_right:hover:before,.button.icon.hover_chevron_right:focus:before,.button.icon.hover_chevron_right:focus-visible:before,button.icon.chevron_right:before,.button.icon.chevron_right:before{width:.875rem}button.icon.hover_chevron_right:hover:before,button.icon.hover_chevron_right:focus:before,button.icon.hover_chevron_right:focus-visible:before,.button.icon.hover_chevron_right:hover:before,.button.icon.hover_chevron_right:focus:before,.button.icon.hover_chevron_right:focus-visible:before,button.icon.chevron_right:before,.button.icon.chevron_right:before{height:.875rem}button.icon.hover_chevron_right:hover:before,button.icon.hover_chevron_right:focus:before,button.icon.hover_chevron_right:focus-visible:before,.button.icon.hover_chevron_right:hover:before,.button.icon.hover_chevron_right:focus:before,.button.icon.hover_chevron_right:focus-visible:before,button.icon.chevron_right:before,.button.icon.chevron_right:before{margin-top:.1875rem}button.left.icon.hover_chevron_right:hover:before,button.left.icon.hover_chevron_right:focus:before,button.left.icon.hover_chevron_right:focus-visible:before,.left.button.icon.hover_chevron_right:hover:before,.left.button.icon.hover_chevron_right:focus:before,.left.button.icon.hover_chevron_right:focus-visible:before,button.left.icon.chevron_right:before,.left.button.icon.chevron_right:before{margin-right:.5rem}button.right.icon.hover_chevron_right:hover:before,button.right.icon.hover_chevron_right:focus:before,button.right.icon.hover_chevron_right:focus-visible:before,.right.button.icon.hover_chevron_right:hover:before,.right.button.icon.hover_chevron_right:focus:before,.right.button.icon.hover_chevron_right:focus-visible:before,button.right.icon.chevron_right:before,.right.button.icon.chevron_right:before{margin-left:.5rem}button.small.icon.hover_chevron_right:hover:before,button.small.icon.hover_chevron_right:focus:before,button.small.icon.hover_chevron_right:focus-visible:before,.small.button.icon.hover_chevron_right:hover:before,.small.button.icon.hover_chevron_right:focus:before,.small.button.icon.hover_chevron_right:focus-visible:before,button.small.icon.chevron_right:before,.small.button.icon.chevron_right:before{width:.875rem}button.small.icon.hover_chevron_right:hover:before,button.small.icon.hover_chevron_right:focus:before,button.small.icon.hover_chevron_right:focus-visible:before,.small.button.icon.hover_chevron_right:hover:before,.small.button.icon.hover_chevron_right:focus:before,.small.button.icon.hover_chevron_right:focus-visible:before,button.small.icon.chevron_right:before,.small.button.icon.chevron_right:before{height:.875rem}button.icon.hover_heart:hover:before,button.icon.hover_heart:focus:before,button.icon.hover_heart:focus-visible:before,.button.icon.hover_heart:hover:before,.button.icon.hover_heart:focus:before,.button.icon.hover_heart:focus-visible:before,button.icon.heart:before,.button.icon.heart:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/heart.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/heart.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_heart:hover:before,button.large.icon.hover_heart:focus:before,button.large.icon.hover_heart:focus-visible:before,.large.button.icon.hover_heart:hover:before,.large.button.icon.hover_heart:focus:before,.large.button.icon.hover_heart:focus-visible:before,button.large.icon.heart:before,.large.button.icon.heart:before{width:1.375rem}button.large.icon.hover_heart:hover:before,button.large.icon.hover_heart:focus:before,button.large.icon.hover_heart:focus-visible:before,.large.button.icon.hover_heart:hover:before,.large.button.icon.hover_heart:focus:before,.large.button.icon.hover_heart:focus-visible:before,button.large.icon.heart:before,.large.button.icon.heart:before{height:1.375rem}button.large.icon.hover_heart:hover:before,button.large.icon.hover_heart:focus:before,button.large.icon.hover_heart:focus-visible:before,.large.button.icon.hover_heart:hover:before,.large.button.icon.hover_heart:focus:before,.large.button.icon.hover_heart:focus-visible:before,button.large.icon.heart:before,.large.button.icon.heart:before{margin-top:0rem}button.left.large.icon.hover_heart:hover:before,button.left.large.icon.hover_heart:focus:before,button.left.large.icon.hover_heart:focus-visible:before,.left.large.button.icon.hover_heart:hover:before,.left.large.button.icon.hover_heart:focus:before,.left.large.button.icon.hover_heart:focus-visible:before,button.left.large.icon.heart:before,.left.large.button.icon.heart:before{margin-right:.625rem}button.right.large.icon.hover_heart:hover:before,button.right.large.icon.hover_heart:focus:before,button.right.large.icon.hover_heart:focus-visible:before,.right.large.button.icon.hover_heart:hover:before,.right.large.button.icon.hover_heart:focus:before,.right.large.button.icon.hover_heart:focus-visible:before,button.right.large.icon.heart:before,.right.large.button.icon.heart:before{margin-left:.625rem}button.icon.hover_heart:hover:before,button.icon.hover_heart:focus:before,button.icon.hover_heart:focus-visible:before,.button.icon.hover_heart:hover:before,.button.icon.hover_heart:focus:before,.button.icon.hover_heart:focus-visible:before,button.icon.heart:before,.button.icon.heart:before{width:1.125rem}button.icon.hover_heart:hover:before,button.icon.hover_heart:focus:before,button.icon.hover_heart:focus-visible:before,.button.icon.hover_heart:hover:before,.button.icon.hover_heart:focus:before,.button.icon.hover_heart:focus-visible:before,button.icon.heart:before,.button.icon.heart:before{height:1.125rem}button.icon.hover_heart:hover:before,button.icon.hover_heart:focus:before,button.icon.hover_heart:focus-visible:before,.button.icon.hover_heart:hover:before,.button.icon.hover_heart:focus:before,.button.icon.hover_heart:focus-visible:before,button.icon.heart:before,.button.icon.heart:before{margin-top:.0625rem}button.small.icon.hover_heart:hover:before,button.small.icon.hover_heart:focus:before,button.small.icon.hover_heart:focus-visible:before,.small.button.icon.hover_heart:hover:before,.small.button.icon.hover_heart:focus:before,.small.button.icon.hover_heart:focus-visible:before,button.small.icon.heart:before,.small.button.icon.heart:before{margin-top:.1875rem}button.left.small.icon.hover_heart:hover:before,button.left.small.icon.hover_heart:focus:before,button.left.small.icon.hover_heart:focus-visible:before,.left.small.button.icon.hover_heart:hover:before,.left.small.button.icon.hover_heart:focus:before,.left.small.button.icon.hover_heart:focus-visible:before,button.left.small.icon.heart:before,.left.small.button.icon.heart:before{margin-right:.625rem}button.right.small.icon.hover_heart:hover:before,button.right.small.icon.hover_heart:focus:before,button.right.small.icon.hover_heart:focus-visible:before,.right.small.button.icon.hover_heart:hover:before,.right.small.button.icon.hover_heart:focus:before,.right.small.button.icon.hover_heart:focus-visible:before,button.right.small.icon.heart:before,.right.small.button.icon.heart:before{margin-left:.625rem}button.icon.hover_heart_empty:hover:before,button.icon.hover_heart_empty:focus:before,button.icon.hover_heart_empty:focus-visible:before,.button.icon.hover_heart_empty:hover:before,.button.icon.hover_heart_empty:focus:before,.button.icon.hover_heart_empty:focus-visible:before,button.icon.heart_empty:before,.button.icon.heart_empty:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/heart_empty.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/heart_empty.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_heart_empty:hover:before,button.large.icon.hover_heart_empty:focus:before,button.large.icon.hover_heart_empty:focus-visible:before,.large.button.icon.hover_heart_empty:hover:before,.large.button.icon.hover_heart_empty:focus:before,.large.button.icon.hover_heart_empty:focus-visible:before,button.large.icon.heart_empty:before,.large.button.icon.heart_empty:before{width:1.375rem}button.large.icon.hover_heart_empty:hover:before,button.large.icon.hover_heart_empty:focus:before,button.large.icon.hover_heart_empty:focus-visible:before,.large.button.icon.hover_heart_empty:hover:before,.large.button.icon.hover_heart_empty:focus:before,.large.button.icon.hover_heart_empty:focus-visible:before,button.large.icon.heart_empty:before,.large.button.icon.heart_empty:before{height:1.375rem}button.large.icon.hover_heart_empty:hover:before,button.large.icon.hover_heart_empty:focus:before,button.large.icon.hover_heart_empty:focus-visible:before,.large.button.icon.hover_heart_empty:hover:before,.large.button.icon.hover_heart_empty:focus:before,.large.button.icon.hover_heart_empty:focus-visible:before,button.large.icon.heart_empty:before,.large.button.icon.heart_empty:before{margin-top:0rem}button.left.large.icon.hover_heart_empty:hover:before,button.left.large.icon.hover_heart_empty:focus:before,button.left.large.icon.hover_heart_empty:focus-visible:before,.left.large.button.icon.hover_heart_empty:hover:before,.left.large.button.icon.hover_heart_empty:focus:before,.left.large.button.icon.hover_heart_empty:focus-visible:before,button.left.large.icon.heart_empty:before,.left.large.button.icon.heart_empty:before{margin-right:.625rem}button.right.large.icon.hover_heart_empty:hover:before,button.right.large.icon.hover_heart_empty:focus:before,button.right.large.icon.hover_heart_empty:focus-visible:before,.right.large.button.icon.hover_heart_empty:hover:before,.right.large.button.icon.hover_heart_empty:focus:before,.right.large.button.icon.hover_heart_empty:focus-visible:before,button.right.large.icon.heart_empty:before,.right.large.button.icon.heart_empty:before{margin-left:.625rem}button.icon.hover_heart_empty:hover:before,button.icon.hover_heart_empty:focus:before,button.icon.hover_heart_empty:focus-visible:before,.button.icon.hover_heart_empty:hover:before,.button.icon.hover_heart_empty:focus:before,.button.icon.hover_heart_empty:focus-visible:before,button.icon.heart_empty:before,.button.icon.heart_empty:before{width:1.125rem}button.icon.hover_heart_empty:hover:before,button.icon.hover_heart_empty:focus:before,button.icon.hover_heart_empty:focus-visible:before,.button.icon.hover_heart_empty:hover:before,.button.icon.hover_heart_empty:focus:before,.button.icon.hover_heart_empty:focus-visible:before,button.icon.heart_empty:before,.button.icon.heart_empty:before{height:1.125rem}button.icon.hover_heart_empty:hover:before,button.icon.hover_heart_empty:focus:before,button.icon.hover_heart_empty:focus-visible:before,.button.icon.hover_heart_empty:hover:before,.button.icon.hover_heart_empty:focus:before,.button.icon.hover_heart_empty:focus-visible:before,button.icon.heart_empty:before,.button.icon.heart_empty:before{margin-top:.0625rem}button.small.icon.hover_heart_empty:hover:before,button.small.icon.hover_heart_empty:focus:before,button.small.icon.hover_heart_empty:focus-visible:before,.small.button.icon.hover_heart_empty:hover:before,.small.button.icon.hover_heart_empty:focus:before,.small.button.icon.hover_heart_empty:focus-visible:before,button.small.icon.heart_empty:before,.small.button.icon.heart_empty:before{margin-top:.1875rem}button.left.small.icon.hover_heart_empty:hover:before,button.left.small.icon.hover_heart_empty:focus:before,button.left.small.icon.hover_heart_empty:focus-visible:before,.left.small.button.icon.hover_heart_empty:hover:before,.left.small.button.icon.hover_heart_empty:focus:before,.left.small.button.icon.hover_heart_empty:focus-visible:before,button.left.small.icon.heart_empty:before,.left.small.button.icon.heart_empty:before{margin-right:.625rem}button.right.small.icon.hover_heart_empty:hover:before,button.right.small.icon.hover_heart_empty:focus:before,button.right.small.icon.hover_heart_empty:focus-visible:before,.right.small.button.icon.hover_heart_empty:hover:before,.right.small.button.icon.hover_heart_empty:focus:before,.right.small.button.icon.hover_heart_empty:focus-visible:before,button.right.small.icon.heart_empty:before,.right.small.button.icon.heart_empty:before{margin-left:.625rem}button.icon.hover_navigation_arrow:hover:before,button.icon.hover_navigation_arrow:focus:before,button.icon.hover_navigation_arrow:focus-visible:before,.button.icon.hover_navigation_arrow:hover:before,.button.icon.hover_navigation_arrow:focus:before,.button.icon.hover_navigation_arrow:focus-visible:before,button.icon.navigation_arrow:before,.button.icon.navigation_arrow:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/navigation_arrow.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/navigation_arrow.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_navigation_arrow:hover:before,button.large.icon.hover_navigation_arrow:focus:before,button.large.icon.hover_navigation_arrow:focus-visible:before,.large.button.icon.hover_navigation_arrow:hover:before,.large.button.icon.hover_navigation_arrow:focus:before,.large.button.icon.hover_navigation_arrow:focus-visible:before,button.large.icon.navigation_arrow:before,.large.button.icon.navigation_arrow:before{margin-top:.25rem}button.left.large.icon.hover_navigation_arrow:hover:before,button.left.large.icon.hover_navigation_arrow:focus:before,button.left.large.icon.hover_navigation_arrow:focus-visible:before,.left.large.button.icon.hover_navigation_arrow:hover:before,.left.large.button.icon.hover_navigation_arrow:focus:before,.left.large.button.icon.hover_navigation_arrow:focus-visible:before,button.left.large.icon.navigation_arrow:before,.left.large.button.icon.navigation_arrow:before{margin-right:.625rem}button.right.large.icon.hover_navigation_arrow:hover:before,button.right.large.icon.hover_navigation_arrow:focus:before,button.right.large.icon.hover_navigation_arrow:focus-visible:before,.right.large.button.icon.hover_navigation_arrow:hover:before,.right.large.button.icon.hover_navigation_arrow:focus:before,.right.large.button.icon.hover_navigation_arrow:focus-visible:before,button.right.large.icon.navigation_arrow:before,.right.large.button.icon.navigation_arrow:before{margin-left:.625rem}button.small.icon.hover_navigation_arrow:hover:before,button.small.icon.hover_navigation_arrow:focus:before,button.small.icon.hover_navigation_arrow:focus-visible:before,.small.button.icon.hover_navigation_arrow:hover:before,.small.button.icon.hover_navigation_arrow:focus:before,.small.button.icon.hover_navigation_arrow:focus-visible:before,button.small.icon.navigation_arrow:before,.small.button.icon.navigation_arrow:before{width:.875rem}button.small.icon.hover_navigation_arrow:hover:before,button.small.icon.hover_navigation_arrow:focus:before,button.small.icon.hover_navigation_arrow:focus-visible:before,.small.button.icon.hover_navigation_arrow:hover:before,.small.button.icon.hover_navigation_arrow:focus:before,.small.button.icon.hover_navigation_arrow:focus-visible:before,button.small.icon.navigation_arrow:before,.small.button.icon.navigation_arrow:before{height:.875rem}button.left.small.icon.hover_navigation_arrow:hover:before,button.left.small.icon.hover_navigation_arrow:focus:before,button.left.small.icon.hover_navigation_arrow:focus-visible:before,.left.small.button.icon.hover_navigation_arrow:hover:before,.left.small.button.icon.hover_navigation_arrow:focus:before,.left.small.button.icon.hover_navigation_arrow:focus-visible:before,button.left.small.icon.navigation_arrow:before,.left.small.button.icon.navigation_arrow:before{margin-right:.625rem}button.right.small.icon.hover_navigation_arrow:hover:before,button.right.small.icon.hover_navigation_arrow:focus:before,button.right.small.icon.hover_navigation_arrow:focus-visible:before,.right.small.button.icon.hover_navigation_arrow:hover:before,.right.small.button.icon.hover_navigation_arrow:focus:before,.right.small.button.icon.hover_navigation_arrow:focus-visible:before,button.right.small.icon.navigation_arrow:before,.right.small.button.icon.navigation_arrow:before{margin-left:.625rem}button.icon.hover_pencil:hover:before,button.icon.hover_pencil:focus:before,button.icon.hover_pencil:focus-visible:before,.button.icon.hover_pencil:hover:before,.button.icon.hover_pencil:focus:before,.button.icon.hover_pencil:focus-visible:before,button.icon.pencil:before,.button.icon.pencil:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/pencil.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/pencil.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.left.icon.hover_pencil:hover:before,button.left.icon.hover_pencil:focus:before,button.left.icon.hover_pencil:focus-visible:before,.left.button.icon.hover_pencil:hover:before,.left.button.icon.hover_pencil:focus:before,.left.button.icon.hover_pencil:focus-visible:before,button.left.icon.pencil:before,.left.button.icon.pencil:before{margin-right:.6875rem}button.right.icon.hover_pencil:hover:before,button.right.icon.hover_pencil:focus:before,button.right.icon.hover_pencil:focus-visible:before,.right.button.icon.hover_pencil:hover:before,.right.button.icon.hover_pencil:focus:before,.right.button.icon.hover_pencil:focus-visible:before,button.right.icon.pencil:before,.right.button.icon.pencil:before{margin-left:.6875rem}button.small.icon.hover_pencil:hover:before,button.small.icon.hover_pencil:focus:before,button.small.icon.hover_pencil:focus-visible:before,.small.button.icon.hover_pencil:hover:before,.small.button.icon.hover_pencil:focus:before,.small.button.icon.hover_pencil:focus-visible:before,button.small.icon.pencil:before,.small.button.icon.pencil:before{margin-top:.1875rem}button.left.small.icon.hover_pencil:hover:before,button.left.small.icon.hover_pencil:focus:before,button.left.small.icon.hover_pencil:focus-visible:before,.left.small.button.icon.hover_pencil:hover:before,.left.small.button.icon.hover_pencil:focus:before,.left.small.button.icon.hover_pencil:focus-visible:before,button.left.small.icon.pencil:before,.left.small.button.icon.pencil:before{margin-right:.5625rem}button.right.small.icon.hover_pencil:hover:before,button.right.small.icon.hover_pencil:focus:before,button.right.small.icon.hover_pencil:focus-visible:before,.right.small.button.icon.hover_pencil:hover:before,.right.small.button.icon.hover_pencil:focus:before,.right.small.button.icon.hover_pencil:focus-visible:before,button.right.small.icon.pencil:before,.right.small.button.icon.pencil:before{margin-left:.5625rem}button.icon.hover_speech-bubble_square_thick:hover:before,button.icon.hover_speech-bubble_square_thick:focus:before,button.icon.hover_speech-bubble_square_thick:focus-visible:before,.button.icon.hover_speech-bubble_square_thick:hover:before,.button.icon.hover_speech-bubble_square_thick:focus:before,.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.icon.speech-bubble_square_thick:before,.button.icon.speech-bubble_square_thick:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/speech-bubble_square_thick.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/speech-bubble_square_thick.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_speech-bubble_square_thick:hover:before,button.large.icon.hover_speech-bubble_square_thick:focus:before,button.large.icon.hover_speech-bubble_square_thick:focus-visible:before,.large.button.icon.hover_speech-bubble_square_thick:hover:before,.large.button.icon.hover_speech-bubble_square_thick:focus:before,.large.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.large.icon.speech-bubble_square_thick:before,.large.button.icon.speech-bubble_square_thick:before{width:1.375rem}button.large.icon.hover_speech-bubble_square_thick:hover:before,button.large.icon.hover_speech-bubble_square_thick:focus:before,button.large.icon.hover_speech-bubble_square_thick:focus-visible:before,.large.button.icon.hover_speech-bubble_square_thick:hover:before,.large.button.icon.hover_speech-bubble_square_thick:focus:before,.large.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.large.icon.speech-bubble_square_thick:before,.large.button.icon.speech-bubble_square_thick:before{height:1.375rem}button.large.icon.hover_speech-bubble_square_thick:hover:before,button.large.icon.hover_speech-bubble_square_thick:focus:before,button.large.icon.hover_speech-bubble_square_thick:focus-visible:before,.large.button.icon.hover_speech-bubble_square_thick:hover:before,.large.button.icon.hover_speech-bubble_square_thick:focus:before,.large.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.large.icon.speech-bubble_square_thick:before,.large.button.icon.speech-bubble_square_thick:before{margin-top:0rem}button.left.large.icon.hover_speech-bubble_square_thick:hover:before,button.left.large.icon.hover_speech-bubble_square_thick:focus:before,button.left.large.icon.hover_speech-bubble_square_thick:focus-visible:before,.left.large.button.icon.hover_speech-bubble_square_thick:hover:before,.left.large.button.icon.hover_speech-bubble_square_thick:focus:before,.left.large.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.left.large.icon.speech-bubble_square_thick:before,.left.large.button.icon.speech-bubble_square_thick:before{margin-right:.625rem}button.right.large.icon.hover_speech-bubble_square_thick:hover:before,button.right.large.icon.hover_speech-bubble_square_thick:focus:before,button.right.large.icon.hover_speech-bubble_square_thick:focus-visible:before,.right.large.button.icon.hover_speech-bubble_square_thick:hover:before,.right.large.button.icon.hover_speech-bubble_square_thick:focus:before,.right.large.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.right.large.icon.speech-bubble_square_thick:before,.right.large.button.icon.speech-bubble_square_thick:before{margin-left:.625rem}button.icon.hover_speech-bubble_square_thick:hover:before,button.icon.hover_speech-bubble_square_thick:focus:before,button.icon.hover_speech-bubble_square_thick:focus-visible:before,.button.icon.hover_speech-bubble_square_thick:hover:before,.button.icon.hover_speech-bubble_square_thick:focus:before,.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.icon.speech-bubble_square_thick:before,.button.icon.speech-bubble_square_thick:before{width:1.125rem}button.icon.hover_speech-bubble_square_thick:hover:before,button.icon.hover_speech-bubble_square_thick:focus:before,button.icon.hover_speech-bubble_square_thick:focus-visible:before,.button.icon.hover_speech-bubble_square_thick:hover:before,.button.icon.hover_speech-bubble_square_thick:focus:before,.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.icon.speech-bubble_square_thick:before,.button.icon.speech-bubble_square_thick:before{height:1.125rem}button.icon.hover_speech-bubble_square_thick:hover:before,button.icon.hover_speech-bubble_square_thick:focus:before,button.icon.hover_speech-bubble_square_thick:focus-visible:before,.button.icon.hover_speech-bubble_square_thick:hover:before,.button.icon.hover_speech-bubble_square_thick:focus:before,.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.icon.speech-bubble_square_thick:before,.button.icon.speech-bubble_square_thick:before{margin-top:.0625rem}button.small.icon.hover_speech-bubble_square_thick:hover:before,button.small.icon.hover_speech-bubble_square_thick:focus:before,button.small.icon.hover_speech-bubble_square_thick:focus-visible:before,.small.button.icon.hover_speech-bubble_square_thick:hover:before,.small.button.icon.hover_speech-bubble_square_thick:focus:before,.small.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.small.icon.speech-bubble_square_thick:before,.small.button.icon.speech-bubble_square_thick:before{margin-top:.1875rem}button.left.small.icon.hover_speech-bubble_square_thick:hover:before,button.left.small.icon.hover_speech-bubble_square_thick:focus:before,button.left.small.icon.hover_speech-bubble_square_thick:focus-visible:before,.left.small.button.icon.hover_speech-bubble_square_thick:hover:before,.left.small.button.icon.hover_speech-bubble_square_thick:focus:before,.left.small.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.left.small.icon.speech-bubble_square_thick:before,.left.small.button.icon.speech-bubble_square_thick:before{margin-right:.625rem}button.right.small.icon.hover_speech-bubble_square_thick:hover:before,button.right.small.icon.hover_speech-bubble_square_thick:focus:before,button.right.small.icon.hover_speech-bubble_square_thick:focus-visible:before,.right.small.button.icon.hover_speech-bubble_square_thick:hover:before,.right.small.button.icon.hover_speech-bubble_square_thick:focus:before,.right.small.button.icon.hover_speech-bubble_square_thick:focus-visible:before,button.right.small.icon.speech-bubble_square_thick:before,.right.small.button.icon.speech-bubble_square_thick:before{margin-left:.625rem}button.icon.hover_star:hover:before,button.icon.hover_star:focus:before,button.icon.hover_star:focus-visible:before,.button.icon.hover_star:hover:before,.button.icon.hover_star:focus:before,.button.icon.hover_star:focus-visible:before,button.icon.star:before,.button.icon.star:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/star.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/star.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_star:hover:before,button.large.icon.hover_star:focus:before,button.large.icon.hover_star:focus-visible:before,.large.button.icon.hover_star:hover:before,.large.button.icon.hover_star:focus:before,.large.button.icon.hover_star:focus-visible:before,button.large.icon.star:before,.large.button.icon.star:before{width:1rem}button.large.icon.hover_star:hover:before,button.large.icon.hover_star:focus:before,button.large.icon.hover_star:focus-visible:before,.large.button.icon.hover_star:hover:before,.large.button.icon.hover_star:focus:before,.large.button.icon.hover_star:focus-visible:before,button.large.icon.star:before,.large.button.icon.star:before{height:1rem}button.large.icon.hover_star:hover:before,button.large.icon.hover_star:focus:before,button.large.icon.hover_star:focus-visible:before,.large.button.icon.hover_star:hover:before,.large.button.icon.hover_star:focus:before,.large.button.icon.hover_star:focus-visible:before,button.large.icon.star:before,.large.button.icon.star:before{margin-top:0rem}button.left.large.icon.hover_star:hover:before,button.left.large.icon.hover_star:focus:before,button.left.large.icon.hover_star:focus-visible:before,.left.large.button.icon.hover_star:hover:before,.left.large.button.icon.hover_star:focus:before,.left.large.button.icon.hover_star:focus-visible:before,button.left.large.icon.star:before,.left.large.button.icon.star:before{margin-right:0rem}button.right.large.icon.hover_star:hover:before,button.right.large.icon.hover_star:focus:before,button.right.large.icon.hover_star:focus-visible:before,.right.large.button.icon.hover_star:hover:before,.right.large.button.icon.hover_star:focus:before,.right.large.button.icon.hover_star:focus-visible:before,button.right.large.icon.star:before,.right.large.button.icon.star:before{margin-left:0rem}button.icon.hover_star:hover:before,button.icon.hover_star:focus:before,button.icon.hover_star:focus-visible:before,.button.icon.hover_star:hover:before,.button.icon.hover_star:focus:before,.button.icon.hover_star:focus-visible:before,button.icon.star:before,.button.icon.star:before{margin-top:0rem}button.left.icon.hover_star:hover:before,button.left.icon.hover_star:focus:before,button.left.icon.hover_star:focus-visible:before,.left.button.icon.hover_star:hover:before,.left.button.icon.hover_star:focus:before,.left.button.icon.hover_star:focus-visible:before,button.left.icon.star:before,.left.button.icon.star:before{margin-right:0rem}button.right.icon.hover_star:hover:before,button.right.icon.hover_star:focus:before,button.right.icon.hover_star:focus-visible:before,.right.button.icon.hover_star:hover:before,.right.button.icon.hover_star:focus:before,.right.button.icon.hover_star:focus-visible:before,button.right.icon.star:before,.right.button.icon.star:before{margin-left:0rem}button.small.icon.hover_star:hover:before,button.small.icon.hover_star:focus:before,button.small.icon.hover_star:focus-visible:before,.small.button.icon.hover_star:hover:before,.small.button.icon.hover_star:focus:before,.small.button.icon.hover_star:focus-visible:before,button.small.icon.star:before,.small.button.icon.star:before{width:1rem}button.small.icon.hover_star:hover:before,button.small.icon.hover_star:focus:before,button.small.icon.hover_star:focus-visible:before,.small.button.icon.hover_star:hover:before,.small.button.icon.hover_star:focus:before,.small.button.icon.hover_star:focus-visible:before,button.small.icon.star:before,.small.button.icon.star:before{height:1rem}button.small.icon.hover_star:hover:before,button.small.icon.hover_star:focus:before,button.small.icon.hover_star:focus-visible:before,.small.button.icon.hover_star:hover:before,.small.button.icon.hover_star:focus:before,.small.button.icon.hover_star:focus-visible:before,button.small.icon.star:before,.small.button.icon.star:before{margin-top:0rem}button.left.small.icon.hover_star:hover:before,button.left.small.icon.hover_star:focus:before,button.left.small.icon.hover_star:focus-visible:before,.left.small.button.icon.hover_star:hover:before,.left.small.button.icon.hover_star:focus:before,.left.small.button.icon.hover_star:focus-visible:before,button.left.small.icon.star:before,.left.small.button.icon.star:before{margin-right:0rem}button.right.small.icon.hover_star:hover:before,button.right.small.icon.hover_star:focus:before,button.right.small.icon.hover_star:focus-visible:before,.right.small.button.icon.hover_star:hover:before,.right.small.button.icon.hover_star:focus:before,.right.small.button.icon.hover_star:focus-visible:before,button.right.small.icon.star:before,.right.small.button.icon.star:before{margin-left:0rem}button.icon.hover_star_empty:hover:before,button.icon.hover_star_empty:focus:before,button.icon.hover_star_empty:focus-visible:before,.button.icon.hover_star_empty:hover:before,.button.icon.hover_star_empty:focus:before,.button.icon.hover_star_empty:focus-visible:before,button.icon.star_empty:before,.button.icon.star_empty:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/star_empty.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/star_empty.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_star_empty:hover:before,button.large.icon.hover_star_empty:focus:before,button.large.icon.hover_star_empty:focus-visible:before,.large.button.icon.hover_star_empty:hover:before,.large.button.icon.hover_star_empty:focus:before,.large.button.icon.hover_star_empty:focus-visible:before,button.large.icon.star_empty:before,.large.button.icon.star_empty:before{width:1rem}button.large.icon.hover_star_empty:hover:before,button.large.icon.hover_star_empty:focus:before,button.large.icon.hover_star_empty:focus-visible:before,.large.button.icon.hover_star_empty:hover:before,.large.button.icon.hover_star_empty:focus:before,.large.button.icon.hover_star_empty:focus-visible:before,button.large.icon.star_empty:before,.large.button.icon.star_empty:before{height:1rem}button.large.icon.hover_star_empty:hover:before,button.large.icon.hover_star_empty:focus:before,button.large.icon.hover_star_empty:focus-visible:before,.large.button.icon.hover_star_empty:hover:before,.large.button.icon.hover_star_empty:focus:before,.large.button.icon.hover_star_empty:focus-visible:before,button.large.icon.star_empty:before,.large.button.icon.star_empty:before{margin-top:0rem}button.left.large.icon.hover_star_empty:hover:before,button.left.large.icon.hover_star_empty:focus:before,button.left.large.icon.hover_star_empty:focus-visible:before,.left.large.button.icon.hover_star_empty:hover:before,.left.large.button.icon.hover_star_empty:focus:before,.left.large.button.icon.hover_star_empty:focus-visible:before,button.left.large.icon.star_empty:before,.left.large.button.icon.star_empty:before{margin-right:0rem}button.right.large.icon.hover_star_empty:hover:before,button.right.large.icon.hover_star_empty:focus:before,button.right.large.icon.hover_star_empty:focus-visible:before,.right.large.button.icon.hover_star_empty:hover:before,.right.large.button.icon.hover_star_empty:focus:before,.right.large.button.icon.hover_star_empty:focus-visible:before,button.right.large.icon.star_empty:before,.right.large.button.icon.star_empty:before{margin-left:0rem}button.icon.hover_star_empty:hover:before,button.icon.hover_star_empty:focus:before,button.icon.hover_star_empty:focus-visible:before,.button.icon.hover_star_empty:hover:before,.button.icon.hover_star_empty:focus:before,.button.icon.hover_star_empty:focus-visible:before,button.icon.star_empty:before,.button.icon.star_empty:before{margin-top:0rem}button.left.icon.hover_star_empty:hover:before,button.left.icon.hover_star_empty:focus:before,button.left.icon.hover_star_empty:focus-visible:before,.left.button.icon.hover_star_empty:hover:before,.left.button.icon.hover_star_empty:focus:before,.left.button.icon.hover_star_empty:focus-visible:before,button.left.icon.star_empty:before,.left.button.icon.star_empty:before{margin-right:0rem}button.right.icon.hover_star_empty:hover:before,button.right.icon.hover_star_empty:focus:before,button.right.icon.hover_star_empty:focus-visible:before,.right.button.icon.hover_star_empty:hover:before,.right.button.icon.hover_star_empty:focus:before,.right.button.icon.hover_star_empty:focus-visible:before,button.right.icon.star_empty:before,.right.button.icon.star_empty:before{margin-left:0rem}button.small.icon.hover_star_empty:hover:before,button.small.icon.hover_star_empty:focus:before,button.small.icon.hover_star_empty:focus-visible:before,.small.button.icon.hover_star_empty:hover:before,.small.button.icon.hover_star_empty:focus:before,.small.button.icon.hover_star_empty:focus-visible:before,button.small.icon.star_empty:before,.small.button.icon.star_empty:before{width:1rem}button.small.icon.hover_star_empty:hover:before,button.small.icon.hover_star_empty:focus:before,button.small.icon.hover_star_empty:focus-visible:before,.small.button.icon.hover_star_empty:hover:before,.small.button.icon.hover_star_empty:focus:before,.small.button.icon.hover_star_empty:focus-visible:before,button.small.icon.star_empty:before,.small.button.icon.star_empty:before{height:1rem}button.small.icon.hover_star_empty:hover:before,button.small.icon.hover_star_empty:focus:before,button.small.icon.hover_star_empty:focus-visible:before,.small.button.icon.hover_star_empty:hover:before,.small.button.icon.hover_star_empty:focus:before,.small.button.icon.hover_star_empty:focus-visible:before,button.small.icon.star_empty:before,.small.button.icon.star_empty:before{margin-top:0rem}button.left.small.icon.hover_star_empty:hover:before,button.left.small.icon.hover_star_empty:focus:before,button.left.small.icon.hover_star_empty:focus-visible:before,.left.small.button.icon.hover_star_empty:hover:before,.left.small.button.icon.hover_star_empty:focus:before,.left.small.button.icon.hover_star_empty:focus-visible:before,button.left.small.icon.star_empty:before,.left.small.button.icon.star_empty:before{margin-right:0rem}button.right.small.icon.hover_star_empty:hover:before,button.right.small.icon.hover_star_empty:focus:before,button.right.small.icon.hover_star_empty:focus-visible:before,.right.small.button.icon.hover_star_empty:hover:before,.right.small.button.icon.hover_star_empty:focus:before,.right.small.button.icon.hover_star_empty:focus-visible:before,button.right.small.icon.star_empty:before,.right.small.button.icon.star_empty:before{margin-left:0rem}button.icon.hover_tick:hover:before,button.icon.hover_tick:focus:before,button.icon.hover_tick:focus-visible:before,.button.icon.hover_tick:hover:before,.button.icon.hover_tick:focus:before,.button.icon.hover_tick:focus-visible:before,button.icon.tick:before,.button.icon.tick:before{-webkit-mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/tick.svg);mask-image:url(https://storage.googleapis.com/apolitical-assets/icons/tick.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;-webkit-mask-size:100% auto;mask-size:100% auto;display:block}button.large.icon.hover_tick:hover:before,button.large.icon.hover_tick:focus:before,button.large.icon.hover_tick:focus-visible:before,.large.button.icon.hover_tick:hover:before,.large.button.icon.hover_tick:focus:before,.large.button.icon.hover_tick:focus-visible:before,button.large.icon.tick:before,.large.button.icon.tick:before{width:.875rem}button.large.icon.hover_tick:hover:before,button.large.icon.hover_tick:focus:before,button.large.icon.hover_tick:focus-visible:before,.large.button.icon.hover_tick:hover:before,.large.button.icon.hover_tick:focus:before,.large.button.icon.hover_tick:focus-visible:before,button.large.icon.tick:before,.large.button.icon.tick:before{height:.6875rem}button.large.icon.hover_tick:hover:before,button.large.icon.hover_tick:focus:before,button.large.icon.hover_tick:focus-visible:before,.large.button.icon.hover_tick:hover:before,.large.button.icon.hover_tick:focus:before,.large.button.icon.hover_tick:focus-visible:before,button.large.icon.tick:before,.large.button.icon.tick:before{margin-top:.5rem}button.left.large.icon.hover_tick:hover:before,button.left.large.icon.hover_tick:focus:before,button.left.large.icon.hover_tick:focus-visible:before,.left.large.button.icon.hover_tick:hover:before,.left.large.button.icon.hover_tick:focus:before,.left.large.button.icon.hover_tick:focus-visible:before,button.left.large.icon.tick:before,.left.large.button.icon.tick:before{margin-right:.625rem}button.right.large.icon.hover_tick:hover:before,button.right.large.icon.hover_tick:focus:before,button.right.large.icon.hover_tick:focus-visible:before,.right.large.button.icon.hover_tick:hover:before,.right.large.button.icon.hover_tick:focus:before,.right.large.button.icon.hover_tick:focus-visible:before,button.right.large.icon.tick:before,.right.large.button.icon.tick:before{margin-left:.625rem}button.icon.hover_tick:hover:before,button.icon.hover_tick:focus:before,button.icon.hover_tick:focus-visible:before,.button.icon.hover_tick:hover:before,.button.icon.hover_tick:focus:before,.button.icon.hover_tick:focus-visible:before,button.icon.tick:before,.button.icon.tick:before{width:.75rem}button.icon.hover_tick:hover:before,button.icon.hover_tick:focus:before,button.icon.hover_tick:focus-visible:before,.button.icon.hover_tick:hover:before,.button.icon.hover_tick:focus:before,.button.icon.hover_tick:focus-visible:before,button.icon.tick:before,.button.icon.tick:before{height:.5625rem}button.icon.hover_tick:hover:before,button.icon.hover_tick:focus:before,button.icon.hover_tick:focus-visible:before,.button.icon.hover_tick:hover:before,.button.icon.hover_tick:focus:before,.button.icon.hover_tick:focus-visible:before,button.icon.tick:before,.button.icon.tick:before{margin-top:.4375rem}button.left.icon.hover_tick:hover:before,button.left.icon.hover_tick:focus:before,button.left.icon.hover_tick:focus-visible:before,.left.button.icon.hover_tick:hover:before,.left.button.icon.hover_tick:focus:before,.left.button.icon.hover_tick:focus-visible:before,button.left.icon.tick:before,.left.button.icon.tick:before{margin-right:.5rem}button.right.icon.hover_tick:hover:before,button.right.icon.hover_tick:focus:before,button.right.icon.hover_tick:focus-visible:before,.right.button.icon.hover_tick:hover:before,.right.button.icon.hover_tick:focus:before,.right.button.icon.hover_tick:focus-visible:before,button.right.icon.tick:before,.right.button.icon.tick:before{margin-left:.5rem}button.small.icon.hover_tick:hover:before,button.small.icon.hover_tick:focus:before,button.small.icon.hover_tick:focus-visible:before,.small.button.icon.hover_tick:hover:before,.small.button.icon.hover_tick:focus:before,.small.button.icon.hover_tick:focus-visible:before,button.small.icon.tick:before,.small.button.icon.tick:before{width:.5625rem}button.small.icon.hover_tick:hover:before,button.small.icon.hover_tick:focus:before,button.small.icon.hover_tick:focus-visible:before,.small.button.icon.hover_tick:hover:before,.small.button.icon.hover_tick:focus:before,.small.button.icon.hover_tick:focus-visible:before,button.small.icon.tick:before,.small.button.icon.tick:before{height:.4375rem}button.small.icon.hover_tick:hover:before,button.small.icon.hover_tick:focus:before,button.small.icon.hover_tick:focus-visible:before,.small.button.icon.hover_tick:hover:before,.small.button.icon.hover_tick:focus:before,.small.button.icon.hover_tick:focus-visible:before,button.small.icon.tick:before,.small.button.icon.tick:before{margin-top:.375rem}button.left.small.icon.hover_tick:hover:before,button.left.small.icon.hover_tick:focus:before,button.left.small.icon.hover_tick:focus-visible:before,.left.small.button.icon.hover_tick:hover:before,.left.small.button.icon.hover_tick:focus:before,.left.small.button.icon.hover_tick:focus-visible:before,button.left.small.icon.tick:before,.left.small.button.icon.tick:before{margin-right:.375rem}button.right.small.icon.hover_tick:hover:before,button.right.small.icon.hover_tick:focus:before,button.right.small.icon.hover_tick:focus-visible:before,.right.small.button.icon.hover_tick:hover:before,.right.small.button.icon.hover_tick:focus:before,.right.small.button.icon.hover_tick:focus-visible:before,button.right.small.icon.tick:before,.right.small.button.icon.tick:before{margin-left:.375rem}@media (prefers-reduced-motion: no-preference){@keyframes bounce{0%,to{transform:scale(1)}70%{transform:scale(1.1)}}button.icon.animate:focus:before,button.icon.animate:active:before,button.icon.animate.do-animation:before,.button.icon.animate:focus:before,.button.icon.animate:active:before,.button.icon.animate.do-animation:before{animation:bounce .5s 1}}button.disabled,.button.disabled{cursor:not-allowed;opacity:.3}}@layer base{hr{width:100%;height:.0625rem;background:rgb(215,224,239);margin:2.5rem auto;border:none}}@layer base{a{color:#4f43ba;text-decoration:underline;font-weight:900}a:hover,a:focus,a:active{color:#392d87}}@layer base{ol,ul{margin:0 0 1rem;padding-left:2.5rem;display:block}li{margin-bottom:1.125rem}.text-small li{margin-bottom:.75rem}.text-medium li{margin-bottom:1rem}li:last-child{margin-bottom:0}li:last-child p:last-child{margin-bottom:0}}@layer base{p,li,small{color:#151921;font-weight:500}p,li{font-size:1rem;line-height:1.5rem}.text-small p,.text-small li{font-size:.75rem;line-height:1rem;letter-spacing:.01rem}.text-medium p,.text-medium li{font-size:.875rem;line-height:1rem}@media only screen and (min-width: 769px){p,li{font-size:1.125rem;line-height:1.75rem}.text-small p,.text-small li{font-size:.875rem}.text-medium p,.text-medium li{font-size:1rem;line-height:1.25rem}}p{margin-bottom:1.25rem}.text-small p{margin-bottom:1rem}.text-medium p{margin-bottom:1.125rem}small{font-size:.75rem;line-height:1rem}@media only screen and (min-width: 769px){small{font-size:.875rem}}strong{font-weight:900}em,i{font-style:italic}sup,sub{font-size:.625rem;line-height:normal}sup{vertical-align:super}sub{vertical-align:sub}}@layer base{.pre-title,h5,h6{color:#151921;text-transform:uppercase;font-weight:700}.title,h1,h2,h3,h4{color:#151921;font-weight:900}.pre-title{margin-bottom:1.5rem;font-size:.875rem;line-height:1rem;letter-spacing:.08rem;text-transform:uppercase}@media only screen and (min-width: 769px){.pre-title{font-size:1rem;line-height:4rem}}.title{margin-bottom:1rem;font-size:2rem;line-height:2.5rem;letter-spacing:-.01rem}@media only screen and (min-width: 769px){.title{font-size:3.25rem;line-height:4rem}}h1{margin-bottom:1rem;font-size:1.75rem;line-height:2rem;letter-spacing:-.01rem}@media only screen and (min-width: 769px){h1{font-size:2.5rem;line-height:3rem}}h2{margin:2.5rem 0 1rem;font-size:1.5rem;line-height:2rem}@media only screen and (min-width: 769px){h2{font-size:1.75rem;line-height:2.5rem}}h3{margin:3.75rem 0 1.25rem;font-size:1.25rem;line-height:1.75rem}@media only screen and (min-width: 769px){h3{font-size:1.5rem;line-height:2rem}}h4{margin:2.5rem 0 1.25rem;font-size:1.125rem;line-height:1.5rem}@media only screen and (min-width: 769px){h4{font-size:1.25rem;line-height:1.75rem}}h5{margin:1rem 0;font-size:.75rem;line-height:1rem}@media only screen and (min-width: 769px){h5{font-size:.875rem}}h6{font-size:.75rem;line-height:1rem}@media only screen and (min-width: 769px){h6{font-size:.6875rem}}.subtitle{margin-bottom:1.25rem;font-size:1.25rem;color:#2a3141;font-weight:400;line-height:1.75rem}@media only screen and (min-width: 769px){.subtitle{font-size:1.5rem;line-height:2rem}}}@layer reset,base,components,overrides;
package/styles/README.md CHANGED
@@ -1,28 +1,10 @@
1
1
  # Styles
2
2
 
3
- ## `#root`
4
-
5
- NextJS is very opinionated and won't let us style general elements (e.g. `h1`) - it wants elements to be 'pure', using classes or IDs to identify them (e.g. `.specific-section h1`).
6
-
7
- To get the benefit of global base styling, where we get styling out of the box without having to explicitly add it to every element, we use the `#root` ID, on the `body`, to scope our global styling.
8
-
9
- ### Adding a selector between `#root` and an element
10
-
11
- One of the big benefits of using Sass is the `&` selector, which uses the full path to the element as the selector, letting us quickly add different states, like `:hover` and `:focus`, or show different styling inside a specific parent element.
12
-
13
- This works as expected for states, but - because we scope everything to `#root` - using `&` would result in a selector like `.new-parent #root .element` - which is not going to be a valid path.
14
-
15
- Instead, we've created a mixin, `selector-after-root`, to write the expected path.
16
-
17
- `@include selector-after-root('.element')` will translate to the path `#root .element &`.
18
-
19
- ---
20
-
21
3
  ## `@layer`
22
4
 
23
5
  We're using [CSS cascade layers (`@layer`)](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/) to organise our styles, to help us avoid specificity issues and to make it easier to find and update styles.
24
6
 
25
- The `global.css` file defines the order of our layers, with the browser reset as the lowest.
7
+ The `public/styles/index.scss` file defines the order of our layers, with the browser reset as the lowest.
26
8
 
27
9
  If you need to overwrite CSS, you don't need to create an overly specific (and less performant) rule or add an `!important` (as an aside: please, please [never add an `!important`](https://dev.to/alvaromontoro/using-important-in-css-75c)) - just put the styling in a higher layer.
28
10
 
@@ -42,7 +24,7 @@ By default, buttons are `medium`. They don't need a class to be styled. Buttons
42
24
 
43
25
  ### Icons
44
26
 
45
- Buttons can have an icon but - because we can't mix pre-processing and data passed into CSS for file names, like CSS variables or data attributes - icons on buttons need to be set up in advance with classes. The list of available icons is maintained in `base-styles/buttons/_icons.scss`. To add a new icon, add a new item to the list with arguments for the sizes on large, medium, and small buttons.
27
+ Buttons can have an icon but - because we can't mix pre-processing and data passed into CSS for file names, like CSS variables or data attributes - icons on buttons need to be set up in advance with classes. The list of available icons is maintained in `base/buttons/_icons.scss`. To add a new icon, add a new item to the list with arguments for the sizes on large, medium, and small buttons.
46
28
 
47
29
  To add an icon to a button, add the class name `icon [file name of icon without file extension]`, e.g. `icon heart_empty`.
48
30
 
@@ -0,0 +1,26 @@
1
+ @use 'sass:map';
2
+ @import './../functions',
3
+ './../mixins',
4
+ './../variables';
5
+
6
+ @layer base {
7
+ a, button, input, textarea, [role="menu"], li[tabindex] {
8
+ &:focus, &:focus-visible {
9
+ outline: none;
10
+ box-shadow: $outline map.get($theme, 'default_focus');
11
+ }
12
+ &:active { box-shadow: none; }
13
+ }
14
+
15
+ [role="menu"], [role="menu"] a, li[tabindex] {
16
+ &:focus, &:focus-visible { box-shadow: $outline map.get($theme, 'default_focus') inset; }
17
+ }
18
+
19
+ .hidden {
20
+ width: 0;
21
+ height: 0;
22
+ display: block;
23
+ overflow: hidden;
24
+ }
25
+ }
26
+
@@ -0,0 +1,29 @@
1
+ @use 'sass:map';
2
+ @import './../functions',
3
+ './../mixins',
4
+ './../variables';
5
+
6
+ $blockquote: ('margin-top': 20, 'margin-top_md': 30, 'margin-bottom': 10, 'margin-bottom_md': 20, 'padding-vertical': 4, 'padding-left': 24, 'font-size': 18, 'font-size_md': 20, 'line-height': 28, 'border-width': 6);
7
+
8
+ @layer base {
9
+ blockquote {
10
+ margin: px-to-rem(map.get($blockquote, 'margin-top')) 0 px-to-rem(map.get($blockquote, 'margin-bottom')) 0;
11
+ padding: px-to-rem(map.get($blockquote, 'padding-vertical')) 0 0 px-to-rem(map.get($blockquote, 'padding-left'));
12
+ font-size: px-to-rem(map.get($blockquote, 'font-size'));
13
+ color: map.get($theme, 'blockquote');
14
+ font-weight: 700;
15
+ font-style: italic;
16
+ line-height: px-to-rem(map.get($blockquote, 'line-height'));
17
+ border-left: px-to-rem(map.get($blockquote, 'border-width')) solid map.get($theme, 'blockquote_border');
18
+
19
+ p:last-of-type {
20
+ margin-bottom: 0;
21
+ }
22
+
23
+ @include breakpoint('min-width', 'md') {
24
+ margin-top: px-to-rem(map.get($blockquote, 'margin-top_md'));
25
+ margin-bottom: px-to-rem(map.get($blockquote, 'margin-bottom_md'));
26
+ font-size: px-to-rem(map.get($blockquote, 'font-size_md'));
27
+ }
28
+ }
29
+ }
@@ -0,0 +1,41 @@
1
+ $font-path: 'fonts/';
2
+ $font-name: 'Moderat';
3
+
4
+ @mixin font-styling($weight: 400, $style: normal) {
5
+ $font-file: 'Medium';
6
+
7
+ @if $weight == 600 {
8
+ $font-file: 'Bold';
9
+ } @else if $weight == 900 {
10
+ $font-file: 'Black';
11
+ }
12
+
13
+ @if $style == italic {
14
+ $font-file: '#{$font-file}-Italic';
15
+ }
16
+
17
+ @font-face {
18
+ font-family: #{$font-name};
19
+ src: url('#{$font-path}#{$font-name}-#{$font-file}.woff2') format('woff2');
20
+ font-display: optional;
21
+ font-weight: $weight;
22
+
23
+ @if $style == italic {
24
+ font-style: italic;
25
+ }
26
+ }
27
+ }
28
+
29
+ $font-family: (400, normal), (400, italic), (600, normal), (600, italic), (900, normal), (900, italic);
30
+
31
+
32
+ @layer base {
33
+ @each $weight, $style in $font-family {
34
+ @include font-styling($weight, $style);
35
+ }
36
+
37
+ body {
38
+ font-family: #{$font-name}, sans-serif;
39
+ }
40
+
41
+ }
@@ -0,0 +1,15 @@
1
+ @use 'sass:map';
2
+ @import './../functions',
3
+ './../variables';
4
+
5
+ $hr: ('height': 1, 'margin-vertical': 40);
6
+
7
+ @layer base {
8
+ hr {
9
+ width: 100%;
10
+ height: px-to-rem(map.get($hr, 'height'));
11
+ background: map.get($theme, 'divider');
12
+ margin: px-to-rem(map.get($hr, 'margin-vertical')) auto;
13
+ border: none;
14
+ }
15
+ }
@@ -1,4 +1,6 @@
1
- @import 'accessibility',
1
+ @import 'fonts',
2
+
3
+ 'accessibility',
2
4
  'blockquotes',
3
5
  'buttons',
4
6
  'hr',
@@ -0,0 +1,16 @@
1
+ @use 'sass:map';
2
+ @import './../variables';
3
+
4
+ @layer base {
5
+ a {
6
+ color: map.get($theme, 'link');
7
+ text-decoration: underline;
8
+ font-weight: 900;
9
+
10
+ &:hover,
11
+ &:focus,
12
+ &:active {
13
+ color: map.get($theme, 'link_hover');
14
+ }
15
+ }
16
+ }
@@ -0,0 +1,27 @@
1
+ @use 'sass:map';
2
+ @import './../functions';
3
+
4
+ $ul: ('margin-bottom': 16, 'padding-left': 40);
5
+ $li: ('margin-bottom': 18, 'margin-bottom_sm': 12, 'margin-bottom_md': 16);
6
+
7
+ @layer base {
8
+ ol, ul {
9
+ margin: 0 0 px-to-rem(map.get($ul, 'margin-bottom')) 0;
10
+ padding-left: px-to-rem(map.get($ul, 'padding-left'));
11
+ display: block;
12
+ }
13
+
14
+ li {
15
+ margin-bottom: px-to-rem(map.get($li, 'margin-bottom'));
16
+
17
+ .text-small & { margin-bottom: px-to-rem(map.get($li, 'margin-bottom_sm')); }
18
+
19
+ .text-medium & { margin-bottom: px-to-rem(map.get($li, 'margin-bottom_md')); }
20
+
21
+ &:last-child {
22
+ margin-bottom: 0;
23
+
24
+ p:last-child { margin-bottom: 0; }
25
+ }
26
+ }
27
+ }
@@ -0,0 +1,80 @@
1
+ @use 'sass:map';
2
+ @import './../functions',
3
+ './../mixins',
4
+ './../variables';
5
+
6
+ $default: ('font-size': 16, 'font-size_md': 18, 'line-height': 24, 'line-height_md': 28, 'margin-bottom': 20); // The default size is the 'large paragraph' in Figma
7
+ $small: ('font-size': 12, 'font-size_md': 14, 'letter-spacing': 0.16, 'line-height': 16, 'margin-bottom': 16);
8
+ $medium: ('font-size': 14, 'font-size_md': 16, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 18);
9
+ $sup: ('font-size': 10);
10
+
11
+ @layer base {
12
+ p, li, small {
13
+ color: map.get($theme, 'text');
14
+ font-weight: 500;
15
+ }
16
+
17
+ p, li {
18
+ font-size: px-to-rem(map.get($default, 'font-size'));
19
+ line-height: px-to-rem(map.get($default, 'line-height'));
20
+
21
+ .text-small & {
22
+ font-size: px-to-rem(map.get($small, 'font-size'));
23
+ line-height: px-to-rem(map.get($small, 'line-height'));
24
+ letter-spacing: px-to-rem(map.get($small, 'letter-spacing'));
25
+ }
26
+
27
+ .text-medium & {
28
+ font-size: px-to-rem(map.get($medium, 'font-size'));
29
+ line-height: px-to-rem(map.get($medium, 'line-height'));
30
+ }
31
+
32
+ @include breakpoint('min-width', 'md') {
33
+ font-size: px-to-rem(map.get($default, 'font-size_md'));
34
+ line-height: px-to-rem(map.get($default, 'line-height_md'));
35
+
36
+ .text-small & {
37
+ font-size: px-to-rem(map.get($small, 'font-size_md'));
38
+ }
39
+
40
+ .text-medium & {
41
+ font-size: px-to-rem(map.get($medium, 'font-size_md'));
42
+ line-height: px-to-rem(map.get($medium, 'line-height_md'));
43
+ }
44
+ }
45
+ }
46
+
47
+ p {
48
+ margin-bottom: px-to-rem(map.get($default, 'margin-bottom'));
49
+
50
+ .text-small & { margin-bottom: px-to-rem(map.get($small, 'margin-bottom')); }
51
+
52
+ .text-medium & { margin-bottom: px-to-rem(map.get($medium, 'margin-bottom')); }
53
+ }
54
+
55
+ small {
56
+ font-size: px-to-rem(map.get($small, 'font-size'));
57
+ line-height: px-to-rem(map.get($small, 'line-height'));
58
+
59
+ @include breakpoint('min-width', 'md') {
60
+ font-size: px-to-rem(map.get($small, 'font-size_md'));
61
+ }
62
+ }
63
+
64
+ strong { font-weight: 900; }
65
+ em, i { font-style: italic; }
66
+
67
+ sup, sub {
68
+ font-size: px-to-rem(map.get($sup, 'font-size'));
69
+ line-height: normal;
70
+ }
71
+
72
+ sup {
73
+ vertical-align: super;
74
+ }
75
+
76
+ sub {
77
+ vertical-align: sub;
78
+ }
79
+
80
+ }