\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;\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;\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////\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 .code-inline {\n @include code-style;\n @include 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 color-adjust: economy;\n }\n // Otherwise, prevent any economy by the browser.\n @else {\n 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 grid\n////\n\n/// Outputs CSS classes for the grid.\n/// @access private\n@mixin foundation-grid(\n $row: 'row',\n $column: 'column',\n $column-row: 'column-row',\n $gutter: 'gutter',\n $push: 'push',\n $pull: 'pull',\n $center: 'centered',\n $uncenter: 'uncentered',\n $collapse: 'collapse',\n $uncollapse: 'uncollapse',\n $offset: 'offset',\n $end: 'end',\n $expanded: 'expanded',\n $block: 'block'\n) {\n // Row\n .#{$row} {\n @include grid-row;\n\n // Collapsing\n &.#{$collapse} {\n > .#{$column} {\n @include grid-col-collapse;\n }\n }\n\n // Nesting\n & .#{$row} {\n @include grid-row-nest($grid-column-gutter);\n\n &.#{$collapse} {\n margin-right: 0;\n margin-left: 0;\n }\n }\n\n // Expanded (full-width) row\n &.#{$expanded} {\n @include grid-row-size(expand);\n\n .#{$row} {\n margin-right: auto;\n margin-left: auto;\n }\n }\n\n &:not(.#{$expanded}) .#{$row} {\n @include grid-row-size(expand);\n }\n\n @if type-of($grid-column-gutter) == 'map' {\n // Static (unresponsive) row gutters\n //\n @each $breakpoint, $value in $grid-column-gutter {\n &.#{$gutter}-#{$breakpoint} {\n > .#{$column} {\n @include grid-col-gutter($value);\n }\n }\n }\n }\n }\n\n // Column\n .#{$column} {\n @include grid-col;\n\n @if $grid-column-align-edge {\n &.#{$end} {\n @include grid-col-end;\n }\n }\n }\n\n // Column row\n // The double .row class is needed to bump up the specificity\n .#{$column}.#{$row}.#{$row} {\n float: none;\n }\n\n // To properly nest a column row, padding and margin is removed\n .#{$row} .#{$column}.#{$row}.#{$row} {\n margin-right: 0;\n margin-left: 0;\n padding-right: 0;\n padding-left: 0;\n }\n\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-column-count {\n // Column width\n .#{$-zf-size}-#{$i} {\n @include grid-col-size($i);\n }\n\n // Source ordering\n @if $i < $grid-column-count {\n @if $push {\n .#{$-zf-size}-#{$push}-#{$i} {\n @include grid-col-pos($i);\n }\n }\n\n @if $pull {\n .#{$-zf-size}-#{$pull}-#{$i} {\n @include grid-col-pos(-$i);\n }\n }\n }\n\n // Offsets\n $o: $i - 1;\n\n @if $offset {\n .#{$-zf-size}-#{$offset}-#{$o} {\n @include grid-col-off($o);\n }\n }\n }\n\n // Block grid\n @for $i from 1 through $block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include grid-layout($i, '.#{$column}');\n }\n }\n\n // Responsive collapsing\n .#{$-zf-size}-#{$collapse} {\n > .#{$column} { @include grid-col-collapse; }\n\n .#{$row} {\n margin-right: 0;\n margin-left: 0;\n }\n }\n\n .#{$expanded}.#{$row} .#{$-zf-size}-#{$collapse}.#{$row} {\n margin-right: 0;\n margin-left: 0;\n }\n\n .#{$-zf-size}-#{$uncollapse} {\n > .#{$column} { @include grid-col-gutter($-zf-size); }\n }\n\n // Positioning\n @if $center {\n .#{$-zf-size}-#{$center} {\n @include grid-col-pos(center);\n }\n }\n\n // Gutter adjustment\n $-gutter-unpos-selector: (\n if($uncenter, '.#{$-zf-size}-#{$uncenter}', null),\n if($push, '.#{$-zf-size}-#{$push}-0', null),\n if($pull, '.#{$-zf-size}-#{$pull}-0', null),\n );\n @if ($uncenter or $push or $pull) {\n #{$-gutter-unpos-selector} {\n @include grid-col-unpos;\n }\n }\n }\n\n // Block grid columns\n .#{$column}-#{$block} {\n @include grid-column-margin;\n }\n\n @if $column == 'column' and has-value($grid-column-alias) {\n .#{$grid-column-alias} {\n // sass-lint:disable-block placeholder-in-extend\n @extend .column;\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group grid\n////\n\n/// Change the behavior of columns defined inside this mixin to use a different column count.\n/// @content\n///\n/// @param {Number} $columns - Number of columns to use.\n/// @param {Boolean} $root [false]\n/// If `false`, selectors inside this mixin will nest inside the parent selector.\n/// If `true`, selectors will not nest.\n@mixin grid-context(\n $columns,\n $root: false\n) {\n // Store the current column count so it can be re-set later\n $old-grid-column-count: $grid-column-count;\n $grid-column-count: $columns !global;\n\n @if $root {\n @at-root { @content; }\n }\n @else {\n @content;\n }\n\n // Restore the old column count\n $grid-column-count: $old-grid-column-count !global;\n}\n\n/// Creates a grid row.\n/// @content\n///\n/// @param {Number} $columns [null] - Column count for this row. `null` will use the default column count.\n/// @param {Keywords} $behavior [null]\n/// Modifications to the default grid styles. `nest` indicates the row will be placed inside another row. `collapse` indicates that the columns inside this row will not have padding. `nest collapse` combines both behaviors.\n/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.\n/// @param {Boolean} $cf [true] - Whether or not to include a clearfix.\n/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.\n@mixin grid-row(\n $columns: null,\n $behavior: null,\n $size: $grid-row-width,\n $cf: true,\n $gutters: $grid-column-gutter\n) {\n $margin: auto;\n\n @if index($behavior, nest) != null {\n @include grid-row-nest($gutters);\n\n @if index($behavior, collapse) != null {\n margin-right: 0;\n margin-left: 0;\n }\n }\n @else {\n @include grid-row-size($size);\n margin-right: auto;\n margin-left: auto;\n }\n\n @if $cf {\n @include clearfix;\n }\n\n @if $columns != null {\n @include grid-context($columns) {\n @content;\n }\n }\n}\n\n/// Inverts the margins of a row to nest it inside of a column.\n///\n/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use when inverting margins. Responsive gutter settings by default.\n@mixin grid-row-nest($gutters: $grid-column-gutter) {\n @include -zf-each-breakpoint {\n $margin: rem-calc(-zf-get-bp-val($gutters, $-zf-size)) / 2 * -1;\n\n margin-right: $margin;\n margin-left: $margin;\n }\n}\n\n/// Set a grid row size\n///\n/// @param {Keyword|Number} $size [$grid-row-width] Maximum size of the row. Set to `expand` to make the row taking the full width.\n@mixin grid-row-size($size: $grid-row-width) {\n @if $size == expand {\n $size: none;\n }\n\n max-width: $size;\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group grid\n////\n\n/// Set the gutters on a column\n/// @param {Number|Keyword} $gutter [auto]\n/// Spacing between columns, accepts multiple values:\n/// - A single value will make the gutter that exact size.\n/// - A breakpoint name will make the gutter the corresponding size in the $gutters map.\n/// - \"auto\" will make the gutter responsive, using the $gutters map values.\n/// @param {Number|Map} $gutters [$grid-column-gutter] - Gutter map or single value to use. Responsive gutter settings by default.\n@mixin grid-column-gutter(\n $gutter: auto,\n $gutters: $grid-column-gutter\n) {\n @include -zf-breakpoint-value($gutter, $gutters) {\n $padding: rem-calc($-zf-bp-value) / 2;\n\n padding-right: $padding;\n padding-left: $padding;\n }\n}\n\n/// Collapse the gutters on a column by removing the padding. **Note:** only use this mixin within a breakpoint. To collapse a column's gutters on all screen sizes, use the `$gutter` parameter of the `grid-column()` mixin instead.\n@mixin grid-column-collapse {\n @include grid-column-gutter(0);\n}\n\n/// Shorthand for `grid-column-gutter()`.\n/// @alias grid-column-gutter\n@mixin grid-col-gutter(\n $gutter: auto,\n $gutters: $grid-column-gutter\n) {\n @include grid-column-gutter($gutter, $gutters);\n}\n\n/// Shorthand for `grid-column-collapse()`.\n/// @alias grid-column-collapse\n@mixin grid-col-collapse {\n @include grid-column-collapse;\n}\n\n/// Sets bottom margin on grid columns to match gutters\n/// @param {Number|Keyword} $margin [auto]\n/// The bottom margin on grid columns, accepts multiple values:\n/// - A single value will make the margin that exact size.\n/// - A breakpoint name will make the margin the corresponding size in the $margins map.\n/// - \"auto\" will make the margin responsive, using the $margins map values.\n/// @param {Number|Map} $margins [$grid-column-gutter] - Map or single value to use. Responsive gutter settings by default.\n@mixin grid-column-margin (\n $margin: auto,\n $margins: $grid-column-gutter\n) {\n @include -zf-breakpoint-value($margin, $margins) {\n $margin-bottom: rem-calc($-zf-bp-value);\n margin-bottom: $margin-bottom;\n\n > :last-child {\n margin-bottom: 0;\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group grid\n////\n\n/// Set the width of a grid column.\n///\n/// @param {Number|List} $width [$grid-column-count] - Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`.\n@mixin grid-column-size(\n $columns: $grid-column-count\n) {\n width: grid-column($columns);\n}\n\n/// Shorthand for `grid-column-size()`.\n/// @alias grid-column-size\n@mixin grid-col-size(\n $columns: $grid-column-count\n) {\n @include grid-column-size($columns);\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Finds the greatest common divisor of two integers.\n///\n/// @param {Number} $a - First number to compare.\n/// @param {Number} $b - Second number to compare.\n///\n/// @returns {Number} The greatest common divisor.\n@function gcd($a, $b) {\n // From: http://rosettacode.org/wiki/Greatest_common_divisor#JavaScript\n @if ($b != 0) {\n @return gcd($b, $a % $b);\n }\n @else {\n @return abs($a);\n }\n}\n\n/// Handles decimal exponents by trying to convert them into a fraction and then use a nth-root-algorithm for parts of the calculation\n///\n/// @param {Number} $base - The base number.\n/// @param {Number} $exponent - The exponent.\n///\n/// @returns {Number} The product of the exponentiation.\n@function pow($base, $exponent, $prec: 16) {\n @if (floor($exponent) != $exponent) {\n $prec2 : pow(10, $prec);\n $exponent: round($exponent * $prec2);\n $denominator: gcd($exponent, $prec2);\n @return nth-root(pow($base, $exponent / $denominator), $prec2 / $denominator, $prec);\n }\n\n $value: $base;\n @if $exponent > 1 {\n @for $i from 2 through $exponent {\n $value: $value * $base;\n }\n }\n @else if $exponent < 1 {\n @for $i from 0 through -$exponent {\n $value: $value / $base;\n }\n }\n\n @return $value;\n}\n\n@function nth-root($num, $n: 2, $prec: 12) {\n // From: http://rosettacode.org/wiki/Nth_root#JavaScript\n $x: 1;\n\n @for $i from 0 through $prec {\n $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));\n }\n\n @return $x;\n}\n\n/// Calculates the height as a percentage of the width for a given ratio.\n/// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`.\n/// @return {Number} A percentage value for the height relative to the width of a responsive container.\n@function ratio-to-percentage($ratio) {\n $w: nth($ratio, 1);\n $h: nth($ratio, 3);\n @return $h / $w * 100%;\n}\n\n/// Parse the given `$fraction` to numerators and denumerators.\n///\n/// @param {*} $fraction - Value representing a fraction to parse. It can be formatted as `50%`, `1 of 2`, `1/2` or `50` (no denominator would be returned).\n///\n/// @return {List} List of parsed values with numerator at first position and denumerator as second. These values may be null.\n@function zf-parse-fraction($fraction) {\n\n @if type-of($fraction) == 'number' {\n // \"50%\"\n @if unit($fraction) == '%' {\n @return (strip-unit($fraction), 100);\n }\n @else if (unit($fraction) == '') {\n // \"0.5\"\n @if $fraction < 1 {\n @return ($fraction * 100, 100);\n }\n // \"50\"\n @else {\n @return ($fraction, null);\n }\n }\n }\n\n @else if type-of($fraction) == 'list' {\n // \"50 of 100\", \"50/100\"...\n @if length($fraction) == 3\n and type-of(nth($fraction, 1) == 'number')\n and type-of(nth($fraction, 3) == 'number') {\n @return (nth($fraction, 1), nth($fraction, 3));\n }\n }\n\n @return (null, null);\n}\n\n/// Returns whether the given `$value` represents a fraction. Supports formats like `50%`, `1 of 2`, `1 per 2` or `1/2`.\n///\n/// @param {*} $value - Value to test.\n/// @param {Boolean} $allow-no-denominator [false] - If `true`, simple numbers without denominators like `50` are supported.\n///\n/// @return {Boolean} `true` if `$value` represents a fraction, `false` otherwise.\n@function zf-is-fraction($value, $allow-no-denominator: false) {\n $parsed: zf-parse-fraction($value);\n @return not(nth($parsed, 1) == null\n or (nth($parsed, 2) == null and $allow-no-denominator == false));\n}\n\n/// Calculate a percentage from a given fraction.\n///\n/// @param {Number|List} $fraction - Value representing a fraction to use to calculate the percentage, formatted as `50` (relative to `$denominator`), `50%`, `1 of 2` or `1/2`.\n/// @param {Number|List} $denominator - Default value to use as denominator when `$fraction` represents an absolute value.\n@function fraction-to-percentage(\n $fraction,\n $denominator: null\n) {\n $parsed: zf-parse-fraction($fraction);\n $parsed-nominator: nth($parsed, 1);\n $parsed-denominator: nth($parsed, 2);\n\n @if $parsed-nominator == null {\n @error 'Wrong syntax for \"fraction-to-percentage()\". Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n @if $parsed-denominator == null {\n @if type-of($denominator) == 'number' {\n $parsed-denominator: $denominator;\n }\n @else {\n @error 'Error with \"fraction-to-percentage()\". A default \"$denominator\" is required to support absolute values';\n }\n }\n\n @return percentage($parsed-nominator / $parsed-denominator);\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group grid\n////\n\n/// Calculates the width of a column based on a number of factors.\n///\n/// @param {Number|List} $columns\n/// Width of the column. Accepts multiple values:\n/// - A percentage value will make the column that exact size.\n/// - A single digit will make the column span that number of columns wide, taking into account the column count of the parent row.\n/// - A list of the format \"x of y\" (without quotes) will make a column that is *x* columns wide, assuming *y* total columns for the parent.\n///\n/// @returns {Number} A calculated percentage value.\n@function grid-column($columns) {\n @return fraction-to-percentage($columns, $denominator: $grid-column-count);\n}\n\n/// Creates a grid column.\n///\n/// @param {Mixed} $columns [$grid-column-count] - Width of the column. Refer to the `grid-column()` function to see possible values.\n/// @param {Mixed} $gutters [$grid-column-gutter] - Spacing between columns. Refer to the `grid-column-gutter()` function to see possible values.\n@mixin grid-column(\n $columns: $grid-column-count,\n $gutters: $grid-column-gutter\n) {\n @include grid-column-size($columns);\n float: $global-left;\n\n // Gutters\n @include grid-column-gutter($gutters: $gutters);\n\n // Position\n @include grid-col-pos(auto);\n}\n\n/// Creates a grid column row. This is the equivalent of adding `.row` and `.column` to the same element.\n///\n/// @param {Mixed} $gutters [$grid-column-gutter] - Width of the gutters on either side of the column row. Refer to the `grid-column-gutter()` function to see possible values.\n@mixin grid-column-row(\n $gutters: $grid-column-gutter\n) {\n @include grid-row;\n @include grid-column($gutters: $gutters);\n\n &,\n &:last-child {\n float: none;\n }\n}\n\n/// Shorthand for `grid-column()`.\n/// @alias grid-column\n@function grid-col(\n $columns: $grid-column-count\n) {\n @return grid-column($columns);\n}\n\n/// Shorthand for `grid-column()`.\n/// @alias grid-column\n@mixin grid-col(\n $columns: $grid-column-count,\n $gutters: $grid-column-gutter\n) {\n @include grid-column($columns, $gutters);\n}\n\n/// Shorthand for `grid-column-row()`.\n/// @alias grid-column-row\n@mixin grid-col-row(\n $gutters: $grid-column-gutter\n) {\n @include grid-column-row($gutters);\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group grid\n////\n\n/// Reposition a column.\n///\n/// @param {Number|Keyword} $position - It can be:\n/// * A number: The column will move equal to the width of the column count\n/// specified. A positive number will push the column to the right, while\n/// a negative number will pull it to the left.\n/// * `center`: Column will be centered\n/// * `auto`: Column will be pushed to the left (or to the right for the last column).\n@mixin grid-column-position($position) {\n // Auto positioning\n @if $position == auto {\n &, &:last-child:not(:first-child) {\n float: $global-left;\n clear: none;\n }\n\n // Last column alignment\n @if $grid-column-align-edge {\n &:last-child:not(:first-child) {\n float: $global-right;\n }\n }\n }\n\n // Push/pull\n @else if type-of($position) == 'number' {\n $offset: percentage($position / $grid-column-count);\n\n position: relative;\n #{$global-left}: $offset;\n }\n\n // Center positioning\n @else if $position == center {\n &, &:last-child:not(:first-child) {\n float: none;\n clear: both;\n }\n margin-right: auto;\n margin-left: auto;\n }\n\n @else {\n @warn 'Wrong syntax for grid-column-position(). Enter a positive or negative number, \"center\" or \"auto\".';\n }\n}\n\n/// Reset a position definition.\n@mixin grid-column-unposition {\n @include grid-column-position(auto);\n position: static;\n margin-right: 0;\n margin-left: 0;\n}\n\n/// Offsets a column to the right by `$n` columns.\n/// @param {Number|List} $n - Width to offset by. You can pass in any value accepted by the `grid-column()` mixin, such as `6`, `50%`, or `1 of 2`.\n@mixin grid-column-offset($n) {\n margin-#{$global-left}: grid-column($n);\n}\n\n/// Disable the default behavior of the last column in a row aligning to the opposite edge.\n@mixin grid-column-end {\n // This extra specificity is required for the property to be applied\n &:last-child:last-child {\n float: $global-left;\n }\n}\n\n/// Shorthand for `grid-column-position()`.\n/// @alias grid-column-position\n@mixin grid-col-pos($position) {\n @include grid-column-position($position);\n}\n\n/// Shorthand for `grid-column-unposition()`.\n/// @alias grid-column-unposition\n@mixin grid-col-unpos {\n @include grid-column-unposition;\n}\n\n/// Shorthand for `grid-column-offset()`.\n/// @alias grid-column-offset\n@mixin grid-col-off($n) {\n @include grid-column-offset($n);\n}\n\n/// Shorthand for `grid-column-end()`.\n/// @alias grid-column-end\n@mixin grid-col-end {\n @include grid-column-end;\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group 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 ['.column'] - Selector(s) to use for child elements.\n/// @param {Number|List} $gutter\n/// The gutter to apply to child elements. Accepts multiple values:\n/// - $grid-column-gutter will use the values in the $grid-column-gutter map, including breakpoint sizes.\n/// - A fixed numeric value will apply this gutter to all breakpoints.\n@mixin grid-layout(\n $n,\n $selector: '.column',\n $gutter: null\n) {\n & > #{$selector} {\n float: $global-left;\n width: percentage(1/$n);\n\n // If a $gutter value is passed\n @if($gutter) {\n // Gutters\n @if type-of($gutter) == 'map' {\n @each $breakpoint, $value in $gutter {\n $padding: rem-calc($value) / 2;\n\n @include breakpoint($breakpoint) {\n padding-right: $padding;\n padding-left: $padding;\n }\n }\n }\n @else if type-of($gutter) == 'number' and strip-unit($gutter) > 0 {\n $padding: rem-calc($gutter) / 2;\n padding-right: $padding;\n padding-left: $padding;\n }\n }\n\n &:nth-of-type(1n) {\n clear: none;\n }\n\n &:nth-of-type(#{$n}n+1) {\n clear: both;\n }\n\n &:last-child {\n float: $global-left;\n }\n }\n}\n\n/// Adds extra CSS to block grid children so the last items in the row center automatically. Apply this to the columns, not the row.\n///\n/// @param {Number} $n - Number of items that appear in each row.\n@mixin grid-layout-center-last($n) {\n @for $i from 1 to $n {\n @if $i == 1 {\n &:nth-child(#{$n}n+1):last-child {\n margin-left: (100 - 100/$n * $i) / 2 * 1%;\n }\n }\n @else {\n &:nth-child(#{$n}n+1):nth-last-child(#{$i}) {\n margin-left: (100 - 100/$n * $i) / 2 * 1%;\n }\n }\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 margin-right: 0;\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(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 margin-bottom: 0;\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 $individual-selector: if($button-fill == $filling, null, ' #{$buttongroup-child-selector}.#{$name}');\n\n &.#{$name} #{$buttongroup-child-selector}, #{$individual-selector} {\n @include button-fill-style($filling, $color, auto, auto);\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 @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 // Use by default the placeholder of the default size\n @extend %zf-close-button--#{$closebutton-default-size};\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////\n/// @group progress-bar\n////\n\n/// Height of a progress bar.\n/// @type Number\n$progress-height: 1rem !default;\n\n/// Background color of a progress bar.\n/// @type Color\n$progress-background: $medium-gray !default;\n\n/// Bottom margin of a progress bar.\n/// @type Number\n$progress-margin-bottom: $global-margin !default;\n\n/// Default color of a progress bar's meter.\n/// @type Color\n$progress-meter-background: $primary-color !default;\n\n/// Default radius of a progress bar.\n/// @type Number\n$progress-radius: $global-radius !default;\n\n@mixin foundation-progress-element {\n progress {\n display: block;\n width: 100%;\n height: $progress-height;\n margin-bottom: $progress-margin-bottom;\n\n appearance: none;\n\n @if has-value($progress-radius) {\n border-radius: $progress-radius;\n }\n\n // For Firefox\n border: 0;\n background: $progress-background;\n\n &::-webkit-progress-bar {\n background: $progress-background;\n\n @if has-value($progress-radius) {\n border-radius: $progress-radius;\n }\n }\n\n &::-webkit-progress-value {\n background: $progress-meter-background;\n\n @if has-value($progress-radius) {\n border-radius: $progress-radius;\n }\n }\n\n &::-moz-progress-bar {\n background: $progress-meter-background;\n\n @if has-value($progress-radius) {\n border-radius: $progress-radius;\n }\n }\n\n @each $name, $color in $foundation-palette {\n &.#{$name} {\n // Internet Explorer sets the fill with color\n color: $color;\n\n &::-webkit-progress-value {\n background: $color;\n }\n\n &::-moz-progress-bar {\n background: $color;\n }\n }\n }\n\n // For IE and Edge\n &::-ms-fill { // sass-lint:disable-line no-vendor-prefixes\n @if has-value($progress-radius) {\n border-radius: $progress-radius;\n }\n\n border: 0;\n }\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\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 }\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 slider\n////\n\n/// Default height of the slider.\n/// @type Number\n$slider-height: 0.5rem !default;\n\n/// Default background color of the slider's track.\n/// @type Color\n$slider-background: $light-gray !default;\n\n/// Default color of the active fill color of the slider.\n/// @type Color\n$slider-fill-background: $medium-gray !default;\n\n/// Default height of the handle of the slider.\n/// @type Number\n$slider-handle-height: 1.4rem !default;\n\n/// Default width of the handle of the slider.\n/// @type Number\n$slider-handle-width: 1.4rem !default;\n\n/// Default color of the handle for the slider.\n/// @type Color\n$slider-handle-background: $primary-color !default;\n\n/// Default fade amount of a disabled slider.\n/// @type Number\n$slider-opacity-disabled: 0.25 !default;\n\n/// Default radius for slider.\n/// @type Number\n$slider-radius: $global-radius !default;\n\n@mixin foundation-range-input {\n input[type='range'] { // sass-lint:disable-line no-qualifying-elements\n $margin: ($slider-handle-height - $slider-height) / 2;\n\n display: block;\n width: 100%;\n height: auto;\n margin-top: $margin;\n margin-bottom: $margin;\n\n appearance: none;\n border: 0;\n line-height: 1;\n cursor: pointer;\n\n @if has-value($slider-radius) {\n border-radius: $slider-radius;\n }\n\n &:focus {\n outline: 0;\n }\n\n &[disabled] {\n opacity: $slider-opacity-disabled;\n }\n\n // sass-lint:disable no-vendor-prefix\n\n // Chrome/Safari\n &::-webkit-slider-runnable-track {\n height: $slider-height;\n background: $slider-background;\n }\n\n &::-webkit-slider-thumb {\n width: $slider-handle-width;\n height: $slider-handle-height;\n margin-top: -$margin;\n\n -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes\n background: $slider-handle-background;\n\n @if has-value($slider-radius) {\n border-radius: $slider-radius;\n }\n }\n\n // Firefox\n &::-moz-range-track {\n height: $slider-height;\n -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes\n background: $slider-background;\n }\n\n &::-moz-range-thumb {\n width: $slider-handle-width;\n height: $slider-handle-height;\n margin-top: -$margin;\n\n -moz-appearance: none; // sass-lint:disable-line no-vendor-prefixes\n background: $slider-handle-background;\n\n @if has-value($slider-radius) {\n border-radius: $slider-radius;\n }\n }\n\n // Internet Explorer\n &::-ms-track {\n height: $slider-height;\n\n border: 0;\n border-top: $margin solid $body-background;\n border-bottom: $margin solid $body-background;\n background: $slider-background;\n\n overflow: visible;\n color: transparent;\n }\n\n &::-ms-thumb {\n width: $slider-handle-width;\n height: $slider-handle-height;\n border: 0;\n background: $slider-handle-background;\n\n @if has-value($slider-radius) {\n border-radius: $slider-radius;\n }\n }\n\n &::-ms-fill-lower {\n background: $slider-fill-background;\n }\n\n &::-ms-fill-upper {\n background: $slider-background;\n }\n\n @at-root {\n output {\n vertical-align: middle;\n margin-left: 0.5em;\n line-height: $slider-handle-height;\n }\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: .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 `