\n// - Keystrokes \n\n/// Font family for header elements.\n/// @type String | List\n$header-font-family: $body-font-family !default;\n\n/// Font weight of headers.\n/// @type String\n$header-font-weight: $global-weight-normal !default;\n\n/// Font style (e.g. italicized) of headers.\n/// @type String\n$header-font-style: normal !default;\n\n/// Font stack used for elements that use monospaced type, such as code samples\n/// @type String | List\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;\n\n/// Color of headers.\n/// @type Color\n$header-color: inherit !default;\n\n/// Line height of headers.\n/// @type Number\n$header-lineheight: 1.4 !default;\n\n/// Bottom margin of headers.\n/// @type Number\n$header-margin-bottom: 0.5rem !default;\n\n/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.\n/// @type Map\n$header-styles: (\n small: (\n 'h1': ('font-size': 24),\n 'h2': ('font-size': 20),\n 'h3': ('font-size': 19),\n 'h4': ('font-size': 18),\n 'h5': ('font-size': 17),\n 'h6': ('font-size': 16),\n ),\n medium: (\n 'h1': ('font-size': 48),\n 'h2': ('font-size': 40),\n 'h3': ('font-size': 31),\n 'h4': ('font-size': 25),\n 'h5': ('font-size': 20),\n 'h6': ('font-size': 16),\n ),\n) !default;\n\n// $header-styles map is built from $header-sizes in order to ensure downward compatibility\n// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss\n@function build-from-header-sizes($header-sizes) {\n @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';\n $header-styles: ();\n @each $size, $headers in $header-sizes {\n $header-map: ();\n @each $header, $font-size in $headers {\n $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));\n }\n $header-styles: map-merge($header-styles, ($size: $header-map));\n }\n @return $header-styles;\n}\n\n// If it exists $headers-sizes is used to build $header-styles. See the documentation.\n@if variable-exists(header-sizes) {\n $header-styles: build-from-header-sizes($header-sizes);\n}\n\n/// Text rendering method of headers.\n/// @type String\n$header-text-rendering: optimizeLegibility !default;\n\n/// Font size of `` elements.\n/// @type Number\n$small-font-size: 80% !default;\n\n/// Color of `` elements when placed inside headers.\n/// @type Color\n$header-small-font-color: $medium-gray !default;\n\n/// Line height of text inside `` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Use the `.code-inline` component as default for `` elements.\n/// @type Boolean\n$enable-code-inline: true !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `` elements.\n/// @type Number\n$defnlist-margin-bottom: 1rem !default;\n\n/// Font weight for `- ` elements.\n/// @type String\n$defnlist-term-weight: $global-weight-bold !default;\n\n/// Spacing between `
- ` and `
- ` elements.\n/// @type Number\n$defnlist-term-margin-bottom: 0.3rem !default;\n\n/// Text color of `
` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Use the `.cite-block` component as default for `` elements.\n/// @type Boolean\n$enable-cite-block: true !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Inline Citations\n @if ($enable-cite-block == true) {\n cite {\n // Extending a class is not recommended.\n // TODO: Break the typography-base/typography-helpers separation\n @extend %cite-block;\n }\n }\n\n // Abbreviations\n abbr, abbr[title] {\n border-bottom: $abbr-underline;\n cursor: help;\n text-decoration: none;\n }\n\n // Figures\n figure {\n margin: 0;\n }\n\n // Code\n @if ($enable-code-inline == true) {\n code {\n @extend %code-inline;\n }\n }\n\n // Keystrokes\n kbd {\n margin: 0;\n padding: $keystroke-padding;\n\n background-color: $keystroke-background;\n\n font-family: $keystroke-font;\n color: $keystroke-color;\n\n @if has-value($keystroke-radius) {\n border-radius: $keystroke-radius;\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n/// Patch to fix issue #12080\n$primary-color: null !default;\n$secondary-color: null !default;\n$warning-color: null !default;\n$alert-color: null !default;\n$success-color: null !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: divide($rgb, 255);\n\n $rgb: if($rgb < 0.03928, divide($rgb, 12.92), pow(divide($rgb + 0.055, 1.055), 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: divide($luminance1, $luminance2);\n\n @if $luminance2 > $luminance1 {\n $ratio: divide(1, $ratio);\n }\n\n $ratio: round($ratio * 10) * 0.1;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn 'Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}';\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group typography-helpers\n////\n\n/// Default font size for lead paragraphs.\n/// @type Number\n$lead-font-size: $global-font-size * 1.25 !default;\n\n/// Default line height for lead paragraphs.\n/// @type String\n$lead-lineheight: 1.6 !default;\n\n/// Default line height for subheaders.\n/// @type Number\n$subheader-lineheight: 1.4 !default;\n\n/// Default font color for subheaders.\n/// @type Color\n$subheader-color: $dark-gray !default;\n\n/// Default font weight for subheaders.\n/// @type String\n$subheader-font-weight: $global-weight-normal !default;\n\n/// Default top margin for subheaders.\n/// @type Number\n$subheader-margin-top: 0.2rem !default;\n\n/// Default bottom margin for subheaders.\n/// @type Number\n$subheader-margin-bottom: 0.5rem !default;\n\n/// Default font size for statistic numbers.\n/// @type Number\n$stat-font-size: 2.5rem !default;\n\n/// Text color for `.cite-block` component.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Font size for `.cite-block` component.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Pseudo content for `.cite-block` component.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Text color of `.code-inline` and `.code-block` components.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of `.code-inline` and `.code-block` components.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in `.code-inline` and `.code-block` components.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of `.code-inline` and `.code-block` components.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around `.code-inline` and `.code-block` components.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of the `.code-inline` component.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Padding around text of the `.code-block` component.\n/// @type Number | List\n$code-block-padding: 1rem !default;\n\n/// Margin under the `.code-block` component.\n/// @type Number\n$code-block-margin-bottom: 1.5rem !default;\n\n@mixin cite-block {\n display: block;\n color: $cite-color;\n font-size: $cite-font-size;\n\n &:before {\n content: $cite-pseudo-content;\n }\n}\n\n/// Add basic styles for a code helper.\n/// See `code-inline` and `code-block` mixins.\n@mixin code-style {\n border: $code-border;\n background-color: $code-background;\n\n font-family: $code-font-family;\n font-weight: $code-font-weight;\n color: $code-color;\n}\n\n/// Make code helper from the `code-style` mixin inline.\n/// Used to generate `.code-inline`\n@mixin code-inline {\n display: inline;\n max-width: 100%;\n word-wrap: break-word;\n\n padding: $code-padding;\n}\n\n/// Make code helper from the `code-style` mixin a block.\n/// Used to generate `.code-block`\n@mixin code-block {\n display: block;\n overflow: auto;\n white-space: pre;\n\n padding: $code-block-padding;\n margin-bottom: $code-block-margin-bottom;\n}\n\n@mixin foundation-typography-helpers {\n // Use to create a subheading under a main header\n // Make sure you pair the two elements in a element, like this:\n // \n // Heading
\n // Subheading
\n // \n .subheader {\n margin-top: $subheader-margin-top;\n margin-bottom: $subheader-margin-bottom;\n\n font-weight: $subheader-font-weight;\n line-height: $subheader-lineheight;\n color: $subheader-color;\n }\n\n // Use to style an introductory lead, deck, blurb, etc.\n .lead {\n font-size: $lead-font-size;\n line-height: $lead-lineheight;\n }\n\n // Use to style a large number to display a statistic\n .stat {\n font-size: $stat-font-size;\n line-height: 1;\n\n p + & {\n margin-top: -1rem;\n }\n }\n\n ul, ol {\n // Use to remove numbers from ordered list & bullets from unordered list\n &.no-bullet {\n margin-#{$global-left}: 0;\n list-style: none;\n }\n }\n\n %cite-block {\n @include cite-block;\n }\n\n .cite-block {\n @extend %cite-block;\n }\n\n %code-inline {\n @include code-style;\n @include code-inline;\n }\n\n .code-inline {\n @extend %code-inline;\n }\n\n .code-block {\n @include code-style;\n @include code-block;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n@mixin foundation-text-alignment {\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @each $align in (left, right, center, justify) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-text-#{$align} {\n text-align: $align;\n }\n }\n @else {\n .text-#{$align} {\n text-align: $align;\n }\n }\n }\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n/// If `true`, all elements will have transparent backgrounds when printed, to save on ink.\n/// @type Boolean\n/// @group global\n$print-transparent-backgrounds: true !default;\n\n/// If `true`, displays next to all links their \"href\" when printed.\n/// @type Boolean\n/// @group global\n$print-hrefs: true !default;\n\n// sass-lint:disable-all\n\n@mixin foundation-print-styles {\n .show-for-print { display: none !important; }\n\n @media print {\n * {\n // Ensure a \"black-on-white\" print by removing backgrounds,\n // using black text everywhere and forcing the browser to economize ink.\n @if $print-transparent-backgrounds {\n background: transparent !important;\n color: black !important; // Black prints faster: h5bp.com/s\n print-color-adjust: economy;\n }\n // Otherwise, prevent any economy by the browser.\n @else {\n print-color-adjust: exact;\n }\n\n box-shadow: none !important;\n text-shadow: none !important;\n }\n\n .show-for-print { display: block !important; }\n .hide-for-print { display: none !important; }\n\n table.show-for-print { display: table !important; }\n thead.show-for-print { display: table-header-group !important; }\n tbody.show-for-print { display: table-row-group !important; }\n tr.show-for-print { display: table-row !important; }\n td.show-for-print { display: table-cell !important; }\n th.show-for-print { display: table-cell !important; }\n\n // Display the URL of a link after the text\n a,\n a:visited { text-decoration: underline;}\n @if $print-hrefs {\n a[href]:after { content: ' (' attr(href) ')'; }\n }\n\n // Don't display the URL for images or JavaScript/internal links\n .ir a:after,\n a[href^='javascript:']:after,\n a[href^='#']:after { content: ''; }\n\n // Display what an abbreviation stands for after the text\n abbr[title]:after { content: ' (' attr(title) ')'; }\n\n // Prevent page breaks in the middle of a blockquote or preformatted text block\n pre,\n blockquote {\n border: 1px solid $dark-gray;\n page-break-inside: avoid;\n }\n\n // h5bp.com/t\n thead { display: table-header-group; }\n\n tr,\n img { page-break-inside: avoid; }\n\n img { max-width: 100% !important; }\n\n @page { margin: 0.5cm; }\n\n p,\n h2,\n h3 {\n orphans: 3;\n widows: 3;\n }\n\n // Avoid page breaks after a heading\n h2,\n h3 { page-break-after: avoid; }\n\n // Helper to re-allow page breaks in the middle of certain elements (e.g. pre, blockquote, tr)\n .print-break-inside {\n page-break-inside: auto;\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n// Margin Grid classes\n@mixin xy-base-grid-classes {\n\n // Grid Container\n .grid-container {\n @include xy-grid-container;\n\n &.fluid {\n @include xy-grid-container(100%);\n }\n\n &.full {\n @include xy-grid-container(100%, 0);\n }\n }\n\n // Base grid styles\n .grid-x {\n @include xy-grid;\n }\n\n .cell {\n @include xy-cell(full, $gutter-type: none);\n\n &.auto {\n @include xy-cell-base(auto);\n }\n\n &.shrink {\n @include xy-cell-base(shrink);\n }\n\n }\n .grid-x {\n > .auto {\n @include xy-cell-size(auto, $gutter-type: none);\n }\n\n > .shrink {\n @include xy-cell-size(shrink, $gutter-type: none);\n }\n }\n\n // Auto width\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues & PRs for the backstory:\n // https://github.com/foundation/foundation-sites/issues/10244\n // https://github.com/foundation/foundation-sites/pull/10222 and\n // https://github.com/foundation/foundation-sites/pull/10164\n .grid-x {\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\";\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == $-zf-zero-breakpoint) {\n .grid-x > .#{$-zf-size}-auto {\n @include xy-cell(auto, $gutter-type: none);\n }\n }\n\n %-xy-cell-base-shrink-horizontal-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == $-zf-zero-breakpoint) {\n .grid-x > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-size(shrink, $gutter-type: none);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n .grid-x > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-size($i, $gutter-type: none);\n }\n }\n }\n\n // Reset width when using `.grid-margin-x` not on `.grid-x`\n .grid-margin-x:not(.grid-x) > .cell {\n width: auto;\n }\n\n // Reset height when using `.grid-margin-y` not on `.grid-y`\n .grid-margin-y:not(.grid-y) > .cell {\n height: auto;\n }\n}\n\n@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {\n $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');\n > .#{$prefix}auto {\n @include xy-cell-size(auto, $vertical: $vertical);\n }\n\n > .#{$prefix}shrink {\n @include xy-cell-size(shrink, $vertical: $vertical);\n }\n\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');\n\n > #{$classname} {\n @include xy-cell-size($i, $vertical: $vertical);\n }\n }\n}\n\n// Margin Grid classes\n@mixin xy-margin-grid-classes(\n $gutter-position: left right,\n $vertical: false,\n $wrapping-selector: '.grid-margin-x'\n){\n #{$wrapping-selector} {\n @include xy-gutters($negative: true, $gutter-position: $gutter-position);\n\n // Base cell styles\n > .cell {\n @include xy-cell($vertical: $vertical, $output: (size gutters));\n }\n\n // base styles need to all be before the auto and shrink styles\n @include -zf-each-breakpoint() {\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {\n > .cell {\n @include xy-cell($vertical: $vertical, $output: (size gutters));\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for all prior breakpoints.\n // As their gutter is defined with their width/height, even breakpoint without a new margin must be\n // generated to not having their width/height overrided by re-adjusted smaller breakpoints.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);\n }\n }\n\n @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);\n }\n }\n}\n\n// Padding Grid classes\n@mixin xy-padding-grid-classes {\n .grid-padding-x {\n\n // Negative margin for nested grids\n .grid-padding-x {\n @include xy-gutters($negative: true);\n }\n\n // Negative margin for grids within `grid-container/grid-container.fluid`\n // This allows margin and padding grids to line up with eachother\n .grid-container:not(.full) > & {\n @include xy-gutters($negative: true);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n }\n}\n\n// Block Grid classes\n@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {\n @if $padding-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: padding, $output: (size));\n }\n }\n }\n }\n\n @if $margin-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for prior breakpoints based on the responsive gutter.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @if(map-has-key($grid-margin-gutters, $bp)) {\n .grid-margin-x.#{$bp}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));\n }\n }\n }\n }\n }\n @for $i from 1 through $xy-block-grid-max {\n .grid-margin-x.#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-type: margin, $output: (size));\n }\n }\n }\n }\n}\n\n// Collapse classes\n@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {\n @each $bp in $breakpoint-classes {\n @if $margin-grid {\n .#{$bp}-margin-collapse {\n @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);\n }\n }\n\n @if $padding-grid {\n .#{$bp}-padding-collapse {\n @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);\n }\n }\n }\n}\n\n// Offset classes\n@mixin xy-offset-cell-classes {\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-columns {\n // Offsets\n $o: $i - 1;\n\n .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n\n .grid-margin-x > .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o);\n }\n }\n }\n}\n\n// Vertical Grid classes\n@mixin xy-vertical-grid-classes(\n $margin-grid: true,\n $padding-grid: true\n) {\n\n // @include -zf-each-breakpoint() {\n // @if not($-zf-size == $-zf-zero-breakpoint) {\n // }\n // }\n\n .grid-y {\n @include xy-grid(vertical, false);\n\n\n > .cell {\n @include xy-cell-reset();\n }\n\n > .auto {\n @include xy-cell-size(auto, $gutter-type: none, $vertical: true);\n }\n\n > .shrink {\n @include xy-cell-size(shrink, $gutter-type: none, $vertical: true);\n }\n\n\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues and PRs for the backstory:\n // https://github.com/foundation/foundation-sites/issues/10244\n // https://github.com/foundation/foundation-sites/pull/10222 and\n // https://github.com/foundation/foundation-sites/pull/10164\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\";\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == $-zf-zero-breakpoint) {\n > .#{$-zf-size}-auto {\n @include xy-cell(auto, $gutter-type: none, $vertical: true);\n }\n }\n\n %-xy-cell-base-shrink-vertical-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == $-zf-zero-breakpoint) {\n > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-size(shrink, $gutter-type: none, $vertical: true);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-size($i, $gutter-type: none, $vertical: true);\n }\n }\n\n }\n }\n\n @if $padding-grid {\n .grid-padding-y {\n // Negative margin for nested grids\n .grid-padding-y {\n @include xy-gutters($negative: true, $gutter-position: top bottom);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);\n }\n }\n }\n\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n }\n\n}\n\n@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {\n // Framed grid styles\n .grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .cell-block {\n @include xy-cell-block();\n }\n\n .cell-block-y {\n @include xy-cell-block(true);\n }\n\n\n .cell-block-container {\n @include xy-cell-block-container();\n }\n\n\n @include -zf-each-breakpoint(false) {\n\n .#{$-zf-size}-grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .#{$-zf-size}-grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .#{$-zf-size}-cell-block {\n @include xy-cell-block();\n }\n\n .#{$-zf-size}-cell-block-container {\n @include xy-cell-block-container();\n }\n\n .#{$-zf-size}-cell-block-y {\n @include xy-cell-block(true);\n }\n }\n\n @if $vertical-grid {\n .grid-y {\n &.grid-frame {\n @include xy-grid-frame(true);\n width: auto;\n }\n\n @include -zf-each-breakpoint(false) {\n &.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true);\n width: auto;\n }\n\n }\n }\n .cell {\n .grid-y.grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n @include -zf-each-breakpoint(false) {\n .grid-y.#{$-zf-size}-grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n }\n }\n }\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n .grid-frame.grid-margin-y {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);\n }\n @include -zf-each-breakpoint(false) {\n .grid-margin-y.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);\n }\n }\n }\n}\n\n// Final classes\n@mixin foundation-xy-grid-classes(\n $base-grid: true,\n $margin-grid: true,\n $padding-grid: true,\n $block-grid: true,\n $collapse: true,\n $offset: true,\n $vertical-grid: true,\n $frame-grid: true\n) {\n\n // Base grid styles\n @if($base-grid) {\n @include xy-base-grid-classes();\n }\n\n // Margin grid\n @if($margin-grid) {\n @include xy-margin-grid-classes();\n }\n\n // Padding grid\n @if($padding-grid) {\n @include xy-padding-grid-classes();\n }\n\n // Block grid\n @if($block-grid) {\n @include xy-block-grid-classes($margin-grid, $padding-grid);\n }\n\n // Collapse gutters\n @if($collapse) {\n @include xy-collapse-grid-classes($margin-grid, $padding-grid);\n }\n\n // Offset gutters\n @if($offset) {\n @include xy-offset-cell-classes();\n }\n\n // Vertical grid\n @if($vertical-grid) {\n @include xy-vertical-grid-classes($margin-grid, $padding-grid);\n }\n\n @if ($frame-grid) {\n @include xy-frame-grid-classes($vertical-grid, $margin-grid)\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) * 0.5;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @else if (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) * 0.5;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n/// @param {Number} $padding [$grid-container-padding] - paddings of the container.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin-left: auto;\n margin-right: auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Returns the appropriate CSS flex value for a cell base.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).\n///\n/// @returns {List} The cell flex property value.\n@function xy-cell-base($size: full) {\n @if ($size == 'auto') {\n @return 1 1 0;\n }\n @else if ($size == 'grow') {\n @return 1 0 auto;\n }\n @else if ($size == 'shrink' or $size == 'full' or zf-is-fraction($size, $allow-no-denominator: true)) {\n @return 0 0 auto;\n }\n @return null;\n}\n\n/// Calculate the size of a cell gutters.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns the responsive gutters map `$gutters`. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n///\n/// @returns {Number|Map} The cell gutter size or the responsive gutters map.\n@function xy-cell-gutters(\n $gutters: $grid-margin-gutters,\n $breakpoint: null\n) {\n // For `auto`, returns the responsive map `$gutters`.\n @if ($breakpoint == 'auto') {\n @return $gutters;\n }\n\n // Use the contextual breakpoint by default.\n $breakpoint: -zf-current-breakpoint($breakpoint);\n\n @if ($breakpoint) {\n @return -zf-get-bp-val($gutters, $breakpoint);\n }\n @else {\n @return -zf-get-bp-val($gutters, $-zf-zero-breakpoint) or 0;\n }\n}\n\n/// Returns the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.\n///\n/// @returns {Number} Size of the cell (in percent).\n@function xy-cell-size(\n $size: $grid-columns\n) {\n @return fraction-to-percentage($size, $denominator: $grid-columns);\n}\n\n/// Returns the appropriate CSS value for a cell size.\n///\n/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full`, `auto`, `shrink` or any fraction like `6`, `50%`, `1 of 2` or `1/2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, returns a map of sizes adapted to responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n///\n/// @returns {Number|String|Map} The cell sizing property value, or a responsive map of them.\n@function xy-cell-size-css(\n $size: full,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: null\n) {\n $margin-gutter: 0;\n\n @if ($size == 'auto' or $size == 'shrink') {\n @return auto;\n }\n\n // For cells with margin gutters, the gutter is included in the width.\n @if ($gutter-type == 'margin') {\n $margin-gutter: xy-cell-gutters($gutters, $breakpoint);\n @if ($margin-gutter == null) {\n @error 'xy-cell-size: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\"';\n }\n }\n\n // Calculate the cell size (number)\n $size-raw: if($size == 'full', 100%, xy-cell-size($size));\n\n // Calculate the cell CSS size including gutters (string)\n // If the cell has responsive margin gutters, return a responsive map of sizes.\n @if type-of($margin-gutter) == 'map' {\n $responsive-css-sizes: ();\n\n @each $bp, $mg in $margin-gutter {\n $mgc: rem-calc($mg);\n @if $mgc == 0 {\n $mgc: 0rem;\n }\n $size-css: if($mg == 0, $size-raw, calc(#{$size-raw} - #{$mg}));\n $responsive-css-sizes: map-merge($responsive-css-sizes, ($bp: $size-css));\n }\n\n @return $responsive-css-sizes;\n }\n // Otherwise, return a single CSS size.\n @else {\n // Make sure that 0 is translated in 0rem for calc()\n $mgc: rem-calc($margin-gutter);\n @if $mgc == 0 {\n $mgc: 0rem;\n }\n $css-size: if($margin-gutter == 0, $size-raw, calc(#{$size-raw} - #{$mgc}));\n @return $css-size;\n }\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink`, `grow`, or any other value representing a cell size (it will be treated as `shrink`).\n@mixin xy-cell-base($size: full) {\n $base: xy-cell-base($size);\n\n flex: #{$base};\n\n // Set base styles for \"full\" only\n @if($size == 'full') {\n min-height: 0;\n min-width: 0;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, height, width);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n/// Sets sizing properties for cells.\n///\n/// Gutters-related arguments are required for cells with margin gutters (by default) as the gutter is included in the width.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates sizes adapted for responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-size(\n $size: full,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: null,\n $vertical: false\n) {\n $sizes: xy-cell-size-css($size, $gutters, $gutter-type, $breakpoint);\n $direction: if($vertical == true, height, width);\n\n @if (type-of($sizes) == 'map') {\n @include -zf-breakpoint-value(auto, $sizes) {\n #{$direction}: $-zf-bp-value;\n }\n }\n @else {\n #{$direction}: $sizes;\n }\n}\n\n/// Sets gutters properties for cells.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.\n/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Direction of the gutters to output. See `$gutter-position`.\n@mixin xy-cell-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: null,\n $breakpoint: null,\n $vertical: false\n) {\n // Get the default gutter position according to cell direction\n @if($gutter-position == null) {\n $gutter-position: if($vertical == true, top bottom, left right);\n }\n\n // Get the gutter width for this breakpoint\n $gutter-width: xy-cell-gutters($gutters, $breakpoint);\n @if ($gutter-width == null) {\n @error 'xy-cell-gutters: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\"';\n }\n\n @if ($gutter-type and $gutter-type != none) {\n @include xy-gutters($gutter-width, $gutter-type, $gutter-position);\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).\n/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.\n/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If `auto`, generates responsive gutters. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work properly otherwise.\n@mixin xy-cell(\n $size: full,\n $gutter-output: null,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: null,\n $breakpoint: null,\n $vertical: false,\n $output: (base size gutters)\n) {\n // Default for $gutter-output\n @if ($gutter-output != null) {\n @warn 'xy-cell: $gutter-output is deprecated and will be removed. See migration notes at https://git.io/foundation-6-6-0';\n @if ($gutter-output == false) {\n $output: sl-remove($output, gutters);\n }\n }\n\n @if (index($output, base)) {\n @include xy-cell-base($size);\n }\n @if (index($output, size)) {\n @include xy-cell-size($size, $gutters, $gutter-type, $breakpoint, $vertical);\n }\n @if (index($output, gutters)) {\n @include xy-cell-gutters($gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// `xy-cell-static()` is deprecated and will be removed.\n/// Use `xy-cell()` instead with `$output: (size gutters)` to not generate the cell base.\n/// See migration notes at https://git.io/foundation-6-6-0\n///\n/// @deprecated v6.6.0\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (100% width), `auto` (use all available space), `shrink` (use only the required space) or any fraction (`6`, `50%`, `1 of 2` or `1/2`...).\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters. Always `true` for margin gutters.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n @warn 'xy-cell-static() mixin is deprecated and will be removed. Use \"xy-cell()\" instead. See migration notes at https://git.io/foundation-6-6-0';\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n $-gutter-output: if($gutter-type == 'margin', true, $gutter-output);\n $-gutter-margin: if($gutter-type == 'margin', $gutter, 0);\n\n @include -xy-cell-properties($size, $-gutter-margin, $vertical);\n @if ($-gutter-output) {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Sizes child elements so that `$n` number of items appear on each row.\n///\n/// @param {Number} $n - Number of elements to display per row.\n/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.\n/// @param {Boolean} $gutter-output [null] - [DEPRECATED] Whether or not to output gutters.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin`, `padding` or `none`.\n/// @param {List} $gutter-position [null] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination. By default `right left` for horizontal cells and `top bottom` for vertical cells.\n/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n/// @param {List} $output [(base size gutters)] - Cell parts to output. You will need to generate others parts of the cell seperately, it may not work correctly otherwise.\n@mixin xy-grid-layout(\n $n,\n $selector: '.cell',\n $gutter-output: null,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: null,\n $breakpoint: null,\n $vertical: false,\n $output: (base size gutters)\n) {\n $size: percentage(divide(1, $n));\n\n & > #{$selector} {\n @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical, $output);\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Collapses the grid a cells within it.\n///\n/// @param {String} $selector [.cell] - The child element to remove the gutter from.\n/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.\n/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.\n@mixin xy-grid-collapse(\n $selector: '.cell',\n $gutter-type: margin,\n $gutter-position: right left,\n $min-breakpoint: $-zf-zero-breakpoint\n) {\n // First, lets negate any margins on the top level\n @if ($gutter-type == 'margin') {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n }\n }\n\n $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);\n\n // Output new widths to not include gutters\n @each $bp in $breakpoint-classes {\n @if(sl-contain($excluded-bps, $bp)) {\n @include breakpoint($min-breakpoint) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-size($i, $gutter-type: none);\n }\n }\n }\n } @else {\n @include breakpoint($bp) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-size($i, $gutter-type: none);\n }\n }\n }\n }\n }\n }\n @else {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n padding-#{$value}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Returns the appropriate CSS value to offset a cell.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n///\n/// @returns {Number|String} The cell offset property value.\n@function xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: null\n) {\n $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);\n $size: xy-cell-size($n);\n\n $offset: $size;\n @if ($gutter-type == 'margin') {\n // Make sure that 0 is translated in 0rem for calc()\n $gutter: rem-calc(xy-cell-gutters($gutters, $breakpoint));\n @if $gutter == 0 {\n $gutter: 0rem;\n }\n $offset: if($gutter == 0, $size, calc(#{$size} + #{$gutter} / 2));\n }\n @return $offset;\n}\n\n/// Offsets a column to the right/bottom by `$n` columns.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `xy-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {Number|Array|Keyword} $breakpoint [null] - Breakpoint to use for `$gutters`. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints. If a list is given, media-queries will be generated. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.\n@mixin xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: null,\n $vertical: false\n) {\n $breakpoint: -zf-current-breakpoint($breakpoint, $default: $-zf-zero-breakpoint);\n $direction: if($vertical, 'top', $global-left);\n\n @include -zf-each-breakpoint-in($breakpoint, $media-queries: 'for-lists') {\n $offset: xy-cell-offset($n, $gutters, $gutter-type);\n margin-#{$direction}: #{$offset};\n }\n}\n","// sass-lint:disable no-vendor-prefixes\n\n/// Modifies a grid to give it \"frame\" behavior (no overflow, no wrap, stretch behavior)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.\n/// @param {Number|Map} $gutters [null] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.\n/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.\n@mixin xy-grid-frame(\n $vertical: false,\n $nested: false,\n $gutters: null,\n $breakpoint: null,\n $include-base: true\n) {\n\n @if $include-base {\n overflow: hidden;\n position: relative;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n\n @if $breakpoint == null and type-of($gutters) == 'map' {\n @include -zf-each-breakpoint() {\n @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);\n }\n } @else {\n // Get our gutters if applicable\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // If we have a gutter, add it to the width/height\n @if $gutter {\n @if $vertical == true {\n $unit: if($nested == true, 100%, 100vh);\n $gutter: rem-calc($gutter);\n // Make sure that 0 is translated in 0rem for calc()\n @if $gutter == 0 {\n $gutter: 0rem;\n }\n height: calc(#{$unit} + #{$gutter});\n } @else {\n $unit: if($nested == true, 100%, 100vw);\n $gutter: rem-calc($gutter);\n // Make sure that 0 is translated in 0rem for calc()\n @if $gutter == 0 {\n $gutter: 0rem;\n }\n width: calc(#{$unit} + #{$gutter});\n }\n }\n @else {\n @if $vertical == true {\n height: if($nested == true, 100%, 100vh);\n } @else {\n width: if($nested == true, 100%, 100vw);\n }\n }\n }\n}\n\n/// Modifies a cell to give it \"block\" behavior (overflow auto, inertial scrolling)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n@mixin xy-cell-block(\n $vertical: false\n) {\n $property: if($vertical == true, 'overflow-y', 'overflow-x');\n\n @if $vertical == true {\n overflow-y: auto;\n max-height: 100%;\n min-height: 100%;\n } @else {\n overflow-x: auto;\n max-width: 100%;\n }\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n/// Container for inside a grid frame containing multiple blocks. Typically used\n/// as a modifier for a `.cell` to allow the cell to pass along flex sizing\n/// constraints / from parents to children.\n@mixin xy-cell-block-container() {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n\n > .grid-x {\n max-height: 100%;\n flex-wrap: nowrap;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group button\n////\n\n/// Font family for button elements.\n/// @type Font\n$button-font-family: inherit !default;\n\n/// Font weight for button elements.\n/// Ignored if null (default)\n/// @type Font-Weight\n$button-font-weight: null !default;\n\n/// Padding inside buttons.\n/// @type List\n$button-padding: 0.85em 1em !default;\n\n/// Margin around buttons.\n/// @type List\n$button-margin: 0 0 $global-margin 0 !default;\n\n/// Default fill for buttons. Can either be `solid` or `hollow`.\n/// @type Keyword\n$button-fill: solid !default;\n\n/// Default background color for buttons.\n/// @type Color\n$button-background: $primary-color !default;\n\n/// Background color on hover for buttons.\n/// @type Color\n$button-background-hover: scale-color($button-background, $lightness: -15%) !default;\n\n/// Font color for buttons.\n/// @type List\n$button-color: $white !default;\n\n/// Alternative font color for buttons.\n/// @type List\n$button-color-alt: $black !default;\n\n/// Border radius for buttons, defaulted to global-radius.\n/// @type Number\n$button-radius: $global-radius !default;\n\n/// Border for buttons, transparent by default\n/// @type List\n$button-border: 1px solid transparent !default;\n\n/// Border width for hollow outline buttons\n/// @type Number\n$button-hollow-border-width: 1px !default;\n\n/// Sizes for buttons.\n/// @type Map\n$button-sizes: (\n tiny: 0.6rem,\n small: 0.75rem,\n default: 0.9rem,\n large: 1.25rem,\n) !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$button-palette: $foundation-palette !default;\n\n/// opacity for a disabled button.\n/// @type List\n$button-opacity-disabled: 0.25 !default;\n\n/// Background color lightness on hover for buttons.\n/// @type Number\n$button-background-hover-lightness: -20% !default;\n\n/// Color lightness on hover for hollow buttons.\n/// @type Number\n$button-hollow-hover-lightness: -50% !default;\n\n// Internal: flip from margin-right to margin-left for defaults\n@if $global-text-direction == 'rtl' {\n $button-margin: 0 0 $global-margin $global-margin !default;\n}\n\n/// transitions for buttons.\n/// @type List\n$button-transition: background-color 0.25s ease-out, color 0.25s ease-out !default;\n\n/// Additional responsive classes for .expanded\n/// @type Boolean\n$button-responsive-expanded: false !default;\n\n// TODO: Document button-base() mixin\n@mixin button-base {\n @include disable-mouse-outline;\n display: inline-block;\n vertical-align: middle;\n margin: $button-margin;\n\n @if (type-of($button-padding) == 'map') {\n @each $size, $padding in $button-padding {\n @include breakpoint($size) {\n padding: $padding;\n }\n }\n }\n @else {\n padding: $button-padding;\n }\n\n border: $button-border;\n border-radius: $button-radius;\n transition: $button-transition;\n font-family: $button-font-family;\n font-size: map-get($button-sizes, default);\n font-weight: $button-font-weight;\n -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes\n line-height: 1;\n text-align: center;\n cursor: pointer;\n}\n\n/// Expands a button to make it full-width.\n/// @param {Boolean} $expand [true] - Set to `true` to enable the expand behavior. Set to `false` to reverse this behavior.\n@mixin button-expand($expand: true) {\n @if $expand {\n display: block;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n }\n @else {\n display: inline-block;\n width: auto;\n margin: $button-margin;\n }\n}\n\n/// Sets the base styles of a hollow or clear button filling according to `$fill`.\n/// See mixin `button-fill-style` for the filling styles.\n/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`. `solid` has no effects.\n@mixin button-fill(\n $fill: $button-fill\n) {\n @if $fill == hollow {\n @include button-hollow;\n }\n @else if $fill == clear {\n @include button-clear;\n }\n}\n\n/// Sets the visual styles of a solid/hollow/clear button filling according to `$fill`.\n/// See mixins `button-style`, `button-hollow-style` and `button-clear-style` for effects of visual styling parameters.\n/// @param {Keyword} $fill [$button-fill] - Type of filling between `hollow` and `clear`.\n/// @param {Color} $background [$button-background] - -\n/// @param {Color} $background-hover [$button-background-hover] - -\n/// @param {Color} $color [$button-color] - -\n@mixin button-fill-style(\n $fill: $button-fill,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color\n) {\n @if $fill == solid {\n @include button-style($background, $background-hover, $color);\n }\n @else if $fill == hollow {\n @include button-hollow-style($background);\n }\n @else if $fill == clear {\n @include button-clear-style($background);\n }\n}\n\n/// Sets the visual style of a button.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n@mixin button-style(\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $background-hover-lightness: $button-background-hover-lightness\n) {\n @if $color == auto {\n $color: color-pick-contrast($background, ($button-color, $button-color-alt));\n }\n\n @if $background-hover == auto {\n $background-hover: scale-color($background, $lightness: $background-hover-lightness);\n }\n\n // Default and disabled states\n &,\n &.disabled, &[disabled],\n &.disabled:hover, &[disabled]:hover,\n &.disabled:focus, &[disabled]:focus {\n background-color: $background;\n color: $color;\n }\n\n &:hover, &:focus {\n background-color: $background-hover;\n color: $color;\n }\n}\n\n/// Sets the base styles of a hollow button.\n/// See mixin `button-hollow-style` for the filling styles.\n@mixin button-hollow {\n &, &.disabled, &[disabled] {\n &, &:hover, &:focus {\n background-color: transparent;\n }\n }\n}\n\n/// Sets the visual style of a hollow button.\n/// @param {Color} $color [$button-background] - Text and border color of the button.\n/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.\n/// @param {Color} $border-width [$button-hollow-border-width] - Border width of the button.\n@mixin button-hollow-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness,\n $border-width: $button-hollow-border-width\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n // Default and disabled states\n &,\n &.disabled, &[disabled],\n &.disabled:hover, &[disabled]:hover,\n &.disabled:focus, &[disabled]:focus {\n border: $border-width solid $color;\n color: $color;\n }\n\n &:hover, &:focus {\n border-color: $color-hover;\n color: $color-hover;\n }\n}\n\n/// Sets the base styles of a clear button.\n/// See mixin `button-clear-style` for the filling styles.\n@mixin button-clear {\n &, &.disabled, &[disabled] {\n &, &:hover, &:focus {\n border-color: transparent;\n background-color: transparent;\n }\n }\n}\n\n/// Sets the visual style of a clear button.\n/// @param {Color} $color [$button-background] - Text color of the button.\n/// @param {Color} $hover-lightness [$button-hollow-hover-lightness] - Color lightness on hover.\n@mixin button-clear-style(\n $color: $button-background,\n $hover-lightness: $button-hollow-hover-lightness\n) {\n $color-hover: scale-color($color, $lightness: $hover-lightness);\n\n // Default and disabled states\n &,\n &.disabled, &[disabled],\n &.disabled:hover, &[disabled]:hover,\n &.disabled:focus, &[disabled]:focus {\n color: $color;\n }\n\n &:hover, &:focus {\n color: $color-hover;\n }\n}\n\n/// Adds disabled styles to a button by fading the element and reseting the cursor.\n/// @param {Number} $opacity [$button-opacity-disabled] - Opacity of the disabled button.\n@mixin button-disabled(\n $opacity: $button-opacity-disabled\n) {\n opacity: $button-opacity-disabled;\n cursor: not-allowed;\n}\n\n/// Adds a dropdown arrow to a button.\n/// @param {Number} $size [0.4em] - Size of the arrow. We recommend using an `em` value so the triangle scales when used inside different sizes of buttons.\n/// @param {Color} $color [white] - Color of the arrow.\n/// @param {Number} $offset [$button-padding] - Distance between the arrow and the text of the button. Defaults to whatever the right padding of a button is.\n@mixin button-dropdown(\n $size: 0.4em,\n $color: $white,\n $offset: get-side($button-padding, right)\n) {\n &::after {\n @include css-triangle($size, $color, down);\n position: relative;\n top: 0.4em; // Aligns the arrow with the text of the button\n\n display: inline-block;\n float: #{$global-right};\n margin-#{$global-left}: $offset;\n }\n}\n\n/// Adds all styles for a button. For more granular control over styles, use the individual button mixins.\n/// @param {Boolean} $expand [false] - Set to `true` to make the button full-width.\n/// @param {Color} $background [$button-background] - Background color of the button.\n/// @param {Color} $background-hover [$button-background-hover] - Background color of the button on hover. Set to `auto` to have the mixin automatically generate a hover color.\n/// @param {Color} $color [$button-color] - Text color of the button. Set to `auto` to automatically generate a color based on the background color.\n/// @param {Keyword} $style [solid] - Set to `hollow` to create a hollow button. The color defined in `$background` will be used as the primary color of the button.\n@mixin button(\n $expand: false,\n $background: $button-background,\n $background-hover: $button-background-hover,\n $color: $button-color,\n $style: $button-fill\n) {\n @include button-base;\n @include button-fill($style);\n @include button-fill-style($style, $background, $background-hover, $color);\n\n @if $expand {\n @include button-expand;\n }\n}\n\n@mixin foundation-button {\n .button {\n @include button($style: none);\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} {\n font-size: $value;\n }\n }\n\n &.expanded { @include button-expand; }\n\n @if $button-responsive-expanded {\n @each $size in $breakpoint-classes {\n @include breakpoint(#{$size} only) {\n &.#{$size}-only-expanded {\n @include button-expand;\n }\n }\n @if $size != $-zf-zero-breakpoint {\n @include breakpoint(#{$size} down) {\n &.#{$size}-down-expanded {\n @include button-expand;\n }\n }\n\n @include breakpoint(#{$size}) {\n &.#{$size}-expanded {\n @include button-expand;\n }\n }\n }\n }\n }\n\n // Solid, hollow & clear styles\n @each $filling in (solid hollow clear) {\n $selector: if($button-fill == $filling, null, '.#{$filling}');\n\n &#{$selector} {\n @include button-fill($filling);\n @include button-fill-style($filling);\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n @include button-fill-style($filling, $color, auto, auto);\n }\n }\n }\n }\n\n // Disabled state\n &.disabled, &[disabled] {\n @include button-disabled;\n }\n\n // Dropdown arrow\n &.dropdown {\n @include button-dropdown;\n\n @if $button-fill == hollow {\n &::after {\n border-top-color: $button-background;\n }\n }\n\n &.hollow, &.clear {\n &::after {\n border-top-color: $button-background;\n }\n\n @each $name, $color in $button-palette {\n &.#{$name} {\n &::after {\n border-top-color: $color;\n }\n }\n }\n }\n }\n\n // Button with dropdown arrow only\n &.arrow-only::after {\n top: -0.1em;\n float: none;\n margin-#{$global-left}: 0;\n }\n }\n\n a.button { // sass-lint:disable-line no-qualifying-elements\n &:hover,\n &:focus {\n text-decoration: none;\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group button-group\n////\n\n/// Margin for button groups.\n/// @type Number\n$buttongroup-margin: 1rem !default;\n\n/// Margin between buttons in a button group.\n/// @type Number\n$buttongroup-spacing: 1px !default;\n\n/// Selector for the buttons inside a button group.\n/// @type String\n$buttongroup-child-selector: '.button' !default;\n\n/// Maximum number of buttons that can be in an even-width button group. (Only needed when $global-flexbox: false;)\n/// @type Number\n$buttongroup-expand-max: 6 !default;\n\n/// Determines if $button-radius is applied to each button or the button group as a whole. Use $global-radius in _settings.scss to change radius.\n/// @type Boolean\n$buttongroup-radius-on-each: true !default;\n\n/// Add styles for a button group container.\n/// @param {String} $child-selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.\n/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.\n@mixin button-group(\n $child-selector: $buttongroup-child-selector,\n $spacing: $buttongroup-spacing\n) {\n @include clearfix;\n margin-bottom: $buttongroup-margin;\n\n @if $global-flexbox {\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n flex-grow: 1;\n\n &::before,\n &::after {\n display: none; // Disable clearfix\n }\n }\n @else {\n font-size: 0;\n }\n\n #{$child-selector} {\n margin: 0;\n margin-#{$global-right}: $spacing;\n margin-bottom: $spacing;\n font-size: map-get($button-sizes, default);\n\n @if $global-flexbox {\n flex: 0 0 auto;\n }\n\n &:last-child {\n margin-#{$global-right}: 0;\n }\n\n @if not $buttongroup-radius-on-each {\n border-radius: 0;\n\n &:first-child {\n border-top-#{$global-left}-radius: $button-radius;\n border-bottom-#{$global-left}-radius: $button-radius;\n }\n\n &:last-child {\n border-top-#{$global-right}-radius: $button-radius;\n border-bottom-#{$global-right}-radius: $button-radius;\n }\n }\n }\n}\n\n/// Make buttons bonded without gap between them. Borders between buttons are merged\n/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.\n@mixin button-group-no-gaps(\n $selector: $buttongroup-child-selector,\n $border-width: $button-hollow-border-width\n) {\n #{$selector} {\n margin-#{$global-right}: rem-calc(-$border-width);\n\n + #{$selector} {\n border-#{$global-left}-color: transparent;\n }\n }\n}\n\n/// Creates a full-width button group, making each button equal width.\n/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside a button group.\n/// @param {Number} $spacing [$buttongroup-spacing] - Spacing between buttons in a button group.\n@mixin button-group-expand(\n $selector: $buttongroup-child-selector,\n $spacing: $buttongroup-spacing,\n $count: null\n) {\n @if not $global-flexbox {\n margin-#{$global-right}: -$spacing;\n\n &::before,\n &::after {\n display: none; // Disable clearfix\n }\n }\n\n #{$selector} {\n @if $global-flexbox {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @else {\n // One child\n &:first-child {\n &:last-child {\n width: calc(100% - #{$spacing});\n }\n }\n\n // Two or more childreen\n @for $i from 2 through $buttongroup-expand-max {\n &:first-child:nth-last-child(#{$i}) {\n &, &:first-child:nth-last-child(#{$i}) ~ #{$selector} {\n display: inline-block;\n width: calc(#{percentage(divide(1, $i))} - #{$spacing});\n margin-#{$global-right}: $spacing;\n\n &:last-child {\n margin-#{$global-right}: $spacing * -$buttongroup-expand-max;\n }\n }\n }\n }\n }\n }\n}\n\n/// Stacks the buttons in a button group.\n/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.\n@mixin button-group-stack(\n $selector: $buttongroup-child-selector\n) {\n @if $global-flexbox {\n flex-wrap: wrap;\n }\n\n #{$selector} {\n @if $global-flexbox {\n flex: 0 0 100%;\n }\n @else {\n width: 100%;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n\n @if not $buttongroup-radius-on-each {\n border-radius: 0;\n\n &:first-child {\n border-top-#{$global-left}-radius: $global-radius;\n border-top-#{$global-right}-radius: $global-radius;\n }\n\n &:last-child {\n border-bottom-#{$global-left}-radius: $global-radius;\n border-bottom-#{$global-right}-radius: $global-radius;\n }\n }\n }\n}\n\n/// Un-stacks the buttons in a button group.\n/// @param {String} $selector [$buttongroup-child-selector] - Selector for the buttons inside the button group.\n@mixin button-group-unstack(\n $selector: $buttongroup-child-selector\n) {\n #{$selector} {\n @if $global-flexbox {\n flex: 0 0 auto;\n }\n @else {\n width: auto;\n }\n margin-bottom: 0;\n\n @if not $buttongroup-radius-on-each {\n &:first-child {\n border-top-#{$global-left}-radius: $global-radius;\n border-top-#{$global-right}-radius: 0;\n border-bottom-#{$global-left}-radius: $global-radius;\n }\n\n &:last-child {\n border-top-#{$global-right}-radius: $global-radius;\n border-bottom-#{$global-right}-radius: $global-radius;\n border-bottom-#{$global-left}-radius: 0;\n }\n }\n\n }\n}\n\n@mixin foundation-button-group {\n .button-group {\n @include button-group;\n\n // Sizes\n @each $size, $value in map-remove($button-sizes, default) {\n &.#{$size} #{$buttongroup-child-selector} {\n font-size: $value;\n }\n }\n\n // Even-width Group\n &.expanded {\n @include button-group-expand;\n }\n\n // Solid, hollow & clear styles\n @each $filling in (solid hollow clear) {\n $base-selector: if($button-fill == $filling, null, '.#{$filling}');\n\n &#{$base-selector} {\n // Do not generate button base styles for the default filling\n @if($button-fill != $filling) {\n #{$buttongroup-child-selector} {\n @include button-fill($filling);\n @include button-fill-style($filling);\n }\n }\n\n @each $name, $color in $button-palette {\n @if($button-fill != $filling) {\n $individual-selector: ' #{$buttongroup-child-selector}.#{$name}';\n &.#{$name} #{$buttongroup-child-selector}, &#{$individual-selector} {\n @include button-fill-style($filling, $color, auto, auto);\n }\n }\n @else {\n &.#{$name} #{$buttongroup-child-selector} {\n @include button-fill-style($filling, $color, auto, auto);\n }\n }\n }\n }\n\n }\n\n &.no-gaps {\n @include button-group-no-gaps;\n }\n\n &.stacked,\n &.stacked-for-small,\n &.stacked-for-medium {\n @include button-group-stack;\n\n &.expanded {\n @include button-group-expand;\n }\n }\n\n &.stacked-for-small {\n @include breakpoint(medium) {\n @include button-group-unstack;\n }\n }\n\n &.stacked-for-medium {\n @include breakpoint(large) {\n @include button-group-unstack;\n }\n }\n\n &.stacked-for-small.expanded {\n @include breakpoint(small only) {\n display: block;\n\n #{$buttongroup-child-selector} {\n display: block;\n margin-#{$global-right}: 0;\n }\n }\n }\n\n &.stacked-for-medium.expanded {\n @include breakpoint(medium down) {\n display: block;\n\n #{$buttongroup-child-selector} {\n display: block;\n margin-#{$global-right}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group close-button\n////\n\n/// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`.\n/// @type List\n$closebutton-position: right top !default;\n\n/// Default z-index for a close button.\n/// @type Number\n$closebutton-z-index: 10 !default;\n\n/// Button size to use as default\n/// @type String\n/// @see $closebutton-size\n/// @see $closebutton-offset-horizontal\n/// @see $closebutton-offset-vertical\n$closebutton-default-size: medium !default;\n\n/// Right (or left) offset(s) for a close button.\n/// @type Number|Map\n$closebutton-offset-horizontal: (\n small: 0.66rem,\n medium: 1rem,\n) !default;\n\n/// Top (or bottom) offset(s) for a close button.\n/// @type Number|Map\n$closebutton-offset-vertical: (\n small: 0.33em,\n medium: 0.5rem,\n) !default;\n\n/// Size(s) of the close button. Used to generate sizing modifiers.\n/// @type Number|Map\n$closebutton-size: (\n small: 1.5em,\n medium: 2em,\n) !default;\n\n/// The line-height of the close button. It affects the spacing of the element.\n/// @type Number\n$closebutton-lineheight: 1 !default;\n\n/// Default color of the close button.\n/// @type Color\n$closebutton-color: $dark-gray !default;\n\n/// Default color of the close button when being hovered on.\n/// @type Color\n$closebutton-color-hover: $black !default;\n\n\n/// Get the size and position for a close button. If the input value is a number, the number is returned. If the input value is a config map and the map has the key `$size`, the value is returned.\n///\n/// @param {Number|Map} $value - A number or map that represents the size or position value(s) of the close button.\n/// @param {Keyword} $size - The size of the close button to use.\n///\n/// @return {Number} The given number or the value found in the map.\n@function -zf-get-size-val($value, $size) {\n // Check if the value is a number\n @if type-of($value) == 'number' {\n // If it is, just return the number\n @return $value;\n }\n\n // Check if the size name exists in the value map\n @else if map-has-key($value, $size) {\n // If it does, return the value\n @return map-get($value, $size);\n }\n}\n\n/// Sets the size and position of a close button.\n/// @param {Keyword} $size [medium] - The size to use. Set to `small` to create a small close button. The 'medium' values defined in `$closebutton-*` variables will be used as the default size and position of the close button.\n@mixin close-button-size($size) {\n $x: nth($closebutton-position, 1);\n $y: nth($closebutton-position, 2);\n\n #{$x}: -zf-get-size-val($closebutton-offset-horizontal, $size);\n #{$y}: -zf-get-size-val($closebutton-offset-vertical, $size);\n font-size: -zf-get-size-val($closebutton-size, $size);\n line-height: -zf-get-size-val($closebutton-lineheight, $size);\n}\n\n/// Adds styles for a close button, using the styles in the settings variables.\n@mixin close-button {\n $x: nth($closebutton-position, 1);\n $y: nth($closebutton-position, 2);\n\n @include disable-mouse-outline;\n position: absolute;\n z-index: $closebutton-z-index;\n color: $closebutton-color;\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $closebutton-color-hover;\n }\n}\n\n@mixin foundation-close-button {\n .close-button {\n // Use by default the placeholder of the default size\n @extend %zf-close-button--#{$closebutton-default-size};\n\n @include close-button;\n\n // Generate a placeholder and a class for each size\n @each $name, $size in $closebutton-size {\n @at-root {\n %zf-close-button--#{$name} {\n @include close-button-size($name);\n }\n }\n\n &.#{$name} {\n @extend %zf-close-button--#{$name};\n }\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group label\n////\n\n/// Default background color for labels.\n/// @type Color\n$label-background: $primary-color !default;\n\n/// Default text color for labels.\n/// @type Color\n$label-color: $white !default;\n\n/// Alternate text color for labels.\n/// @type Color\n$label-color-alt: $black !default;\n\n/// Coloring classes. A map of classes to output in your CSS, like `.secondary`, `.success`, and so on.\n/// @type Map\n$label-palette: $foundation-palette !default;\n\n/// Default font size for labels.\n/// @type Number\n$label-font-size: 0.8rem !default;\n\n/// Default padding inside labels.\n/// @type Number\n$label-padding: 0.33333rem 0.5rem !default;\n\n/// Default radius of labels.\n/// @type Number\n$label-radius: $global-radius !default;\n\n/// Generates base styles for a label.\n@mixin label {\n display: inline-block;\n padding: $label-padding;\n\n border-radius: $label-radius;\n\n font-size: $label-font-size;\n line-height: 1;\n white-space: nowrap;\n cursor: default;\n}\n\n@mixin foundation-label {\n .label {\n @include label;\n\n background: $label-background;\n color: $label-color;\n\n @each $name, $color in $label-palette {\n &.#{$name} {\n background: $color;\n color: color-pick-contrast($color, ($label-color, $label-color-alt));\n }\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n/// Adds styles for a progress bar container.\n@mixin progress-container {\n height: $progress-height;\n margin-bottom: $progress-margin-bottom;\n border-radius: $progress-radius;\n background-color: $progress-background;\n}\n\n/// Adds styles for the inner meter of a progress bar.\n@mixin progress-meter {\n position: relative;\n display: block;\n width: 0%;\n height: 100%;\n background-color: $progress-meter-background;\n\n @if has-value($progress-radius) {\n border-radius: $global-radius;\n }\n}\n\n/// Adds styles for text in the progress meter.\n@mixin progress-meter-text {\n @include absolute-center;\n margin: 0;\n font-size: 0.75rem;\n font-weight: bold;\n color: $white;\n white-space: nowrap;\n\n @if has-value($progress-radius) {\n border-radius: $progress-radius;\n }\n}\n\n@mixin foundation-progress-bar {\n // Progress bar\n .progress {\n @include progress-container;\n\n @each $name, $color in $foundation-palette {\n &.#{$name} {\n .progress-meter {\n background-color: $color;\n }\n }\n }\n }\n\n // Inner meter\n .progress-meter {\n @include progress-meter;\n }\n\n // Inner meter text\n .progress-meter-text {\n @include progress-meter-text;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n// [TODO] Check how plugin confirms disabled or vertical status\n// [TODO] Check if transition: all; is necessary\n\n////\n/// @group slider\n////\n\n/// Default slider width of a vertical slider. (Doesn't apply to the native slider.)\n/// @type Number\n$slider-width-vertical: 0.5rem !default;\n\n/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)\n/// @type Transition\n$slider-transition: all 0.2s ease-in-out !default;\n\n/// Adds the general styles for sliders.\n@mixin slider-container {\n position: relative;\n height: $slider-height;\n margin-top: 1.25rem;\n margin-bottom: 2.25rem;\n\n background-color: $slider-background;\n cursor: pointer;\n user-select: none;\n touch-action: none;\n}\n\n/// Adds the general styles for active fill for sliders.\n@mixin slider-fill {\n position: absolute;\n top: 0;\n left: 0;\n\n display: inline-block;\n max-width: 100%;\n height: $slider-height;\n\n background-color: $slider-fill-background;\n transition: $slider-transition;\n\n &.is-dragging {\n transition: all 0s linear;\n }\n}\n\n/// Adds the general styles for the slider handles.\n@mixin slider-handle {\n @include disable-mouse-outline;\n @include vertical-center;\n left: 0;\n z-index: 1;\n cursor: grab;\n\n display: inline-block;\n width: $slider-handle-width;\n height: $slider-handle-height;\n\n border-radius: $slider-radius;\n background-color: $slider-handle-background;\n transition: $slider-transition;\n touch-action: manipulation;\n\n &:hover {\n background-color: scale-color($slider-handle-background, $lightness: -15%);\n }\n\n &.is-dragging {\n transition: all 0s linear;\n cursor: grabbing;\n }\n}\n\n@mixin slider-disabled {\n opacity: $slider-opacity-disabled;\n cursor: not-allowed;\n}\n\n@mixin slider-vertical {\n display: inline-block;\n width: $slider-width-vertical;\n height: 12.5rem;\n margin: 0 1.25rem;\n transform: scale(1, -1);\n\n .slider-fill {\n top: 0;\n width: $slider-width-vertical;\n max-height: 100%;\n }\n\n .slider-handle {\n position: absolute;\n top: 0;\n left: 50%;\n width: $slider-handle-height;\n height: $slider-handle-width;\n transform: translateX(-50%);\n }\n}\n\n@mixin foundation-slider {\n // Container\n .slider {\n @include slider-container;\n }\n\n // Fill area\n .slider-fill {\n @include slider-fill;\n }\n\n // Draggable handle\n .slider-handle {\n @include slider-handle;\n }\n\n // Disabled state\n .slider.disabled,\n .slider[disabled] {\n @include slider-disabled;\n }\n\n // Vertical slider\n .slider.vertical {\n @include slider-vertical;\n }\n\n // RTL support\n @if $global-text-direction == rtl {\n .slider:not(.vertical) {\n transform: scale(-1, 1);\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group switch\n////\n\n/// Background color of a switch.\n/// @type Color\n$switch-background: $medium-gray !default;\n\n/// Background active color of a switch.\n/// @type Color\n$switch-background-active: $primary-color !default;\n\n/// Height of a switch, with no class applied.\n/// @type Number\n$switch-height: 2rem !default;\n\n/// Height of a switch with .tiny class.\n/// @type Number\n$switch-height-tiny: 1.5rem !default;\n\n/// Height of a switch with .small class.\n/// @type Number\n$switch-height-small: 1.75rem !default;\n\n/// Height of a switch with .large class.\n/// @type Number\n$switch-height-large: 2.5rem !default;\n\n/// Border radius of the switch\n/// @type Number\n$switch-radius: $global-radius !default;\n\n/// border around a modal.\n/// @type Number\n$switch-margin: $global-margin !default;\n\n/// Background color for the switch container and paddle.\n/// @type Color\n$switch-paddle-background: $white !default;\n\n/// Spacing between a switch paddle and the edge of the body.\n/// @type Number\n$switch-paddle-offset: 0.25rem !default;\n\n/// border radius of the switch paddle\n/// @type Number\n$switch-paddle-radius: $global-radius !default;\n\n/// switch transition.\n/// @type Number\n$switch-paddle-transition: all 0.25s ease-out !default;\n\n/// Opacity of a disabled switch.\n/// @type Number\n$switch-opacity-disabled: 0.5 !default;\n\n/// Cursor for a disabled switch.\n/// @type Cursor\n$switch-cursor-disabled: not-allowed !default;\n\n// make them variables\n// ask about accessibility on label\n// change class name for text\n\n/// Adds styles for a switch container. Apply this to a container class.\n@mixin switch-container {\n position: relative;\n margin-bottom: $switch-margin;\n outline: 0;\n\n // These properties cascade down to the switch text\n font-size: rem-calc(14);\n font-weight: bold;\n color: $white;\n\n user-select: none;\n}\n\n/// Adds styles for a switch input. Apply this to an `` within a switch.\n@mixin switch-input {\n position: absolute;\n margin-bottom: 0;\n opacity: 0;\n}\n\n/// Adds styles for the background and paddle of a switch. Apply this to a `