@svelkit/spectre
Version:
spectre components as svelte actions and css modules
1 lines • 95.2 kB
Source Map (JSON)
{"version":3,"file":"style-8c9d0943.css","sources":["../../../../../node_modules/spectre.css/src/_buttons.scss","../spectre.module.scss","../_baseline.scss","../_normalize.scss","../_variables.scss","../../../../../node_modules/spectre.css/src/mixins/_shadow.scss","../_typography.scss","../../../../../node_modules/spectre.css/src/mixins/_label.scss","../../../../../node_modules/spectre.css/src/_tables.scss","../../../../../node_modules/spectre.css/src/mixins/_button.scss","../_buttons.scss","../_forms.scss","../../../../../node_modules/spectre.css/src/_labels.scss","../../../../../node_modules/spectre.css/src/_media.scss","../_layout.scss","../../../../../node_modules/spectre.css/src/_hero.scss","../../../../../node_modules/spectre.css/src/_navbar.scss","../_avatars.scss","../../../../../node_modules/spectre.css/src/mixins/_avatar.scss","../_badges.scss","../_bars.scss","../_breadcrumbs.scss","../_cards.scss","../_chips.scss","../../../../../node_modules/spectre.css/src/_dropdowns.scss","../_empty.scss","../_menus.scss","../../../../../node_modules/spectre.css/src/_modals.scss","../../../../../node_modules/spectre.css/src/_navs.scss","../../../../../node_modules/spectre.css/src/_tooltips.scss","../../../../../node_modules/spectre.css/src/mixins/_color.scss","../../../../../node_modules/spectre.css/src/utilities/_cursors.scss","../../../../../node_modules/spectre.css/src/utilities/_display.scss","../../../../../node_modules/spectre.css/src/utilities/_divider.scss","../../../../../node_modules/spectre.css/src/utilities/_loading.scss","../../../../../node_modules/spectre.css/src/mixins/_clearfix.scss","../../../../../node_modules/spectre.css/src/utilities/_position.scss","../../../../../node_modules/spectre.css/src/mixins/_position.scss","../../../../../node_modules/spectre.css/src/utilities/_shapes.scss","../../../../../node_modules/spectre.css/src/utilities/_text.scss","../../../../../node_modules/spectre.css/src/mixins/_text.scss"],"sourcesContent":["// Buttons\n.btn {\n appearance: none;\n background: $bg-color-light;\n border: $border-width solid $primary-color;\n border-radius: $border-radius;\n color: $primary-color;\n cursor: pointer;\n display: inline-block;\n font-size: $font-size;\n height: $control-size;\n line-height: $line-height;\n outline: none;\n padding: $control-padding-y $control-padding-x;\n text-align: center;\n text-decoration: none;\n transition: background .2s, border .2s, box-shadow .2s, color .2s;\n user-select: none;\n vertical-align: middle;\n white-space: nowrap;\n &:focus {\n @include control-shadow();\n }\n &:focus,\n &:hover {\n background: $secondary-color;\n border-color: $primary-color-dark;\n text-decoration: none;\n }\n &:active,\n &.active {\n background: $primary-color-dark;\n border-color: darken($primary-color-dark, 5%);\n color: $light-color;\n text-decoration: none;\n &.loading {\n &::after {\n border-bottom-color: $light-color;\n border-left-color: $light-color;\n }\n }\n }\n &[disabled],\n &:disabled,\n &.disabled {\n cursor: default;\n opacity: .5;\n pointer-events: none;\n }\n\n // Button Primary\n &.btn-primary {\n background: $primary-color;\n border-color: $primary-color-dark;\n color: $light-color;\n &:focus,\n &:hover {\n background: darken($primary-color-dark, 2%);\n border-color: darken($primary-color-dark, 5%);\n color: $light-color;\n }\n &:active,\n &.active {\n background: darken($primary-color-dark, 4%);\n border-color: darken($primary-color-dark, 7%);\n color: $light-color;\n }\n &.loading {\n &::after {\n border-bottom-color: $light-color;\n border-left-color: $light-color;\n }\n }\n }\n\n // Button Colors\n &.btn-success {\n @include button-variant($success-color);\n }\n\n &.btn-error {\n @include button-variant($error-color);\n }\n\n // Button Link\n &.btn-link {\n background: transparent;\n border-color: transparent;\n color: $link-color;\n &:focus,\n &:hover,\n &:active,\n &.active {\n color: $link-color-dark;\n }\n }\n\n // Button Sizes\n &.btn-sm {\n font-size: $font-size-sm;\n height: $control-size-sm;\n padding: $control-padding-y-sm $control-padding-x-sm;\n }\n\n &.btn-lg {\n font-size: $font-size-lg;\n height: $control-size-lg;\n padding: $control-padding-y-lg $control-padding-x-lg;\n }\n\n // Button Block\n &.btn-block {\n display: block;\n width: 100%;\n }\n\n // Button Action\n &.btn-action {\n width: $control-size;\n padding-left: 0;\n padding-right: 0;\n\n &.btn-sm {\n width: $control-size-sm;\n }\n\n &.btn-lg {\n width: $control-size-lg;\n }\n }\n\n // Button Clear\n &.btn-clear {\n background: transparent;\n border: 0;\n color: currentColor;\n height: $unit-5;\n line-height: $unit-4;\n margin-left: $unit-1;\n margin-right: -2px;\n opacity: 1;\n padding: $unit-h;\n text-decoration: none;\n width: $unit-5;\n\n &:focus,\n &:hover {\n background: rgba($bg-color, .5);\n opacity: .95;\n }\n\n &::before {\n content: \"\\2715\";\n }\n }\n}\n\n// Button groups\n.btn-group {\n display: inline-flex;\n flex-wrap: wrap;\n\n .btn {\n flex: 1 0 auto;\n &:first-child:not(:last-child) {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n &:not(:first-child):not(:last-child) {\n border-radius: 0;\n margin-left: -$border-width;\n }\n &:last-child:not(:first-child) {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n margin-left: -$border-width;\n }\n &:focus,\n &:hover,\n &:active,\n &.active {\n z-index: $zindex-0;\n }\n }\n\n &.btn-group-block {\n display: flex;\n\n .btn {\n flex: 1 0 0;\n }\n }\n}\n","/**\n * Source: https://github.com/picturepan2/spectre/blob/0.5.10/src/spectre.scss\n */\n\n// Variables and mixins\n@import 'variables';\n@import 'spectre.css/src/mixins';\n\n// Reset and dependencies\n@import 'baseline';\n\n// Elements\n@import 'typography';\n@import 'spectre.css/src/tables';\n@import 'buttons';\n@import 'forms';\n@import 'spectre.css/src/labels';\n@import 'spectre.css/src/media';\n\n// Layout\n@import 'layout';\n@import 'spectre.css/src/hero';\n@import 'spectre.css/src/navbar';\n\n// Components\n@import 'avatars';\n@import 'badges';\n@import 'bars';\n@import 'breadcrumbs';\n@import 'cards';\n@import 'chips';\n@import 'spectre.css/src/dropdowns';\n@import 'empty';\n@import 'menus';\n@import 'spectre.css/src/modals';\n@import 'spectre.css/src/navs';\n@import 'spectre.css/src/tooltips';\n\n// Utility classes\n@import 'utilities';\n","/**\n * Source: https://github.com/picturepan2/spectre/blob/0.5.10/src/_base.scss\n */\n\n.baseline {\n // composes: baseline from global;\n\n /**\n * 1. Change the default font family in all browsers (opinionated).\n * 2. Correct the line height in all browsers.\n * 3. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\n /* Document\n ========================================================================== */\n\n & {\n font-family: sans-serif; /* 1 */\n -ms-text-size-adjust: 100%; /* 3 */\n -webkit-text-size-adjust: 100%; /* 3 */\n }\n\n /* Sections\n ========================================================================== */\n\n /**\n * Remove the margin in all browsers (opinionated).\n */\n &:not(html),\n body {\n margin: 0;\n }\n\n @import 'normalize';\n\n // Base\n *,\n *::before,\n *::after {\n box-sizing: inherit;\n background-repeat: no-repeat;\n }\n\n /* Pseudo-elements inherit text decoration and vertical alignment */\n ::before,\n ::after {\n text-decoration: inherit;\n vertical-align: inherit;\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 & {\n box-sizing: border-box;\n font-size: $html-font-size;\n line-height: $html-line-height;\n -webkit-tap-highlight-color: transparent;\n }\n\n &:not(html),\n body {\n background: $body-bg;\n color: $body-font-color;\n // -apple-system, system-ui, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, sans-serif;\n // -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue;\n font-family: $body-font-family;\n font-size: $font-size;\n overflow-x: hidden;\n text-rendering: optimizeLegibility;\n }\n\n a {\n color: $link-color;\n outline: none;\n text-decoration: none;\n\n &:focus {\n @include control-shadow();\n }\n\n &:focus,\n &:hover,\n &:active,\n &.active {\n color: $link-color-dark;\n text-decoration: underline;\n }\n\n &:visited {\n color: $link-color-light;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n *,\n ::before,\n ::after {\n animation-delay: -1ms !important;\n animation-duration: 1ms !important;\n animation-iteration-count: 1 !important;\n background-attachment: initial !important;\n scroll-behavior: auto !important;\n transition-delay: 0s !important;\n transition-duration: 0s !important;\n }\n }\n\n /* SVGs fallback to the current text color */\n svg:not([fill]) {\n fill: currentColor;\n }\n\n /* Tables do not include additional border spacing */\n table {\n border-collapse: collapse;\n }\n\n /* Single taps are dispatched immediately on clickable elements */\n a, area, button, input, label, select, summary, textarea, [tabindex] {\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n }\n\n /* ARIA roles include visual cursor hints */\n [aria-busy=\"true\"] {\n cursor: progress;\n }\n\n [aria-controls] {\n cursor: pointer;\n }\n\n [aria-disabled=\"true\"], [disabled] {\n cursor: default;\n }\n\n /* Visually hidden content remains accessible */\n [aria-hidden=\"false\"][hidden] {\n display: initial;\n }\n\n [aria-hidden=\"false\"][hidden]:not(:focus) {\n clip: rect(0, 0, 0, 0);\n position: absolute;\n }\n}\n","/**\n * Source: https://github.com/picturepan2/spectre/blob/0.5.10/src/_normalize.scss\n */\n\n/* Manually forked from Normalize.css */\n/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/**\n * 1. Change the default font family in all browsers (opinionated).\n * 2. Correct the line height in all browsers.\n * 3. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\n/* Document\n ========================================================================== */\n\n// Set in _baseline\n// html {\n// font-family: sans-serif; /* 1 */\n// -ms-text-size-adjust: 100%; /* 3 */\n// -webkit-text-size-adjust: 100%; /* 3 */\n// }\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\n// Set in _baseline\n// body {\n// margin: 0;\n// }\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\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 * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain {\n /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8 (removed).\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. (removed)\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * Remove the outline on focused links when they are also active or hovered\n * in all browsers (opinionated).\n */\n\na:active,\na:hover {\n outline-width: 0;\n}\n\n/**\n * Modify default styling of address.\n */\n\naddress {\n font-style: normal;\n}\n\n/**\n * 1. Remove the bottom border in Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. (removed)\n */\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\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,\npre,\nsamp {\n font-family: $mono-font-family; /* 1 (changed) */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-. (Removed)\n */\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n font-weight: 400; /* (added) */\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 * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; /* 1 (changed) */\n font-size: inherit; /* 1 (changed) */\n line-height: inherit; /* 1 (changed) */\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 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\n html [type=\"button\"], /* 1 */\n [type=\"reset\"],\n [type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\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 (removed).\n */\n\n/**\n * Change the border, margin, and padding in all browsers (opinionated) (changed).\n */\n\nfieldset {\n border: 0;\n margin: 0;\n padding: 0;\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 * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\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 and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type='search']::-webkit-search-cancel-button,\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 IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\n menu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n outline: none;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n","/**\n * Source: https://github.com/picturepan2/spectre/blob/0.5.10/src/_variables.scss\n */\n\n// Core variables\n$version: \"0.5.9\";\n\n// Core features\n$rtl: false !default;\n\n// Core colors\n$primary-color: #5755d9 !default;\n$primary-color-dark: darken($primary-color, 3%) !default;\n$primary-color-light: lighten($primary-color, 3%) !default;\n$secondary-color: lighten($primary-color, 37.5%) !default;\n$secondary-color-dark: darken($secondary-color, 3%) !default;\n$secondary-color-light: lighten($secondary-color, 3%) !default;\n\n// Gray colors\n$dark-color: #303742 !default;\n$light-color: #fff !default;\n$gray-color: lighten($dark-color, 55%) !default;\n$gray-color-dark: darken($gray-color, 30%) !default;\n$gray-color-light: lighten($gray-color, 20%) !default;\n\n$border-color: lighten($dark-color, 65%) !default;\n$border-color-dark: darken($border-color, 10%) !default;\n$border-color-light: lighten($border-color, 8%) !default;\n$bg-color: lighten($dark-color, 75%) !default;\n$bg-color-dark: darken($bg-color, 3%) !default;\n$bg-color-light: $light-color !default;\n\n// Control colors\n$success-color: #32b643 !default;\n$warning-color: #ffb700 !default;\n$error-color: #e85600 !default;\n\n// Other colors\n$code-color: #d73e48 !default;\n$highlight-color: #ffe9b3 !default;\n$body-bg: $bg-color-light !default;\n$body-font-color: lighten($dark-color, 5%) !default;\n$link-color: $primary-color !default;\n$link-color-dark: darken($link-color, 10%) !default;\n$link-color-light: lighten($link-color, 10%) !default;\n\n// Fonts\n// Credit: https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/\n$base-font-family:\n system-ui,\n /* macOS 10.11-10.12 */ -apple-system,\n /* Windows 6+ */ Segoe UI,\n /* Android 4+ */ Roboto,\n /* Ubuntu 10.10+ */ Ubuntu,\n /* Gnome 3+ */ Cantarell,\n /* KDE Plasma 5+ */ Noto Sans,\n /* fallback */ sans-serif,\n /* macOS emoji */ \"Apple Color Emoji\",\n /* Windows emoji */ \"Segoe UI Emoji\",\n /* Windows emoji */ \"Segoe UI Symbol\",\n /* Linux emoji */ \"Noto Color Emoji\"\n !default;\n\n$mono-font-family:\n /* macOS 10.10+ */ Menlo,\n /* Windows 6+ */ Consolas,\n /* Android 4+ */ Roboto Mono,\n /* Ubuntu 10.10+ */ Ubuntu Monospace,\n /* KDE Plasma 5+ */ Noto Mono,\n /* KDE Plasma 4+ */ Oxygen Mono,\n /* Linux/OpenOffice fallback */ Liberation Mono,\n /* fallback */ monospace\n !default;\n\n$fallback-font-family: \"Helvetica Neue\", sans-serif !default;\n$cjk-zh-hans-font-family: $base-font-family, \"PingFang SC\", \"Hiragino Sans GB\", \"Microsoft YaHei\", $fallback-font-family !default;\n$cjk-zh-hant-font-family: $base-font-family, \"PingFang TC\", \"Hiragino Sans CNS\", \"Microsoft JhengHei\", $fallback-font-family !default;\n$cjk-jp-font-family: $base-font-family, \"Hiragino Sans\", \"Hiragino Kaku Gothic Pro\", \"Yu Gothic\", YuGothic, Meiryo, $fallback-font-family !default;\n$cjk-ko-font-family: $base-font-family, \"Malgun Gothic\", $fallback-font-family !default;\n$body-font-family: $base-font-family, $fallback-font-family !default;\n\n/* Adjusted the size for a 16px base wich works better in non-baseline enviroments */\n// Unit sizes\n$unit-o: .0625rem !default;\n$unit-h: .125rem !default;\n$unit-1: .25rem !default;\n$unit-2: .5rem !default;\n$unit-3: .75rem !default;\n$unit-4: 1rem !default;\n$unit-5: 1.25rem !default;\n$unit-6: 1.5rem !default;\n$unit-7: 1.75rem !default;\n$unit-8: 2rem !default;\n$unit-9: 2.25rem !default;\n$unit-10: 2.5rem !default;\n$unit-12: 3rem !default;\n$unit-16: 4rem !default;\n\n// Font sizes\n$html-font-size: 16px !default;\n$html-line-height: 1.5 !default;\n$font-size: 1rem !default;\n$font-size-sm: .875rem !default;\n$font-size-lg: 1.125rem !default;\n$line-height: 1.5rem !default;\n\n// Sizes\n$layout-spacing: $unit-2 !default;\n$layout-spacing-sm: $unit-1 !default;\n$layout-spacing-lg: $unit-4 !default;\n$border-radius: $unit-h !default;\n$border-width: $unit-o !default;\n$border-width-lg: $unit-h !default;\n$control-size: $unit-9 !default;\n$control-size-sm: $unit-7 !default;\n$control-size-lg: $unit-10 !default;\n$control-padding-x: $unit-2 !default;\n$control-padding-x-sm: $unit-2 * .75 !default;\n$control-padding-x-lg: $unit-2 * 1.5 !default;\n$control-padding-y: ($control-size - $line-height) / 2 - $border-width !default;\n$control-padding-y-sm: ($control-size-sm - $line-height) / 2 - $border-width !default;\n$control-padding-y-lg: ($control-size-lg - $line-height) / 2 - $border-width !default;\n$control-icon-size: .8rem !default;\n\n$control-width-xs: 180px !default;\n$control-width-sm: 320px !default;\n$control-width-md: 640px !default;\n$control-width-lg: 960px !default;\n$control-width-xl: 1280px !default;\n\n// Responsive breakpoints\n$size-xs: 480px !default;\n$size-sm: 600px !default;\n$size-md: 840px !default;\n$size-lg: 960px !default;\n$size-xl: 1280px !default;\n$size-2x: 1440px !default;\n\n$responsive-breakpoint: $size-xs !default;\n\n// Z-index\n$zindex-0: 1 !default;\n$zindex-1: 100 !default;\n$zindex-2: 200 !default;\n$zindex-3: 300 !default;\n$zindex-4: 400 !default;\n","// Component focus shadow\n@mixin control-shadow($color: $primary-color) {\n box-shadow: 0 0 0 .1rem rgba($color, .2);\n}\n\n// Shadow mixin\n@mixin shadow-variant($offset) {\n box-shadow: 0 $offset ($offset + .05rem) * 2 rgba($dark-color, .3);\n}\n","/**\n * Source: https://github.com/picturepan2/spectre/blob/0.5.10/src/_typography.scss\n */\n\n// Typography\n// Headings\n.baseline {\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: inherit;\n font-weight: 500;\n line-height: 1.2;\n margin-bottom: 0.5em;\n margin-top: 0;\n }\n}\n.h1,\n.h2,\n.h3,\n.h4,\n.h5,\n.h6 {\n font-weight: 500;\n}\n.baseline h1,\n.h1 {\n font-size: 2rem;\n}\n.baseline h2,\n.h2 {\n font-size: 1.6rem;\n}\n.baseline h3,\n.h3 {\n font-size: 1.4rem;\n}\n.baseline h4,\n.h4 {\n font-size: 1.2rem;\n}\n.baseline h5,\n.h5 {\n font-size: 1rem;\n}\n.baseline h6,\n.h6 {\n font-size: 0.8rem;\n}\n\n.baseline {\n // Paragraphs\n p {\n margin: 0 0 $line-height;\n }\n\n // Semantic text elements\n a,\n ins,\n u {\n text-decoration-skip: ink edges;\n }\n\n abbr[title] {\n border-bottom: $border-width dotted;\n cursor: help;\n text-decoration: none;\n }\n\n kbd {\n @include label-base();\n @include label-variant($light-color, $dark-color);\n font-size: $font-size-sm;\n }\n\n mark {\n @include label-variant($body-font-color, $highlight-color);\n border-bottom: $unit-o solid darken($highlight-color, 15%);\n border-radius: $border-radius;\n padding: $unit-o $unit-h 0;\n }\n\n // Blockquote\n blockquote {\n border-left: $border-width-lg solid $border-color;\n margin-left: 0;\n padding: $unit-2 $unit-4;\n\n p:last-child {\n margin-bottom: 0;\n }\n }\n\n // Lists\n ul,\n ol {\n margin: $unit-4 0 $unit-4 $unit-4;\n padding: 0;\n\n ul,\n ol {\n margin: $unit-4 0 $unit-4 $unit-4;\n }\n\n li {\n margin-top: $unit-2;\n }\n }\n\n ul {\n list-style: disc inside;\n\n ul {\n list-style-type: circle;\n }\n }\n\n ol {\n list-style: decimal inside;\n\n ol {\n list-style-type: lower-alpha;\n }\n }\n\n dl {\n dt {\n font-weight: bold;\n }\n dd {\n margin: $unit-2 0 $unit-4 0;\n }\n }\n}\n","// Label base style\n@mixin label-base() {\n border-radius: $border-radius;\n line-height: 1.25;\n padding: .1rem .2rem;\n}\n\n@mixin label-variant($color: $light-color, $bg-color: $primary-color) {\n background: $bg-color;\n color: $color;\n}\n","// Tables\n.table {\n border-collapse: collapse;\n border-spacing: 0;\n width: 100%;\n @if $rtl == true {\n text-align: right;\n } @else {\n text-align: left;\n }\n\n &.table-striped {\n tbody {\n tr:nth-of-type(odd) {\n background: $bg-color;\n }\n }\n }\n\n &,\n &.table-striped {\n tbody {\n tr {\n &.active {\n background: $bg-color-dark;\n }\n }\n }\n }\n\n &.table-hover {\n tbody {\n tr {\n &:hover {\n background: $bg-color-dark;\n }\n }\n }\n }\n\n // Scollable tables\n &.table-scroll {\n display: block;\n overflow-x: auto;\n padding-bottom: .75rem;\n white-space: nowrap;\n }\n\n td,\n th {\n border-bottom: $border-width solid $border-color;\n padding: $unit-3 $unit-2;\n }\n th {\n border-bottom-width: $border-width-lg;\n }\n}\n","// Button variant mixin\n@mixin button-variant($color: $primary-color) {\n background: $color;\n border-color: darken($color, 3%);\n color: $light-color;\n &:focus {\n @include control-shadow($color);\n }\n &:focus,\n &:hover {\n background: darken($color, 2%);\n border-color: darken($color, 5%);\n color: $light-color;\n }\n &:active,\n &.active {\n background: darken($color, 7%);\n border-color: darken($color, 10%);\n color: $light-color;\n }\n &.loading {\n &::after {\n border-bottom-color: $light-color;\n border-left-color: $light-color;\n }\n }\n}\n\n@mixin button-outline-variant($color: $primary-color) {\n background: $light-color;\n border-color: $color;\n color: $color;\n &:focus {\n @include control-shadow($color);\n }\n &:focus,\n &:hover {\n background: lighten($color, 50%);\n border-color: darken($color, 2%);\n color: $color;\n }\n &:active,\n &.active {\n background: $color;\n border-color: darken($color, 5%);\n color: $light-color;\n }\n &.loading {\n &::after {\n border-bottom-color: $color;\n border-left-color: $color;\n }\n }\n}\n","@import 'spectre.css/src/buttons';\n\nbutton.btn-clear {\n height: auto;\n width: auto;\n line-height: inherit;\n margin-bottom: 0;\n}\n","/**\n * Source: https://github.com/picturepan2/spectre/blob/0.5.10/src/_forms.scss\n */\n\n// Forms\n.form-group {\n &:not(:last-child) {\n margin-bottom: $layout-spacing;\n }\n}\n\n.baseline,\n.form {\n fieldset {\n margin-bottom: $layout-spacing-lg;\n }\n\n legend {\n font-size: $font-size-lg;\n font-weight: 500;\n margin-bottom: $layout-spacing-lg;\n }\n}\n\n// Form element: Label\n.form-label {\n display: block;\n line-height: $line-height;\n padding: $control-padding-y + $border-width 0;\n\n &.label-sm {\n font-size: $font-size-sm;\n padding: $control-padding-y-sm + $border-width 0;\n }\n\n &.label-lg {\n font-size: $font-size-lg;\n padding: $control-padding-y-lg + $border-width 0;\n }\n}\n\n// Form element: Input\n.form-input {\n appearance: none;\n background: $bg-color-light;\n background-image: none;\n border: $border-width solid $border-color-dark;\n border-radius: $border-radius;\n color: $body-font-color;\n display: block;\n font-size: $font-size;\n height: $control-size;\n line-height: $line-height;\n max-width: 100%;\n outline: none;\n padding: $control-padding-y $control-padding-x;\n position: relative;\n transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;\n width: 100%;\n &:focus {\n @include control-shadow();\n border-color: $primary-color;\n }\n &::placeholder {\n color: $gray-color;\n }\n\n // Input sizes\n &.input-sm {\n font-size: $font-size-sm;\n height: $control-size-sm;\n padding: $control-padding-y-sm $control-padding-x-sm;\n }\n\n &.input-lg {\n font-size: $font-size-lg;\n height: $control-size-lg;\n padding: $control-padding-y-lg $control-padding-x-lg;\n }\n\n &.input-inline {\n display: inline-block;\n vertical-align: middle;\n width: auto;\n }\n\n // Input types\n &[type='file'] {\n height: auto;\n }\n}\n\n// Form element: Textarea\ntextarea.form-input {\n &,\n &.input-lg,\n &.input-sm {\n height: auto;\n }\n}\n\n// Form element: Input hint\n.form-input-hint {\n color: $gray-color;\n font-size: $font-size-sm;\n margin-top: $unit-1;\n\n .has-success &,\n .is-success + & {\n color: $success-color;\n }\n\n .has-error &,\n .is-error + & {\n color: $error-color;\n }\n}\n\n// Form element: Select\n.form-select {\n appearance: none;\n border: $border-width solid $border-color-dark;\n border-radius: $border-radius;\n color: inherit;\n font-size: $font-size;\n height: $control-size;\n line-height: $line-height;\n outline: none;\n padding: $control-padding-y $control-padding-x;\n vertical-align: middle;\n width: 100%;\n background: $bg-color-light;\n &:focus {\n @include control-shadow();\n border-color: $primary-color;\n }\n &::-ms-expand {\n display: none;\n }\n\n // Select sizes\n &.select-sm {\n font-size: $font-size-sm;\n height: $control-size-sm;\n padding: $control-padding-y-sm ($control-icon-size + $control-padding-x-sm)\n $control-padding-y-sm $control-padding-x-sm;\n }\n\n &.select-lg {\n font-size: $font-size-lg;\n height: $control-size-lg;\n padding: $control-padding-y-lg ($control-icon-size + $control-padding-x-lg)\n $control-padding-y-lg $control-padding-x-lg;\n }\n\n // Multiple select\n &[size],\n &[multiple] {\n height: auto;\n padding: $control-padding-y $control-padding-x;\n\n option {\n padding: $unit-h $unit-1;\n }\n }\n &:not([multiple]):not([size]) {\n background: $bg-color-light\n url(\"data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E\")\n no-repeat right 0.35rem center / 0.4rem 0.5rem;\n padding-right: $control-icon-size + $control-padding-x;\n }\n}\n\n// Form Icons\n.has-icon-left,\n.has-icon-right {\n position: relative;\n\n .form-icon {\n height: $control-icon-size;\n margin: 0 $control-padding-y;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n width: $control-icon-size;\n z-index: $zindex-0 + 1;\n }\n}\n\n.has-icon-left {\n .form-icon {\n left: $border-width;\n }\n\n .form-input {\n padding-left: $control-icon-size + $control-padding-y * 2;\n }\n}\n\n.has-icon-right {\n .form-icon {\n right: $border-width;\n }\n\n .form-input {\n padding-right: $control-icon-size + $control-padding-y * 2;\n }\n}\n\n// Form element: Checkbox and Radio\n.form-checkbox,\n.form-radio,\n.form-switch {\n display: block;\n line-height: $line-height;\n margin: ($control-size - $control-size-sm) / 2 0;\n min-height: $control-size-sm;\n padding: (($control-size-sm - $line-height) / 2) $control-padding-x\n (($control-size-sm - $line-height) / 2) ($control-icon-size + $control-padding-x);\n position: relative;\n\n input {\n clip: rect(0, 0, 0, 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n position: absolute;\n width: 1px;\n &:focus + .form-icon {\n @include control-shadow();\n border-color: $primary-color;\n }\n &:checked + .form-icon {\n background: $primary-color;\n border-color: $primary-color;\n }\n }\n\n .form-icon {\n border: $border-width solid $border-color-dark;\n cursor: pointer;\n display: inline-block;\n position: absolute;\n transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s;\n }\n\n // Input checkbox, radio and switch sizes\n &.input-sm {\n font-size: $font-size-sm;\n margin: 0;\n }\n\n &.input-lg {\n font-size: $font-size-lg;\n margin: ($control-size-lg - $control-size-sm) / 2 0;\n }\n}\n\n.form-checkbox,\n.form-radio {\n .form-icon {\n background: $bg-color-light;\n height: $control-icon-size;\n left: 0;\n top: ($control-size-sm - $control-icon-size) / 2;\n width: $control-icon-size;\n }\n\n input {\n &:active + .form-icon {\n background: $bg-color-dark;\n }\n }\n}\n.form-checkbox {\n .form-icon {\n border-radius: $border-radius;\n }\n\n input {\n &:checked + .form-icon {\n &::before {\n background-clip: padding-box;\n border: $border-width-lg solid $light-color;\n border-left-width: 0;\n border-top-width: 0;\n content: '';\n height: 9px;\n left: 50%;\n margin-left: -3px;\n margin-top: -6px;\n position: absolute;\n top: 50%;\n transform: rotate(45deg);\n width: 6px;\n }\n }\n &:indeterminate + .form-icon {\n background: $primary-color;\n border-color: $primary-color;\n &::before {\n background: $bg-color-light;\n content: '';\n height: 2px;\n left: 50%;\n margin-left: -5px;\n margin-top: -1px;\n position: absolute;\n top: 50%;\n width: 10px;\n }\n }\n }\n}\n.form-radio {\n .form-icon {\n border-radius: 50%;\n }\n\n input {\n &:checked + .form-icon {\n &::before {\n background: $bg-color-light;\n border-radius: 50%;\n content: '';\n height: 6px;\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: 6px;\n }\n }\n }\n}\n\n// Form element: Switch\n.form-switch {\n padding-left: ($unit-8 + $control-padding-x);\n\n .form-icon {\n background: $gray-color;\n background-clip: padding-box;\n border-radius: $unit-2 + $border-width;\n height: $unit-4 + $border-width * 2;\n left: 0;\n top: ($control-size-sm - $unit-4) / 2 - $border-width;\n width: $unit-8;\n &::before {\n background: $bg-color-light;\n border-radius: 50%;\n content: '';\n display: block;\n height: $unit-4;\n left: 0;\n position: absolute;\n top: 0;\n transition: background 0.2s, border 0.2s, box-shadow 0.2s, color 0.2s, left 0.2s;\n width: $unit-4;\n }\n }\n\n input {\n &:checked + .form-icon {\n &::before {\n left: 14px;\n }\n }\n &:active + .form-icon {\n &::before {\n background: $bg-color;\n }\n }\n }\n}\n\n// Form element: Input groups\n.input-group {\n display: flex;\n\n .input-group-addon {\n background: $bg-color;\n border: $border-width solid $border-color-dark;\n border-radius: $border-radius;\n line-height: $line-height;\n padding: $control-padding-y $control-padding-x;\n white-space: nowrap;\n\n &.addon-sm {\n font-size: $font-size-sm;\n padding: $control-padding-y-sm $control-padding-x-sm;\n }\n\n &.addon-lg {\n font-size: $font-size-lg;\n padding: $control-padding-y-lg $control-padding-x-lg;\n }\n }\n\n .form-input,\n .form-select {\n flex: 1 1 auto;\n width: 1%;\n }\n\n .input-group-btn {\n z-index: $zindex-0;\n }\n\n .form-input,\n .form-select,\n .input-group-addon,\n .input-group-btn {\n &:first-child:not(:last-child) {\n border-bottom-right-radius: 0;\n border-top-right-radius: 0;\n }\n &:not(:first-child):not(:last-child) {\n border-radius: 0;\n margin-left: -$border-width;\n }\n &:last-child:not(:first-child) {\n border-bottom-left-radius: 0;\n border-top-left-radius: 0;\n margin-left: -$border-width;\n }\n &:focus {\n z-index: $zindex-0 + 1;\n }\n }\n\n .form-select {\n width: auto;\n }\n\n &.input-inline {\n display: inline-flex;\n }\n}\n\n// Form validation states\n.form-input,\n.form-select {\n .has-success &,\n &.is-success {\n background: lighten($success-color, 53%);\n border-color: $success-color;\n &:focus {\n @include control-shadow($success-color);\n }\n }\n\n .has-error &,\n &.is-error {\n background: lighten($error-color, 53%);\n border-color: $error-color;\n &:focus {\n @include control-shadow($error-color);\n }\n }\n}\n\n.form-checkbox,\n.form-radio,\n.form-switch {\n .has-error &,\n &.is-error {\n .form-icon {\n border-color: $error-color;\n }\n\n input {\n &:checked + .form-icon {\n background: $error-color;\n border-color: $error-color;\n }\n\n &:focus + .form-icon {\n @include control-shadow($error-color);\n border-color: $error-color;\n }\n }\n }\n}\n\n.form-checkbox {\n .has-error &,\n &.is-error {\n input {\n &:indeterminate + .form-icon {\n background: $error-color;\n border-color: $error-color;\n }\n }\n }\n}\n\n// validation based on :placeholder-shown (Edge doesn't support it yet)\n.form-input {\n &:not(:placeholder-shown) {\n &:invalid {\n border-color: $error-color;\n &:focus {\n @include control-shadow($error-color);\n background: lighten($error-color, 53%);\n }\n\n & + .form-input-hint {\n color: $error-color;\n }\n }\n }\n}\n\n// Form disabled and readonly\n.form-input,\n.form-select {\n &:disabled,\n &.disabled {\n background-color: $bg-color-dark;\n cursor: not-allowed;\n opacity: 0.5;\n }\n}\n\n.form-input {\n &[readonly] {\n background-color: $bg-color;\n }\n}\n\n.baseline,\n.form {\n input {\n &:disabled,\n &.disabled {\n & + .form-icon {\n background: $bg-color-dark;\n cursor: not-allowed;\n opacity: 0.5;\n }\n }\n }\n}\n\n.form-switch {\n input {\n &:disabled,\n &.disabled {\n & + .form-icon::before {\n background: $bg-color-light;\n }\n }\n }\n}\n\n// Form horizontal\n.form-horizontal {\n padding: $layout-spacing 0;\n\n .form-group {\n display: flex;\n flex-wrap: wrap;\n }\n}\n\n// Form inline\n.form-inline {\n display: inline-block;\n}\n","// Labels\n.label {\n @include label-base();\n @include label-variant(lighten($body-font-color, 5%), $bg-color-dark);\n display: inline-block;\n\n // Label rounded\n &.label-rounded {\n border-radius: 5rem;\n padding-left: .4rem;\n padding-right: .4rem; \n }\n\n // Label colors\n &.label-primary {\n @include label-variant($light-color, $primary-color);\n }\n\n &.label-secondary {\n @include label-variant($primary-color, $secondary-color);\n }\n\n &.label-success {\n @include label-variant($light-color, $success-color);\n }\n\n &.label-warning {\n @include label-variant($light-color, $warning-color);\n }\n\n &.label-error {\n @include label-variant($light-color, $error-color);\n }\n}\n","// Media\n// Image responsive\n.img-responsive {\n display: block;\n height: auto;\n max-width: 100%;\n}\n\n// object-fit support is coming to Microsoft Edge\n// https://developer.microsoft.com/en-us/microsoft-edge/platform/status/objectfitandobjectposition/\n.img-fit-cover {\n object-fit: cover;\n}\n\n.img-fit-contain {\n object-fit: contain;\n}\n\n// Video responsive\n.video-responsive {\n display: block;\n overflow: hidden;\n padding: 0;\n position: relative;\n width: 100%;\n &::before {\n content: \"\";\n display: block;\n padding-bottom: 56.25%; // Default ratio 16:9, you can calculate this value by dividing 9 by 16\n }\n\n iframe,\n object,\n embed {\n border: 0;\n bottom: 0;\n height: 100%;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n width: 100%;\n }\n}\n\nvideo.video-responsive {\n height: auto;\n max-width: 100%;\n\n &::before {\n content: none;\n }\n}\n\n.video-responsive-4-3 {\n &::before {\n padding-bottom: 75%; // Ratio 4:3\n }\n}\n\n.video-responsive-1-1 {\n &::before {\n padding-bottom: 100%; // Ratio 1:1\n }\n}\n\n// Figure\n.figure {\n margin: 0 0 $layout-spacing 0;\n\n .figure-caption {\n color: $gray-color-dark;\n margin-top: $layout-spacing;\n }\n}\n","/**\n * Source: https://github.com/picturepan2/spectre/blob/0.5.10/src/_layout.scss\n */\n\n// Layout\n.container {\n // composes: container from global;\n box-sizing: border-box;\n margin-left: auto;\n margin-right: auto;\n padding-left: $layout-spacing;\n padding-right: $layout-spacing;\n width: 100%;\n\n $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;\n\n &.grid-xl {\n max-width: $grid-spacing * 2 + $size-xl;\n }\n\n &.grid-lg {\n max-width: $grid-spacing * 2 + $size-lg;\n }\n\n &.grid-md {\n max-width: $grid-spacing * 2 + $size-md;\n }\n\n &.grid-sm {\n max-width: $grid-spacing * 2 + $size-sm;\n }\n\n &.grid-xs {\n max-width: $grid-spacing * 2 + $size-xs;\n }\n}\n.grid-xs {\n // composes: grid-xs from global;\n}\n.grid-sm {\n // composes: grid-sm from global;\n}\n.grid-md {\n // composes: grid-md from global;\n}\n.grid-lg {\n // composes: grid-lg from global;\n}\n.grid-xl {\n // composes: grid-xl from global;\n}\n\n// Responsive breakpoint system\n.show-xs,\n.show-sm,\n.show-md,\n.show-lg,\n.show-xl {\n display: none !important;\n}\n.show-xs {\n // composes: show-xs from global;\n}\n.show-sm {\n // composes: show-sm from global;\n}\n.show-md {\n // composes: show-md from global;\n}\n.show-lg {\n // composes: show-lg from global;\n}\n.show-xl {\n // composes: show-xl from global;\n}\n.hide-xs {\n // composes: hide-xs from global;\n}\n.hide-sm {\n // composes: hide-sm from global;\n}\n.hide-md {\n // composes: hide-md from global;\n}\n.hide-lg {\n // composes: hide-lg from global;\n}\n.hide-xl {\n // composes: hide-xl from global;\n}\n\n// Responsive grid system\n.columns {\n // composes: columns from global;\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n margin-left: -$layout-spacing;\n margin-right: -$layout-spacing;\n\n &.col-gapless {\n margin-left: 0;\n margin-right: 0;\n\n & > .column {\n padding: 0;\n }\n }\n &.col-oneline {\n flex-wrap: nowrap;\n overflow-x: auto;\n }\n}\n.col-gapless {\n // composes: col-gapless from global;\n}\n.col-oneline {\n // composes: col-oneline from global;\n}\n.column {\n // composes: column from global;\n}\n/* [class~=\"col-\"] => not needed as we add the column class to each col-* */\n.column {\n box-sizing: border-box;\n display: flex;\n flex: 1;\n max-width: 100%;\n padding: $layout-spacing;\n\n &.col-12,\n &.col-11,\n &.col-10,\n &.col-9,\n &.col-8,\n &.col-7,\n &.col-6,\n &.col-5,\n &.col-4,\n &.col-3,\n &.col-2,\n &.col-1,\n &.col-auto {\n flex: none;\n }\n}\n.col-12 {\n // composes: col-12 from global;\n width: 100%;\n}\n.col-11 {\n // composes: col-11 from global;\n width: 91.66666667%;\n}\n.col-10 {\n // composes: col-10 from global;\n width: 83.33333333%;\n}\n.col-9 {\n // composes: col-9 from global;\n width: 75%;\n}\n.col-8 {\n // composes: col-8 from global;\n width: 66.66666667%;\n}\n.col-7 {\n // composes: col-7 from global;\n width: 58.33333333%;\n}\n.col-6 {\n // composes: col-6 from global;\n width: 50%;\n}\n.col-5 {\n // composes: col-5 from global;\n width: 41.66666667%;\n}\n.col-4 {\n // composes: col-4 from global;\n width: 33.33333333%;\n}\n.col-3 {\n // composes: col-3 from global;\n width: 25%;\n}\n.col-2 {\n // composes: col-2 from global;\n width: 16.66666667%;\n}\n.col-1 {\n // composes: col-1 from global;\n width: 8.33333333%;\n}\n.col-auto {\n // composes: col-auto from global;\n flex: 0 0 auto;\n max-width: none;\n width: auto;\n}\n.col-mx-auto {\n // composes: col-mx-auto from global;\n margin-left: auto;\n margin-right: auto;\n}\n.col-ml-auto {\n // composes: col-ml-auto from global;\n margin-left: auto;\n}\n.col-mr-auto {\n // composes: col-mr-auto from global;\n margin-right: auto;\n}\n@media (max-width: $size-xl) {\n .col-xl-12,\n .col-xl-11,\n .col-xl-10,\n .col-xl-9,\n .col-xl-8,\n .col-xl-7,\n .col-xl-6,\n .col-xl-5,\n .col-xl-4,\n .col-xl-3,\n .col-xl-2,\n .col-xl-1,\n .col-xl-auto {\n flex: none;\n }\n .col-xl-12 {\n width: 100%;\n }\n .col-xl-11 {\n width: 91.66666667%;\n }\n .col-xl-10 {\n width: 83.33333333%;\n }\n .col-xl-9 {\n width: 75%;\n }\n .col-xl-8 {\n width: 66.66666667%;\n }\n .col-xl-7 {\n width: 58.33333333%;\n }\n .col-xl-6 {\n width: 50%;\n }\n .col-xl-5 {\n width: 41.66666667%;\n }\n .col-xl-4 {\n width: 33.33333333%;\n }\n .col-xl-3 {\n width: 25%;\n }\n .col-xl-2 {\n width: 16.66666667%;\n }\n .col-xl-1 {\n width: 8.33333333%;\n }\n .col-xl-auto {\n width: auto;\n }\n .hide-xl {\n display: none !important;\n }\n .show-xl {\n display: block !important;\n }\n}\n.col-xl-12 {\n // composes: col-xl-12 from global;\n}\n.col-xl-11 {\n // composes: col-xl-11 from global;\n}\n.col-xl-10 {\n // composes: col-xl-10 from global;\n}\n.col-xl-9 {\n // composes: col-xl-9 from global;\n}\n.col-xl-8 {\n // composes: col-xl-8 from global;\n}\n.col-xl-7 {\n // composes: col-xl-7 from global;\n}\n.col-xl-6 {\n // composes: col-xl-6 from global;\n}\n.col-xl-5 {\n // composes: col-xl-5 from global;\n}\n.col-xl-4 {\n // composes: col-xl-4 from global;\n}\n.col-xl-3 {\n // composes: col-xl-3 from global;\n}\n.col-xl-2 {\n // composes: col-xl-2 from global;\n}\n.col-xl-1 {\n // composes: col-xl-1 from global;\n}\n.col-xl-auto {\n // composes: col-xl-auto from global;\n}\n\n@media (max-width: $size-lg) {\n .col-lg-12,\n .col-lg-11,\n .col-lg-10,\n .col-lg-9,\n .col-lg-8,\n .col-lg-7,\n .col-lg-6,\n .col-lg-5,\n .col-lg-4,\n .col-lg-3,\n .col-lg-2,\n .col-lg-1,\n .col-lg-auto {\n flex: none;\n }\n .col-lg-12 {\n width: 100%;\n }\n .col-lg-11 {\n width: 91.66666667%;\n }\n .col-lg-10 {\n width: 83.33333333%;\n }\n .col-lg-9 {\n width: 75%;\n }\n .col-lg-8 {\n width: 66.66666667%;\n }\n .col-lg-7 {\n width: 58.33333333%;\n }\n .col-lg-6 {\n width: 50%;\n }\n .col-lg-5 {\n width: 41.66666667%;\n }\n .col-lg-4 {\n width: 33.33333333%;\n }\n .col-lg-3 {\n width: 25%;\n }\n .col-lg-2 {\n width: 16.66666667%;\n }\n .col-lg-1 {\n width: 8.33333333%;\n }\n .col-lg-auto {\n width: auto;\n }\n .hide-lg {\n display: none !important;\n }\n .show-lg {\n display: block !important;\n }\n}\n.col-lg-12 {\n // composes: col-lg-12 from global;\n}\n.col-lg-11 {\n // composes: col-lg-11 from global;\n}\n.col-lg-10 {\n // composes: col-lg-10 from global;\n}\n.col-lg-9 {\n // composes: col-lg-9 from global;\n}\n.col-lg-8 {\n // composes: col-lg-8 from global;\n}\n.col-lg-7 {\n // composes: col-lg-7 from global;\n}\n.col-lg-6 {\n // composes: col-lg-6 from global;\n}\n.col-lg-5 {\n // composes: col-lg-5 from global;\n}\n.col-lg-4 {\n // composes: col-lg-4 from global;\n}\n.col-lg-3 {\n // composes: col-lg-3 from global;\n}\n.col-lg-2 {\n // composes: col-lg-2 from global;\n}\n.col-lg-1 {\n // composes: col-lg-1 from global;\n}\n.col-lg-auto {\n // composes: col-lg-auto from global;\n}\n\n@media (max-width: $size-md) {\n .col-md-12,\n .col-md-11,\n .col-md-10,\n .col-md-9,\n .col-md-8,\n .col-md-7,\n .col-md-6,\n .col-md-5,\n .col-md-4,\n .col-md-3,\n .col-md-2,\n .col-md-1,\n .col-md-auto {\n flex: none;\n }\n .col-md-12 {\n width: 100%;\n }\n .col-md-11 {\n width: 91.6666