UNPKG

@polight/lego

Version:

Tiny Web Components lib for future-proof HTML mentors

github.com/Polight/lego

Polight/lego

61 lines • 214 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
{ "version": 3, "file": "just-the-docs-dark.css", "sources": [ "just-the-docs-dark.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/support/support.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/support/_variables.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/support/_functions.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/support/mixins/mixins.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/support/mixins/_layout.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/support/mixins/_buttons.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/support/mixins/_typography.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/custom/setup.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/color_schemes/light.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/color_schemes/dark.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/vendor/OneDarkJekyll/syntax-one-dark-vivid.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/modules.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/vendor/normalize.scss/normalize.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/base.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/layout.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/content.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/navigation.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/typography.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/labels.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/buttons.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/search.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/tables.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/code.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/utilities/utilities.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/utilities/_colors.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/utilities/_layout.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/utilities/_typography.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/utilities/_lists.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/utilities/_spacing.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/print.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/skiptomain.scss", "../../../.rvm/gems/ruby-3.1.2/gems/just-the-docs-0.4.1/_sass/custom/custom.scss" ], "sourcesContent": [ "\n@import \"./support/support\";\n@import \"./custom/setup\";\n@import \"./color_schemes/light\";\n@import \"./color_schemes/dark\";\n@import \"./modules\";\ndiv.opaque {\n background-color: $body-background-color;\n}\n@import \"./custom/custom\";\n\n\n", "@import \"./variables\";\n@import \"./functions\";\n@import \"./mixins/mixins\";\n", "// Typography\n\n$body-font-family: system-ui, -apple-system, blinkmacsystemfont, \"Segoe UI\",\n roboto, \"Helvetica Neue\", arial, sans-serif !default;\n$mono-font-family: \"SFMono-Regular\", menlo, consolas, monospace !default;\n$root-font-size: 16px !default; // Base font-size for rems\n$body-line-height: 1.4 !default;\n$content-line-height: 1.6 !default;\n$body-heading-line-height: 1.25 !default;\n\n// Font size\n// `-sm` suffix is the size at the small (and above) media query\n\n$font-size-1: 9px !default;\n$font-size-1-sm: 10px !default;\n$font-size-2: 11px !default; // h4 - uppercased!, h6 not uppercased, text-small\n$font-size-3: 12px !default; // h5\n$font-size-4: 14px !default;\n$font-size-5: 16px !default; // h3\n$font-size-6: 18px !default; // h2\n$font-size-7: 24px !default;\n$font-size-8: 32px !default; // h1\n$font-size-9: 36px !default;\n$font-size-10: 42px !default;\n$font-size-10-sm: 48px !default;\n\n// Colors\n\n$white: #fff !default;\n$grey-dk-000: #959396 !default;\n$grey-dk-100: #5c5962 !default;\n$grey-dk-200: #44434d !default;\n$grey-dk-250: #302d36 !default;\n$grey-dk-300: #27262b !default;\n$grey-lt-000: #f5f6fa !default;\n$grey-lt-100: #eeebee !default;\n$grey-lt-200: #ecebed !default;\n$grey-lt-300: #e6e1e8 !default;\n$purple-000: #7253ed !default;\n$purple-100: #5e41d0 !default;\n$purple-200: #4e26af !default;\n$purple-300: #381885 !default;\n$blue-000: #2c84fa !default;\n$blue-100: #2869e6 !default;\n$blue-200: #264caf !default;\n$blue-300: #183385 !default;\n$green-000: #41d693 !default;\n$green-100: #11b584 !default;\n$green-200: #009c7b !default;\n$green-300: #026e57 !default;\n$yellow-000: #ffeb82 !default;\n$yellow-100: #fadf50 !default;\n$yellow-200: #f7d12e !default;\n$yellow-300: #e7af06 !default;\n$red-000: #f77e7e !default;\n$red-100: #f96e65 !default;\n$red-200: #e94c4c !default;\n$red-300: #dd2e2e !default;\n$body-background-color: $white !default;\n$sidebar-color: $grey-lt-000 !default;\n$search-background-color: $white !default;\n$table-background-color: $white !default;\n$code-background-color: $grey-lt-000 !default;\n$feedback-color: darken($sidebar-color, 3%) !default;\n$body-text-color: $grey-dk-100 !default;\n$body-heading-color: $grey-dk-300 !default;\n$search-result-preview-color: $grey-dk-000 !default;\n$nav-child-link-color: $grey-dk-100 !default;\n$link-color: $purple-000 !default;\n$btn-primary-color: $purple-100 !default;\n$base-button-color: #f7f7f7 !default;\n\n// Spacing\n\n$spacing-unit: 1rem; // 1rem == 16px\n\n$spacers: (\n sp-0: 0,\n sp-1: $spacing-unit * 0.25,\n sp-2: $spacing-unit * 0.5,\n sp-3: $spacing-unit * 0.75,\n sp-4: $spacing-unit,\n sp-5: $spacing-unit * 1.5,\n sp-6: $spacing-unit * 2,\n sp-7: $spacing-unit * 2.5,\n sp-8: $spacing-unit * 3,\n sp-9: $spacing-unit * 3.5,\n sp-10: $spacing-unit * 4,\n) !default;\n$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px\n$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px\n$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px\n$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px\n$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px\n$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px\n$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px\n$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px\n$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px\n$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px\n\n// Borders\n\n$border: 1px solid !default;\n$border-radius: 4px !default;\n$border-color: $grey-lt-100 !default;\n\n// Grid system\n\n$gutter-spacing: $sp-6 !default;\n$gutter-spacing-sm: $sp-4 !default;\n$nav-width: 264px !default;\n$nav-width-md: 248px !default;\n$nav-list-item-height: $sp-6 !default;\n$nav-list-item-height-sm: $sp-8 !default;\n$nav-list-expander-right: true;\n$content-width: 800px !default;\n$header-height: 60px !default;\n$search-results-width: $content-width - $nav-width !default;\n$transition-duration: 400ms;\n\n// Media queries in pixels\n\n$media-queries: (\n xs: 320px,\n sm: 500px,\n md: $content-width,\n lg: $content-width + $nav-width,\n xl: 1400px,\n) !default;\n", "@function rem($size, $unit: \"\") {\n $rem-size: $size / $root-font-size;\n\n @if $unit == false {\n @return #{$rem-size};\n } @else {\n @return #{$rem-size}rem;\n }\n}\n", "@import \"./layout\";\n@import \"./buttons\";\n@import \"./typography\";\n", "// Media query\n\n// Media query mixin\n// Usage:\n// @include mq(md) {\n// ..medium and up styles\n// }\n@mixin mq($name) {\n // Retrieves the value from the key\n $value: map-get($media-queries, $name);\n\n // If the key exists in the map\n @if $value {\n // Prints a media query based on the value\n @media (min-width: rem($value)) {\n @content;\n }\n } @else {\n @warn \"No value could be retrieved from `#{$media-query}`. \"\n + \"Please make sure it is defined in `$media-queries` map.\";\n }\n}\n\n// Responsive container\n\n@mixin container {\n padding-right: $gutter-spacing-sm;\n padding-left: $gutter-spacing-sm;\n\n @include mq(md) {\n padding-right: $gutter-spacing;\n padding-left: $gutter-spacing;\n }\n}\n", "// Colored button\n\n@mixin btn-color($fg, $bg) {\n color: $fg;\n background-color: darken($bg, 2%);\n background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);\n\n &:hover,\n &.zeroclipboard-is-hover {\n color: $fg;\n background-color: darken($bg, 4%);\n background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));\n }\n\n &:active,\n &.selected,\n &.zeroclipboard-is-active {\n background-color: darken($bg, 5%);\n background-image: none;\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);\n }\n\n &.selected:hover {\n background-color: darken($bg, 10%);\n }\n}\n", "@mixin fs-1 {\n font-size: $font-size-1 !important;\n\n @include mq(sm) {\n font-size: $font-size-1-sm !important;\n }\n}\n\n@mixin fs-2 {\n font-size: $font-size-2 !important;\n\n @include mq(sm) {\n font-size: $font-size-3 !important;\n }\n}\n\n@mixin fs-3 {\n font-size: $font-size-3 !important;\n\n @include mq(sm) {\n font-size: $font-size-4 !important;\n }\n}\n\n@mixin fs-4 {\n font-size: $font-size-4 !important;\n\n @include mq(sm) {\n font-size: $font-size-5 !important;\n }\n}\n\n@mixin fs-5 {\n font-size: $font-size-5 !important;\n\n @include mq(sm) {\n font-size: $font-size-6 !important;\n }\n}\n\n@mixin fs-6 {\n font-size: $font-size-6 !important;\n\n @include mq(sm) {\n font-size: $font-size-7 !important;\n line-height: $body-heading-line-height;\n }\n}\n\n@mixin fs-7 {\n font-size: $font-size-7 !important;\n line-height: $body-heading-line-height;\n\n @include mq(sm) {\n font-size: $font-size-8 !important;\n }\n}\n\n@mixin fs-8 {\n font-size: $font-size-8 !important;\n line-height: $body-heading-line-height;\n\n @include mq(sm) {\n font-size: $font-size-9 !important;\n }\n}\n\n@mixin fs-9 {\n font-size: $font-size-9 !important;\n line-height: $body-heading-line-height;\n\n @include mq(sm) {\n font-size: $font-size-10 !important;\n }\n}\n\n@mixin fs-10 {\n font-size: $font-size-10 !important;\n line-height: $body-heading-line-height;\n\n @include mq(sm) {\n font-size: $font-size-10-sm !important;\n }\n}\n", "// custom setup code goes here\n", "// Moved from _sass/code.scss\n\n.highlight .c {\n color: #586e75;\n} // comment //\n.highlight .err {\n color: #93a1a1;\n} // error //\n.highlight .g {\n color: #93a1a1;\n} // generic //\n.highlight .k {\n color: #859900;\n} // keyword //\n.highlight .l {\n color: #93a1a1;\n} // literal //\n.highlight .n {\n color: #93a1a1;\n} // name //\n.highlight .o {\n color: #859900;\n} // operator //\n.highlight .x {\n color: #cb4b16;\n} // other //\n.highlight .p {\n color: #93a1a1;\n} // punctuation //\n.highlight .cm {\n color: #586e75;\n} // comment.multiline //\n.highlight .cp {\n color: #859900;\n} // comment.preproc //\n.highlight .c1 {\n color: #586e75;\n} // comment.single //\n.highlight .cs {\n color: #859900;\n} // comment.special //\n.highlight .gd {\n color: #2aa198;\n} // generic.deleted //\n.highlight .ge {\n font-style: italic;\n color: #93a1a1;\n} // generic.emph //\n.highlight .gr {\n color: #dc322f;\n} // generic.error //\n.highlight .gh {\n color: #cb4b16;\n} // generic.heading //\n.highlight .gi {\n color: #859900;\n} // generic.inserted //\n.highlight .go {\n color: #93a1a1;\n} // generic.output //\n.highlight .gp {\n color: #93a1a1;\n} // generic.prompt //\n.highlight .gs {\n font-weight: bold;\n color: #93a1a1;\n} // generic.strong //\n.highlight .gu {\n color: #cb4b16;\n} // generic.subheading //\n.highlight .gt {\n color: #93a1a1;\n} // generic.traceback //\n.highlight .kc {\n color: #cb4b16;\n} // keyword.constant //\n.highlight .kd {\n color: #268bd2;\n} // keyword.declaration //\n.highlight .kn {\n color: #859900;\n} // keyword.namespace //\n.highlight .kp {\n color: #859900;\n} // keyword.pseudo //\n.highlight .kr {\n color: #268bd2;\n} // keyword.reserved //\n.highlight .kt {\n color: #dc322f;\n} // keyword.type //\n.highlight .ld {\n color: #93a1a1;\n} // literal.date //\n.highlight .m {\n color: #2aa198;\n} // literal.number //\n.highlight .s {\n color: #2aa198;\n} // literal.string //\n.highlight .na {\n color: #555;\n} // name.attribute //\n.highlight .nb {\n color: #b58900;\n} // name.builtin //\n.highlight .nc {\n color: #268bd2;\n} // name.class //\n.highlight .no {\n color: #cb4b16;\n} // name.constant //\n.highlight .nd {\n color: #268bd2;\n} // name.decorator //\n.highlight .ni {\n color: #cb4b16;\n} // name.entity //\n.highlight .ne {\n color: #cb4b16;\n} // name.exception //\n.highlight .nf {\n color: #268bd2;\n} // name.function //\n.highlight .nl {\n color: #555;\n} // name.label //\n.highlight .nn {\n color: #93a1a1;\n} // name.namespace //\n.highlight .nx {\n color: #555;\n} // name.other //\n.highlight .py {\n color: #93a1a1;\n} // name.property //\n.highlight .nt {\n color: #268bd2;\n} // name.tag //\n.highlight .nv {\n color: #268bd2;\n} // name.variable //\n.highlight .ow {\n color: #859900;\n} // operator.word //\n.highlight .w {\n color: #93a1a1;\n} // text.whitespace //\n.highlight .mf {\n color: #2aa198;\n} // literal.number.float //\n.highlight .mh {\n color: #2aa198;\n} // literal.number.hex //\n.highlight .mi {\n color: #2aa198;\n} // literal.number.integer //\n.highlight .mo {\n color: #2aa198;\n} // literal.number.oct //\n.highlight .sb {\n color: #586e75;\n} // literal.string.backtick //\n.highlight .sc {\n color: #2aa198;\n} // literal.string.char //\n.highlight .sd {\n color: #93a1a1;\n} // literal.string.doc //\n.highlight .s2 {\n color: #2aa198;\n} // literal.string.double //\n.highlight .se {\n color: #cb4b16;\n} // literal.string.escape //\n.highlight .sh {\n color: #93a1a1;\n} // literal.string.heredoc //\n.highlight .si {\n color: #2aa198;\n} // literal.string.interpol //\n.highlight .sx {\n color: #2aa198;\n} // literal.string.other //\n.highlight .sr {\n color: #dc322f;\n} // literal.string.regex //\n.highlight .s1 {\n color: #2aa198;\n} // literal.string.single //\n.highlight .ss {\n color: #2aa198;\n} // literal.string.symbol //\n.highlight .bp {\n color: #268bd2;\n} // name.builtin.pseudo //\n.highlight .vc {\n color: #268bd2;\n} // name.variable.class //\n.highlight .vg {\n color: #268bd2;\n} // name.variable.global //\n.highlight .vi {\n color: #268bd2;\n} // name.variable.instance //\n.highlight .il {\n color: #2aa198;\n} // literal.number.integer.long //\n", "$body-background-color: $grey-dk-300;\n$sidebar-color: $grey-dk-300;\n$border-color: $grey-dk-200;\n$body-text-color: $grey-lt-300;\n$body-heading-color: $grey-lt-000;\n$nav-child-link-color: $grey-dk-000;\n$search-result-preview-color: $grey-dk-000;\n$link-color: $blue-000;\n$btn-primary-color: $blue-200;\n$base-button-color: $grey-dk-250;\n$search-background-color: $grey-dk-250;\n$table-background-color: $grey-dk-250;\n$feedback-color: darken($sidebar-color, 3%);\n\n// The following highlight theme is more legible than that used for the light color scheme\n\n// @import \"./vendor/OneDarkJekyll/syntax-one-dark\";\n// $code-background-color: #282c34; // OneDarkJekyll default for syntax-one-dark\n// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-one-dark\n\n@import \"./vendor/OneDarkJekyll/syntax-one-dark-vivid\";\n\n$code-background-color: #31343f; // OneDarkJekyll default for syntax-one-dark-vivid\n$code-linenumber-color: #dee2f7; // OneDarkJekyll .nf for syntax-one-dark-vivid\n\n// @import \"./vendor/OneDarkJekyll/syntax-firewatch\";\n// $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch\n// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch\n\n// @import \"./vendor/OneDarkJekyll/syntax-firewatch-green\";\n// $code-background-color: #282c34; // OneDarkJekyll default for syntax-firewatch-green\n// $code-linenumber-color: #abb2bf; // OneDarkJekyll .nf for syntax-firewatch-green\n", ".highlight,\npre.highlight {\n background: #31343f;\n color: #dee2f7;\n}\n.highlight pre {\n background: #31343f;\n}\n.highlight .hll {\n background: #31343f;\n}\n.highlight .c {\n color: #63677e;\n font-style: italic;\n}\n.highlight .err {\n color: #960050;\n background-color: #1e0010;\n}\n.highlight .k {\n color: #e19ef5;\n}\n.highlight .l {\n color: #a3eea0;\n}\n.highlight .n {\n color: #dee2f7;\n}\n.highlight .o {\n color: #dee2f7;\n}\n.highlight .p {\n color: #dee2f7;\n}\n.highlight .cm {\n color: #63677e;\n font-style: italic;\n}\n.highlight .cp {\n color: #63677e;\n font-style: italic;\n}\n.highlight .c1 {\n color: #63677e;\n font-style: italic;\n}\n.highlight .cs {\n color: #63677e;\n font-style: italic;\n}\n.highlight .ge {\n font-style: italic;\n}\n.highlight .gs {\n font-weight: 700;\n}\n.highlight .kc {\n color: #e19ef5;\n}\n.highlight .kd {\n color: #e19ef5;\n}\n.highlight .kn {\n color: #e19ef5;\n}\n.highlight .kp {\n color: #e19ef5;\n}\n.highlight .kr {\n color: #e19ef5;\n}\n.highlight .kt {\n color: #e19ef5;\n}\n.highlight .ld {\n color: #a3eea0;\n}\n.highlight .m {\n color: #eddc96;\n}\n.highlight .s {\n color: #a3eea0;\n}\n.highlight .na {\n color: #eddc96;\n}\n.highlight .nb {\n color: #fdce68;\n}\n.highlight .nc {\n color: #fdce68;\n}\n.highlight .no {\n color: #fdce68;\n}\n.highlight .nd {\n color: #fdce68;\n}\n.highlight .ni {\n color: #fdce68;\n}\n.highlight .ne {\n color: #fdce68;\n}\n.highlight .nf {\n color: #dee2f7;\n}\n.highlight .nl {\n color: #fdce68;\n}\n.highlight .nn {\n color: #dee2f7;\n}\n.highlight .nx {\n color: #dee2f7;\n}\n.highlight .py {\n color: #fdce68;\n}\n.highlight .nt {\n color: #f9867b;\n}\n.highlight .nv {\n color: #fdce68;\n}\n.highlight .ow {\n font-weight: 700;\n}\n.highlight .w {\n color: #f8f8f2;\n}\n.highlight .mf {\n color: #eddc96;\n}\n.highlight .mh {\n color: #eddc96;\n}\n.highlight .mi {\n color: #eddc96;\n}\n.highlight .mo {\n color: #eddc96;\n}\n.highlight .sb {\n color: #a3eea0;\n}\n.highlight .sc {\n color: #a3eea0;\n}\n.highlight .sd {\n color: #a3eea0;\n}\n.highlight .s2 {\n color: #a3eea0;\n}\n.highlight .se {\n color: #a3eea0;\n}\n.highlight .sh {\n color: #a3eea0;\n}\n.highlight .si {\n color: #a3eea0;\n}\n.highlight .sx {\n color: #a3eea0;\n}\n.highlight .sr {\n color: #7be2f9;\n}\n.highlight .s1 {\n color: #a3eea0;\n}\n.highlight .ss {\n color: #7be2f9;\n}\n.highlight .bp {\n color: #fdce68;\n}\n.highlight .vc {\n color: #fdce68;\n}\n.highlight .vg {\n color: #fdce68;\n}\n.highlight .vi {\n color: #f9867b;\n}\n.highlight .il {\n color: #eddc96;\n}\n.highlight .gu {\n color: #75715e;\n}\n.highlight .gd {\n color: #f92672;\n}\n.highlight .gi {\n color: #a6e22e;\n}\n", "// Import external dependencies\n@import \"./vendor/normalize.scss/normalize\";\n\n// Modules\n@import \"./base\";\n@import \"./layout\";\n@import \"./content\";\n@import \"./navigation\";\n@import \"./typography\";\n@import \"./labels\";\n@import \"./buttons\";\n@import \"./search\";\n@import \"./tables\";\n@import \"./code\";\n@import \"./utilities/utilities\";\n@import \"./print\";\n@import \"./skiptomain\";\n", "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers.\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Render the `main` element consistently in IE.\n */\n\nmain {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * Remove the gray background on active links in IE 10.\n */\n\na {\n background-color: transparent;\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Remove the border on images inside links in IE 10.\n */\n\nimg {\n border-style: none;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n vertical-align: baseline;\n}\n\n/**\n * Remove the default vertical scrollbar in IE 10+.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in Edge, IE 10+, and Firefox.\n */\n\ndetails {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Misc\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10+.\n */\n\ntemplate {\n display: none;\n}\n\n/**\n * Add the correct display in IE 10.\n */\n\n[hidden] {\n display: none;\n}\n", "// Base element style overrides\n// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id\n\n* {\n box-sizing: border-box;\n}\n\n::selection {\n color: $white;\n background: $link-color;\n}\n\nhtml {\n @include fs-4;\n\n scroll-behavior: smooth;\n}\n\nbody {\n font-family: $body-font-family;\n font-size: inherit;\n line-height: $body-line-height;\n color: $body-text-color;\n background-color: $body-background-color;\n overflow-wrap: break-word;\n}\n\nol,\nul,\ndl,\npre,\naddress,\nblockquote,\ntable,\ndiv,\nhr,\nform,\nfieldset,\nnoscript .table-wrapper {\n margin-top: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\n#toctitle {\n margin-top: 0;\n margin-bottom: 1em;\n font-weight: 500;\n line-height: $body-heading-line-height;\n color: $body-heading-color;\n}\n\np {\n margin-top: 1em;\n margin-bottom: 1em;\n}\n\na {\n color: $link-color;\n text-decoration: none;\n}\n\na:not([class]) {\n text-decoration: underline;\n text-decoration-color: $border-color;\n text-underline-offset: 2px;\n\n &:hover {\n text-decoration-color: rgba($link-color, 0.45);\n }\n}\n\ncode {\n font-family: $mono-font-family;\n font-size: 0.75em;\n line-height: $body-line-height;\n}\n\nfigure,\npre {\n margin: 0;\n}\n\nli {\n margin: 0.25em 0;\n}\n\nimg {\n max-width: 100%;\n height: auto;\n}\n\nhr {\n height: 1px;\n padding: 0;\n margin: $sp-6 0;\n background-color: $border-color;\n border: 0;\n}\n\n// adds a GitHub-style sidebar to blockquotes\nblockquote {\n margin: 10px 0;\n\n // resets user-agent stylesheets for blockquotes\n margin-block-start: 0;\n margin-inline-start: 0;\n padding-left: 15px;\n border-left: 3px solid $border-color;\n}\n", "// The basic two column layout\n\n.side-bar {\n z-index: 0;\n display: flex;\n flex-wrap: wrap;\n background-color: $sidebar-color;\n\n @include mq(md) {\n flex-flow: column nowrap;\n position: fixed;\n width: $nav-width-md;\n height: 100%;\n border-right: $border $border-color;\n align-items: flex-end;\n }\n\n @include mq(lg) {\n width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});\n min-width: $nav-width;\n }\n}\n\n.main {\n @include mq(md) {\n position: relative;\n max-width: $content-width;\n margin-left: $nav-width-md;\n }\n\n @include mq(lg) {\n // stylelint-disable function-name-case\n // disable for Max(), we want to use the CSS max() function\n margin-left: Max(\n #{$nav-width},\n calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width})\n );\n // stylelint-enable function-name-case\n }\n}\n\n.main-content-wrap {\n @include container;\n\n padding-top: $gutter-spacing-sm;\n padding-bottom: $gutter-spacing-sm;\n\n @include mq(md) {\n padding-top: $gutter-spacing;\n padding-bottom: $gutter-spacing;\n }\n}\n\n.main-header {\n z-index: 0;\n display: none;\n background-color: $sidebar-color;\n\n @include mq(md) {\n display: flex;\n justify-content: space-between;\n height: $header-height;\n background-color: $body-background-color;\n border-bottom: $border $border-color;\n }\n\n &.nav-open {\n display: block;\n\n @include mq(md) {\n display: flex;\n }\n }\n}\n\n.site-nav,\n.site-header,\n.site-footer {\n width: 100%;\n\n @include mq(lg) {\n width: $nav-width;\n }\n}\n\n.site-nav {\n display: none;\n\n &.nav-open {\n display: block;\n }\n\n @include mq(md) {\n display: block;\n padding-top: $sp-8;\n padding-bottom: $gutter-spacing-sm;\n overflow-y: auto;\n flex: 1 1 auto;\n }\n}\n\n.site-header {\n display: flex;\n min-height: $header-height;\n align-items: center;\n\n @include mq(md) {\n height: $header-height;\n max-height: $header-height;\n border-bottom: $border $border-color;\n }\n}\n\n.site-title {\n @include container;\n\n flex-grow: 1;\n display: flex;\n height: 100%;\n align-items: center;\n padding-top: $sp-3;\n padding-bottom: $sp-3;\n color: $body-heading-color;\n @include fs-6;\n\n @include mq(md) {\n padding-top: $sp-2;\n padding-bottom: $sp-2;\n }\n}\n\n@if variable-exists(logo) {\n .site-logo {\n width: 100%;\n height: 100%;\n background-image: url($logo);\n background-repeat: no-repeat;\n background-position: left center;\n background-size: contain;\n }\n}\n\n.site-button {\n display: flex;\n height: 100%;\n padding: $gutter-spacing-sm;\n align-items: center;\n}\n\n@include mq(md) {\n .site-header .site-button {\n display: none;\n }\n}\n\n.site-title:hover {\n background-image: linear-gradient(\n -90deg,\n rgba($feedback-color, 1) 0%,\n rgba($feedback-color, 0.8) 80%,\n rgba($feedback-color, 0) 100%\n );\n}\n\n.site-button:hover {\n background-image: linear-gradient(\n -90deg,\n rgba($feedback-color, 1) 0%,\n rgba($feedback-color, 0.8) 100%\n );\n}\n\n// stylelint-disable selector-max-type\n\nbody {\n position: relative;\n padding-bottom: $sp-10;\n overflow-y: scroll;\n\n @include mq(md) {\n position: static;\n padding-bottom: 0;\n }\n}\n\n// stylelint-enable selector-max-type\n\n.site-footer {\n @include container;\n\n position: absolute;\n bottom: 0;\n left: 0;\n padding-top: $sp-4;\n padding-bottom: $sp-4;\n color: $grey-dk-000;\n @include fs-2;\n\n @include mq(md) {\n position: static;\n justify-self: end;\n }\n}\n\n.icon {\n width: $sp-5;\n height: $sp-5;\n color: $link-color;\n}\n", "@charset \"UTF-8\";\n\n// Styles for rendered markdown in the .main-content container\n// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity, selector-max-id\n\n.main-content {\n line-height: $content-line-height;\n\n ol,\n ul,\n dl,\n pre,\n address,\n blockquote,\n .table-wrapper {\n margin-top: 0.5em;\n }\n\n a {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n ul,\n ol {\n padding-left: 1.5em;\n }\n\n li {\n .highlight {\n margin-top: $sp-1;\n }\n }\n\n ol {\n list-style-type: none;\n counter-reset: step-counter;\n\n > li {\n position: relative;\n\n &::before {\n position: absolute;\n top: 0.2em;\n left: -1.6em;\n color: $grey-dk-000;\n content: counter(step-counter);\n counter-increment: step-counter;\n @include fs-3;\n\n @include mq(sm) {\n top: 0.11em;\n }\n }\n\n ol {\n counter-reset: sub-counter;\n\n > li {\n &::before {\n content: counter(sub-counter, lower-alpha);\n counter-increment: sub-counter;\n }\n }\n }\n }\n }\n\n ul {\n list-style: none;\n\n > li {\n &::before {\n position: absolute;\n margin-left: -1.4em;\n color: $grey-dk-000;\n content: \"•\";\n }\n }\n }\n\n .task-list-item {\n &::before {\n content: \"\";\n }\n }\n\n .task-list-item-checkbox {\n margin-right: 0.6em;\n margin-left: -1.4em;\n\n // The same margin-left is used above for ul > li::before\n }\n\n hr + * {\n margin-top: 0;\n }\n\n h1:first-of-type {\n margin-top: 0.5em;\n }\n\n dl {\n display: grid;\n grid-template: auto / 10em 1fr;\n }\n\n dt,\n dd {\n margin: 0.25em 0;\n }\n\n dt {\n grid-column: 1;\n font-weight: 500;\n text-align: right;\n\n &::after {\n content: \":\";\n }\n }\n\n dd {\n grid-column: 2;\n margin-bottom: 0;\n margin-left: 1em;\n\n blockquote,\n div,\n dl,\n dt,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n li,\n ol,\n p,\n pre,\n table,\n ul,\n .table-wrapper {\n &:first-child {\n margin-top: 0;\n }\n }\n }\n\n dd,\n ol,\n ul {\n dl:first-child {\n dt:first-child,\n dd:nth-child(2) {\n margin-top: 0;\n }\n }\n }\n\n .anchor-heading {\n position: absolute;\n right: -$sp-4;\n width: $sp-5;\n height: 100%;\n padding-right: $sp-1;\n padding-left: $sp-1;\n overflow: visible;\n\n @include mq(md) {\n right: auto;\n left: -$sp-5;\n }\n\n svg {\n display: inline-block;\n width: 100%;\n height: 100%;\n color: $link-color;\n visibility: hidden;\n }\n }\n\n .anchor-heading:hover,\n .anchor-heading:focus,\n h1:hover > .anchor-heading,\n h2:hover > .anchor-heading,\n h3:hover > .anchor-heading,\n h4:hover > .anchor-heading,\n h5:hover > .anchor-heading,\n h6:hover > .anchor-heading {\n svg {\n visibility: visible;\n }\n }\n\n summary {\n cursor: pointer;\n }\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n #toctitle {\n position: relative;\n margin-top: 1.5em;\n margin-bottom: 0.25em;\n\n + table,\n + .table-wrapper,\n + .code-example,\n + .highlighter-rouge,\n + .sectionbody .listingblock {\n margin-top: 1em;\n }\n\n + p:not(.label) {\n margin-top: 0;\n }\n }\n\n > h1:first-child,\n > h2:first-child,\n > h3:first-child,\n > h4:first-child,\n > h5:first-child,\n > h6:first-child,\n > .sect1:first-child > h2,\n > .sect2:first-child > h3,\n > .sect3:first-child > h4,\n > .sect4:first-child > h5,\n > .sect5:first-child > h6 {\n margin-top: $sp-2;\n }\n}\n", "// Main nav, breadcrumb, etc...\n// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity\n\n.nav-list {\n padding: 0;\n margin-top: 0;\n margin-bottom: 0;\n list-style: none;\n\n .nav-list-item {\n @include fs-4;\n\n position: relative;\n margin: 0;\n\n @include mq(md) {\n @include fs-3;\n }\n\n .nav-list-link {\n display: block;\n min-height: $nav-list-item-height-sm;\n padding-top: $sp-1;\n padding-bottom: $sp-1;\n line-height: #{$nav-list-item-height-sm - 2 * $sp-1};\n @if $nav-list-expander-right {\n padding-right: $nav-list-item-height-sm;\n padding-left: $gutter-spacing-sm;\n } @else {\n padding-right: $gutter-spacing-sm;\n padding-left: $nav-list-item-height-sm;\n }\n\n @include mq(md) {\n min-height: $nav-list-item-height;\n line-height: #{$nav-list-item-height - 2 * $sp-1};\n @if $nav-list-expander-right {\n padding-right: $nav-list-item-height;\n padding-left: $gutter-spacing;\n } @else {\n padding-right: $gutter-spacing;\n padding-left: $nav-list-item-height;\n }\n }\n\n &.external > svg {\n width: $sp-4;\n height: $sp-4;\n vertical-align: text-bottom;\n }\n\n &.active {\n font-weight: 600;\n text-decoration: none;\n }\n\n &:hover,\n &.active {\n background-image: linear-gradient(\n -90deg,\n rgba($feedback-color, 1) 0%,\n rgba($feedback-color, 0.8) 80%,\n rgba($feedback-color, 0) 100%\n );\n }\n }\n\n .nav-list-expander {\n position: absolute;\n @if $nav-list-expander-right {\n right: 0;\n }\n\n width: $nav-list-item-height-sm;\n height: $nav-list-item-height-sm;\n padding: #{$nav-list-item-height-sm * 0.25};\n color: $link-color;\n\n @include mq(md) {\n width: $nav-list-item-height;\n height: $nav-list-item-height;\n padding: #{$nav-list-item-height * 0.25};\n }\n\n &:hover {\n background-image: linear-gradient(\n -90deg,\n rgba($feedback-color, 1) 0%,\n rgba($feedback-color, 0.8) 100%\n );\n }\n\n @if $nav-list-expander-right {\n svg {\n transform: rotate(90deg);\n }\n }\n }\n\n > .nav-list {\n display: none;\n padding-left: $sp-3;\n list-style: none;\n\n .nav-list-item {\n position: relative;\n\n .nav-list-link {\n color: $nav-child-link-color;\n }\n\n .nav-list-expander {\n color: $nav-child-link-color;\n }\n }\n }\n\n &.active {\n > .nav-list-expander svg {\n @if $nav-list-expander-right {\n transform: rotate(-90deg);\n } @else {\n transform: rotate(90deg);\n }\n }\n\n > .nav-list {\n display: block;\n }\n }\n }\n}\n\n.nav-category {\n padding: $sp-2 $gutter-spacing-sm;\n font-weight: 600;\n text-align: start;\n text-transform: uppercase;\n border-bottom: $border $border-color;\n @include fs-2;\n\n @include mq(md) {\n padding: $sp-2 $gutter-spacing;\n margin-top: $gutter-spacing-sm;\n text-align: start;\n\n &:first-child {\n margin-top: 0;\n }\n }\n}\n\n.nav-list.nav-category-list {\n > .nav-list-item {\n margin: 0;\n\n > .nav-list {\n padding: 0;\n\n > .nav-list-item {\n > .nav-list-link {\n color: $link-color;\n }\n\n > .nav-list-expander {\n color: $link-color;\n }\n }\n }\n }\n}\n\n// Aux nav\n\n.aux-nav {\n height: 100%;\n overflow-x: auto;\n @include fs-2;\n\n .aux-nav-list {\n display: flex;\n height: 100%;\n padding: 0;\n margin: 0;\n list-style: none;\n }\n\n .aux-nav-list-item {\n display: inline-block;\n height: 100%;\n padding: 0;\n margin: 0;\n }\n\n @include mq(md) {\n padding-right: $gutter-spacing-sm;\n }\n}\n\n// Breadcrumb nav\n\n.breadcrumb-nav {\n @include mq(md) {\n margin-top: -$sp-4;\n }\n}\n\n.breadcrumb-nav-list {\n padding-left: 0;\n margin-bottom: $sp-3;\n list-style: none;\n}\n\n.breadcrumb-nav-list-item {\n display: table-cell;\n @include fs-2;\n\n &::before {\n display: none;\n }\n\n &::after {\n display: inline-block;\n margin-right: $sp-2;\n margin-left: $sp-2;\n color: $grey-dk-000;\n content: \"/\";\n }\n\n &:last-child {\n &::after {\n content: \"\";\n }\n }\n}\n", "// Typography\n// stylelint-disable selector-no-type, selector-max-type, selector-max-specificity, selector-max-id\n\nh1,\n.text-alpha {\n @include fs-8;\n\n font-weight: 300;\n}\n\nh2,\n.text-beta,\n#toctitle {\n @include fs-6;\n}\n\nh3,\n.text-gamma {\n @include fs-5;\n}\n\nh4,\n.text-delta {\n @include fs-2;\n\n font-weight: 400;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n}\n\nh4 code {\n text-transform: none;\n}\n\nh5,\n.text-epsilon {\n @include fs-3;\n}\n\nh6,\n.text-zeta {\n @include fs-2;\n}\n\n.text-small {\n @include fs-2;\n}\n\n.text-mono {\n font-family: $mono-font-family !important;\n}\n\n.text-left {\n text-align: left !important;\n}\n\n.text-center {\n text-align: center !important;\n}\n\n.text-right {\n text-align: right !important;\n}\n", "// Labels (not the form kind)\n\n.label,\n.label-blue {\n display: inline-block;\n padding: 0.16em 0.56em;\n margin-right: $sp-2;\n margin-left: $sp-2;\n color: $white;\n text-transform: uppercase;\n vertical-align: middle;\n background-color: $blue-100;\n @include fs-2;\n\n border-radius: 12px;\n}\n\n.label-green {\n background-color: $green-200;\n}\n\n.label-purple {\n background-color: $purple-100;\n}\n\n.label-red {\n background-color: $red-200;\n}\n\n.label-yellow {\n color: $grey-dk-200;\n background-color: $yellow-200;\n}\n", "// Buttons and things that look like buttons\n// stylelint-disable color-named\n\n.btn {\n display: inline-block;\n box-sizing: border-box;\n padding: 0.3em 1em;\n margin: 0;\n font-family: inherit;\n font-size: inherit;\n font-weight: 500;\n line-height: 1.5;\n color: $link-color;\n text-decoration: none;\n vertical-align: baseline;\n cursor: pointer;\n background-color: $base-button-color;\n border-width: 0;\n border-radius: $border-radius;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);\n appearance: none;\n\n &:focus {\n text-decoration: none;\n outline: none;\n box-shadow: 0 0 0 3px rgba(blue, 0.25);\n }\n\n &:focus:hover,\n &.selected:focus {\n box-shadow: 0 0 0 3px rgba(blue, 0.25);\n }\n\n &:hover,\n &.zeroclipboard-is-hover {\n color: darken($link-color, 2%);\n }\n\n &:hover,\n &:active,\n &.zeroclipboard-is-hover,\n &.zeroclipboard-is-active {\n text-decoration: none;\n background-color: darken($base-button-color, 1%);\n }\n\n &:active,\n &.selected,\n &.zeroclipboard-is-active {\n background-color: darken($base-button-color, 3%);\n background-image: none;\n box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);\n }\n\n &.selected:hover {\n background-color: darken(#dcdcdc, 5%);\n }\n\n &:disabled,\n &.disabled {\n &,\n &:hover {\n color: rgba(102, 102, 102, 0.5);\n cursor: default;\n background-color: rgba(229, 229, 229, 0.5);\n background-image: none;\n box-shadow: none;\n }\n }\n}\n\n.btn-outline {\n color: $link-color;\n background: transparent;\n box-shadow: inset 0 0 0 2px $grey-lt-300;\n\n &:hover,\n &:active,\n &.zeroclipboard-is-hover,\n &.zeroclipboard-is-active {\n color: darken($link-color, 4%);\n text-decoration: none;\n background-color: transparent;\n box-shadow: inset 0 0 0 3px $grey-lt-300;\n }\n\n &:focus {\n text-decoration: none;\n outline: none;\n box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);\n }\n\n &:focus:hover,\n &.selected:focus {\n box-shadow: inset 0 0 0 2px $grey-dk-100;\n }\n}\n\n.btn-primary {\n @include btn-color($white, $btn-primary-color);\n}\n\n.btn-purple {\n @include btn-color($white, $purple-100);\n}\n\n.btn-blue {\n @include btn-color($white, $blue-000);\n}\n\n.btn-green {\n @include btn-color($white, $green-100);\n}\n", "// Search input and autocomplete\n\n.search {\n position: relative;\n z-index: 2;\n flex-grow: 1;\n height: $sp-10;\n padding: $sp-2;\n transition: padding linear #{$transition-duration * 0.5};\n\n @include mq(md) {\n position: relative !important;\n width: auto !important;\n height: 100% !important;\n padding: 0;\n transition: none;\n }\n}\n\n.search-input-wrap {\n position: relative;\n z-index: 1;\n height: $sp-8;\n overflow: hidden;\n border-radius: $border-radius;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);\n transition: height linear #{$transition-duration * 0.5};\n\n @include mq(md) {\n position: absolute;\n width: 100%;\n max-width: $search-results-width;\n height: 100% !important;\n border-radius: 0;\n box-shadow: none;\n transition: width ease $transition-duration;\n }\n}\n\n.search-input {\n position: absolute;\n width: 100%;\n height: 100%;\n padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing-sm + $sp-5};\n font-size: 16px;\n color: $body-text-color;\n background-color: $search-background-color;\n border-top: 0;\n border-right: 0;\n border-bottom: 0;\n border-left: 0;\n border-radius: 0;\n\n @include mq(md) {\n padding: $sp-2 $gutter-spacing-sm $sp-2 #{$gutter-spacing + $sp-5};\n font-size: 14px;\n background-color: $body-background-color;\n transition: padding-left linear #{$transition-duration * 0.5};\n }\n\n &:focus {\n outline: 0;\n\n + .search-label .search-icon {\n color: $link-color;\n }\n }\n}\n\n.search-label {\n position: absolute;\n display: flex;\n height: 100%;\n padding-left: $gutter-spacing-sm;\n\n @include mq(md) {\n padding-left: $gutter-spacing;\n transition: padding-left linear #{$transition-duration * 0.5};\n }\n\n .search-icon {\n width: #{$sp-4 * 1.2};\n height: #{$sp-4 * 1.2};\n align-self: center;\n color: $grey-dk-000;\n }\n}\n\n.search-results {\n position: absolute;\n left: 0;\n display: none;\n width: 100%;\n max-height: calc(100% - #{$sp-10});\n overflow-y: auto;\n background-color: $search-background-color;\n border-bottom-right-radius: $border-radius;\n border-bottom-left-radius: $border-radius;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);\n\n @include mq(md) {\n top: 100%;\n width: $search-results-width;\n max-height: calc(100vh - 200%) !important;\n }\n}\n\n.search-results-list {\n padding-left: 0;\n margin-bottom: $sp-1;\n list-style: none;\n @include fs-4;\n\n @include mq(md) {\n @include fs-3;\n }\n}\n\n.search-results-list-item {\n padding: 0;\n margin: 0;\n}\n\n.search-result {\n display: block;\n padding: $sp-1 $sp-3;\n\n &:hover,\n &.active {\n background-color: $feedback-color;\n }\n}\n\n.search-result-title {\n display: block;\n padding-top: $sp-2;\n padding-bottom: $sp-2;\n\n @include mq(sm) {\n display: inline-block;\n width: 40%;\n padding-right: $sp-2;\n vertical-align: top;\n }\n}\n\n.search-result-doc {\n display: flex;\n align-items: center;\n word-wrap: break-word;\n\n &.search-result-doc-parent {\n opacity: 0.5;\n @include fs-3;\n\n @include mq(md) {\n @include fs-2;\n }\n }\n\n .search-result-icon {\n width: $sp-4;\n height: $sp-4;\n margin-right: $sp-2;\n color: $link-color;\n flex-shrink: 0;\n }\n\n .search-result-doc-title {\n overflow: auto;\n }\n}\n\n.search-result-section {\n margin-left: #{$sp-4 + $sp-2};\n word-wrap: break-word;\n}\n\n.search-result-rel-url {\n display: block;\n margin-left: #{$sp-4 + $sp-2};\n overflow: hidden;\n color: $search-result-preview-color;\n text-overflow: ellipsis;\n white-space: nowrap;\n @include fs-1;\n}\n\n.search-result-previews {\n display: block;\n padding-top: $sp-2;\n padding-bottom: $sp-2;\n padding-left: $sp-4;\n margin-left: $sp-2;\n color: $search-result-preview-color;\n word-wrap: break-word;\n border-left: $border;\n border-left-color: $border-color;\n @include fs-2;\n\n @include mq(sm) {\n display: inline-block;\n width: 60%;\n padding-left: $sp-2;\n margin-left: 0;\n vertical-align: top;\n }\n}\n\n.search-result-preview + .search-result-preview {\n margin-top: $sp-1;\n}\n\n.search-result-highlight {\n font-weight: bold;\n}\n\n.search-no-result {\n padding: $sp-2 $sp-3;\n @include fs-3;\n}\n\n.search-button {\n position: fixed;\n right: $sp-4;\n bottom: $sp-4;\n display: flex;\n width: $sp-9;\n height: $sp-9;\n background-color: $search-background-color;\n border: 1px solid rgba($link-color, 0.3);\n border-radius: #{$sp-9 * 0.5};\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);\n align-items: center;\n justify-content: center;\n}\n\n.search-overlay {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1;\n width: 0;\n height: 0;\n background-color: rgba(0, 0, 0, 0.3);\n opacity: 0;\n transition: opacity ease $transition-duration, width 0s $transition-duration,\n height 0s $transition-duration;\n}\n\n.search-active {\n .search {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 0;\n }\n\n .search-input-wrap {\n height: $sp-10;\n border-radius: 0;\n\n @include mq(md) {\n width: $search-results-width;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);\n }\n }\n\n .search-input {\n background-color: $search-background-color;\n\n @include mq(md) {\n padding-left: 2.3rem;\n }\n }\n\n .search-label {\n @include mq(md) {\n padding-left: 0.6rem;\n }\n }\n\n .search-results {\n display: block;\n }\n\n .search-overlay {\n width: 100%;\n height: 100%;\n opacity: 1;\n transition: opacity ease $transition-duration, width 0s, height 0s;\n }\n\n @include mq(md) {\n .main {\n position: fixed;\n right: 0;\n left: 0;\n }\n }\n\n .main-header {\n padding-top: