styles created by most browsers\n button {\n @include disable-mouse-outline;\n padding: 0;\n appearance: none;\n border: 0;\n border-radius: $global-radius;\n background: transparent;\n line-height: 1;\n cursor: $global-button-cursor;\n }\n\n // Prevent text overflow on pre\n pre {\n overflow: auto;\n }\n\n // Make reset inherit font-family instead of settings sans-serif\n button,\n input,\n optgroup,\n select,\n textarea {\n font-family: inherit;\n }\n\n // Internal classes to show/hide elements in JavaScript\n .is-visible {\n display: block !important;\n }\n\n .is-hidden {\n display: none !important;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n$global-font-size: 100% !default;\n\n/// Removes the unit (e.g. px, em, rem) from a value, returning the number only.\n///\n/// @param {Number} $num - Number to strip unit from.\n///\n/// @returns {Number} The same number, sans unit.\n@function strip-unit($num) {\n @return $num / ($num * 0 + 1);\n}\n\n/// Converts one or more pixel values into matching rem values.\n///\n/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses.\n/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$global-font-size` variable as the base.\n///\n/// @returns {List} A list of converted values.\n@function rem-calc($values, $base: null) {\n $rem-values: ();\n $count: length($values);\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // If the base font size is a %, then multiply it by 16px\n // This is because 100% font size = 16px in most all browsers\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n // Using rem as base allows correct scaling\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if $count == 1 {\n @return -zf-to-rem($values, $base);\n }\n\n @for $i from 1 through $count {\n $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));\n }\n\n @return $rem-values;\n}\n\n// Converts a unitless, pixel, or rem value to em, for use in breakpoints.\n@function -zf-bp-to-em($value) {\n // Pixel and unitless values are converted to rems\n @if unit($value) == 'px' or unitless($value) {\n $value: rem-calc($value, $base: 16px);\n }\n\n // Then the value is converted to ems\n @return strip-unit($value) * 1em;\n}\n\n/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable.\n/// @access private\n///\n/// @param {Number} $value - Pixel value to convert.\n/// @param {Number} $base [null] - Base for pixel conversion.\n///\n/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is.\n@function -zf-to-rem($value, $base: null) {\n // Check if the value is a number\n @if type-of($value) != 'number' {\n @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';\n @return $value;\n }\n\n // Transform em into rem if someone hands over 'em's\n @if unit($value) == 'em' {\n $value: strip-unit($value) * 1rem;\n }\n\n // Calculate rem if units for $value is not rem or em\n @if unit($value) != 'rem' {\n $value: strip-unit($value) / strip-unit($base) * 1rem;\n }\n\n // Turn 0rem into 0\n @if $value == 0rem {\n $value: 0;\n }\n\n @return $value;\n}\n\n/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.\n///\n/// @param {Number} $value - Value to convert to a unitless line height\n/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size\n///\n/// @return {Number} - Unitless number\n@function unitless-calc($value, $base: null) {\n\n // If no base is defined, defer to the global font size\n @if $base == null {\n $base: $global-font-size;\n }\n\n // First, lets convert our $base to pixels\n\n // If the base font size is a %, then multiply it by 16px\n @if unit($base) == '%' {\n $base: ($base / 100%) * 16px;\n }\n\n @if unit($base) == 'rem' {\n $base: strip-unit($base) * 16px;\n }\n\n @if unit($base) == 'em' {\n $base: strip-unit($base) * 16px;\n }\n\n // Now let's convert our value to pixels too\n @if unit($value) == '%' {\n $value: ($value / 100%) * $base;\n }\n\n @if unit($value) == 'rem' {\n $value: strip-unit($value) * $base;\n }\n\n @if unit($value) == 'em' {\n $value: strip-unit($value) * $base;\n }\n\n // 'px'\n @if unit($value) == 'px' {\n @return strip-unit($value) / strip-unit($base);\n }\n\n // assume that line-heights greater than 10 are meant to be absolute in 'px'\n @if unitless($value) and ($value > 10) {\n @return $value / strip-unit($base);\n }\n\n @return $value;\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group functions\n////\n\n/// Creates an inner box-shadow for only one side\n///\n/// @param {Keyword} $side - Side the shadow is supposed to appear. Can be `top`, `left`, `right` or `bottom`.\n/// @param {Number} $size - Width for the target side.\n/// @param {Color} $color - Color of the shadow.\n@mixin inner-side-shadow(\n $side: bottom,\n $size: 20px,\n $color: rgba($black, 0.25)\n) {\n\n $helper: round($size * 0.65);\n\n @if ($side == top) {\n box-shadow: inset 0 $helper $size (-1)*$helper $color;\n } @else if ($side == left) {\n box-shadow: inset $helper 0 $size (-1)*$helper $color;\n } @else if ($side == right) {\n box-shadow: inset (-1)*$helper 0 $size (-1)*$helper $color;\n } @else if ($side == bottom) {\n box-shadow: inset 0 (-1)*$helper $size (-1)*$helper $color;\n }\n}\n\n/// Creates a CSS triangle, which can be used for dropdown arrows, dropdown pips, and more. Use this mixin inside a `&::before` or `&::after` selector, to attach the triangle to an existing element.\n///\n/// @param {Number} $triangle-size - Width of the triangle.\n/// @param {Color} $triangle-color - Color of the triangle.\n/// @param {Keyword} $triangle-direction - Direction the triangle points. Can be `up`, `right`, `down`, or `left`.\n@mixin css-triangle(\n $triangle-size,\n $triangle-color,\n $triangle-direction\n) {\n display: block;\n width: 0;\n height: 0;\n\n border: inset $triangle-size;\n\n content: '';\n\n @if ($triangle-direction == down) {\n border-bottom-width: 0;\n border-top-style: solid;\n border-color: $triangle-color transparent transparent;\n }\n @if ($triangle-direction == up) {\n border-top-width: 0;\n border-bottom-style: solid;\n border-color: transparent transparent $triangle-color;\n }\n @if ($triangle-direction == right) {\n border-right-width: 0;\n border-left-style: solid;\n border-color: transparent transparent transparent $triangle-color;\n }\n @if ($triangle-direction == left) {\n border-left-width: 0;\n border-right-style: solid;\n border-color: transparent $triangle-color transparent transparent;\n }\n}\n\n/// Creates a menu icon with a set width, height, number of bars, and colors. The mixin uses the height of the icon and the weight of the bars to determine spacing.
\n///\n/// @param {Color} $color [$black] - Color to use for the icon.\n/// @param {Color} $color-hover [$dark-gray] - Color to use when the icon is hovered over.\n/// @param {Number} $width [20px] - Width of the icon.\n/// @param {Number} $height [16px] - Height of the icon.\n/// @param {Number} $weight [2px] - Height of individual bars in the icon.\n/// @param {Number} $bars [3] - Number of bars in the icon.\n@mixin hamburger(\n $color: $black,\n $color-hover: $dark-gray,\n $width: 20px,\n $height: 16px,\n $weight: 2px,\n $bars: 3\n) {\n // box-shadow CSS output\n $shadow: ();\n $hover-shadow: ();\n\n // Spacing between bars is calculated based on the total height of the icon and the weight of each bar\n $spacing: ($height - ($weight * $bars)) / ($bars - 1);\n\n @if unit($spacing) == 'px' {\n $spacing: floor($spacing);\n }\n\n @for $i from 2 through $bars {\n $offset: ($weight + $spacing) * ($i - 1);\n $shadow: append($shadow, 0 $offset 0 $color, comma);\n }\n\n // Icon container\n position: relative;\n display: inline-block;\n vertical-align: middle;\n width: $width;\n height: $height;\n cursor: pointer;\n\n // Icon bars\n &::after {\n position: absolute;\n top: 0;\n left: 0;\n\n display: block;\n width: 100%;\n height: $weight;\n\n background: $color;\n box-shadow: $shadow;\n\n content: '';\n }\n\n // Hover state\n @if $color-hover {\n // Generate CSS\n @for $i from 2 through $bars {\n $offset: ($weight + $spacing) * ($i - 1);\n $hover-shadow: append($hover-shadow, 0 $offset 0 $color-hover, comma);\n }\n\n &:hover::after {\n background: $color-hover;\n box-shadow: $hover-shadow;\n }\n }\n}\n\n/// Adds a downward-facing triangle as a background image to an element. The image is formatted as an SVG, making it easy to change the color. Because Internet Explorer doesn't support encoded SVGs as background images, a PNG fallback is also included.\n/// There are two PNG fallbacks: a black triangle and a white triangle. The one used depends on the lightness of the input color.\n///\n/// @param {Color} $color [$black] - Color to use for the triangle.\n@mixin background-triangle($color: $black) {\n $rgb: 'rgb%28#{round(red($color))}, #{round(green($color))}, #{round(blue($color))}%29';\n\n background-image: url(\"data:image/svg+xml;utf8, \");\n\n @media screen and (min-width:0\\0) {\n @if lightness($color) < 60% {\n // White triangle\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIpJREFUeNrEkckNgDAMBBfRkEt0ObRBBdsGXUDgmQfK4XhH2m8czQAAy27R3tsw4Qfe2x8uOO6oYLb6GlOor3GF+swURAOmUJ+RwtEJs9WvTGEYxBXqI1MQAZhCfUQKRzDMVj+TwrAIV6jvSUEkYAr1LSkcyTBb/V+KYfX7xAeusq3sLDtGH3kEGACPWIflNZfhRQAAAABJRU5ErkJggg==');\n }\n @else {\n // Black triangle\n background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNrEllsOhCAMRVszC9IlzU7KCmVHTJsoMWYMUtpyv9BgbuXQB5ZSdgBYYY4ycgBivk8KYFsQMfMiTTBP4o3nUzCKzOabLJbLy2/g31evGkAginR4/ZegKH5qX3bJCscA3t0x3kgO5tQFyhhFf50xRqFLbyMUNJQzgyjGS/wgCpvKqkRBpuWrE4V9d+1E4dPUXqIg107SQOE/2DRQxMwTDygIInVDET9T3lCoj/6j/VCmGjZOl2lKpZ8AAwDQP7zIimDGFQAAAABJRU5ErkJggg==');\n }\n }\n}\n\n/// Applies the micro clearfix hack popularized by Nicolas Gallagher. Include this mixin on a container if its children are all floated, to give the container a proper height.\n/// The clearfix is augmented with specific styles to prevent borders in flexbox environments\n/// @link http://nicolasgallagher.com/micro-clearfix-hack/ Micro Clearfix Hack\n/// @link http://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/ Flexbox fix\n@mixin clearfix {\n &::before,\n &::after {\n display: table;\n content: ' ';\n\n @if $global-flexbox {\n flex-basis: 0;\n order: 1;\n }\n }\n\n &::after {\n clear: both;\n }\n}\n\n/// Adds CSS for a \"quantity query\" selector that automatically sizes elements based on how many there are inside a container.\n/// @link http://alistapart.com/article/quantity-queries-for-css Quantity Queries for CSS\n///\n/// @param {Number} $max - Maximum number of items to detect. The higher this number is, the more CSS that's required to cover each number of items.\n/// @param {Keyword} $elem [li] - Tag to use for sibling selectors.\n@mixin auto-width($max, $elem: li) {\n @for $i from 2 through $max {\n &:nth-last-child(#{$i}):first-child,\n &:nth-last-child(#{$i}):first-child ~ #{$elem} {\n width: percentage(1 / $i);\n }\n }\n}\n\n/// Removes the focus ring around an element when a mouse input is detected.\n@mixin disable-mouse-outline {\n [data-whatinput='mouse'] & {\n outline: 0;\n }\n}\n\n/// Makes an element visually hidden, but still accessible to keyboards and assistive devices.\n/// @link http://snook.ca/archives/html_and_css/hiding-content-for-accessibility Hiding Content for Accessibility\n/// @link http://hugogiraudel.com/2016/10/13/css-hide-and-seek/\n///\n/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties\n@mixin element-invisible(\n $enforce: true\n) {\n $important: if($enforce, '!important', null);\n\n position: absolute #{$important};\n width: 1px #{$important};\n height: 1px #{$important};\n padding: 0 #{$important};\n overflow: hidden #{$important};\n clip: rect(0,0,0,0) #{$important};\n white-space: nowrap #{$important};\n border: 0 #{$important};\n}\n\n/// Reverses the CSS output created by the `element-invisible()` mixin.\n/// @param {Boolean} $enforce - If `true`, use `!important` on applied properties\n@mixin element-invisible-off(\n $enforce: true\n) {\n $important: if($enforce, '!important', null);\n\n position: static #{$important};\n width: auto #{$important};\n height: auto #{$important};\n overflow: visible #{$important};\n clip: auto #{$important};\n white-space: normal #{$important};\n}\n\n/// Vertically centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin vertical-center {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n}\n\n/// Horizontally centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin horizontal-center {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n}\n\n/// Absolutely centers the element inside of its first non-static parent,\n/// @link http://www.sitepoint.com/centering-with-sass/ Centering With Sass\n@mixin absolute-center {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.\n///\n/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.\n/// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.\n@mixin -zf-each-breakpoint(\n $small: true,\n $auto-insert-breakpoints: true\n) {\n @include -zf-each-breakpoint-in(auto, -zf-bool($small), -zf-bool($auto-insert-breakpoints)) {\n @content\n };\n}\n\n/// Iterates with `@content` through the given list of breakpoints `$breakpoints`.\n///\n/// @access private\n///\n/// @param {Keyword|List} $breakpoints [auto] - Breakpoints to iterates on. It can be a breakpoint name, list of breakpoints or `auto` for all breakpoints.\n/// @param {Boolean|Null} $zero-breakpoint [null] - Whether the zero-breakpoint (often `small`) must be included. If `true`, it will always be added to the list if not already there. If `false`, it will always be removed. Does nothing by default.\n/// @param {Boolean|Keyword} $media-queries [true] - Whether media-queries must be generated. If `for-lists`, only generate media-queries when `$breakpoints` is a list.\n@mixin -zf-each-breakpoint-in(\n $breakpoints: auto,\n $zero-breakpoint: null,\n $media-queries: true\n) {\n $-list: ();\n $-breakpoints-is-a-list: true;\n\n // Retrieve the list of breakpoint(s) to iterate on.\n @if $breakpoints == auto {\n $-list: $breakpoint-classes;\n }\n @else if type-of($breakpoints) == 'list' {\n $-list: $breakpoints;\n }\n @else if type-of($breakpoints) == 'string' {\n $-list: ($breakpoints);\n $-breakpoints-is-a-list: false;\n }\n @else {\n @error 'Wrong syntax for \"$breakpoints\" in \"-zf-each-breakpoint-in()\". Got \"#{$breakpoints}\" (#{type-of($breakpoints)}). Expected a breakpoint name, a list of breakpoints or \"auto\"';\n }\n\n // Add or remove the zero breakpoint according to `$zero-breakpoint`\n @if $zero-breakpoint == true {\n $-list: join(($-zf-zero-breakpoint), sl-remove($-list, $-zf-zero-breakpoint));\n }\n @else if $zero-breakpoint == false {\n $-list: sl-remove($-list, $-zf-zero-breakpoint);\n }\n\n // Iterate on breakpoint(s)\n @each $bp in $-list {\n $old-zf-size: null;\n @if global-variable-exists(-zf-size) {\n $old-zf-size: $-zf-size;\n }\n $-zf-size: $bp !global;\n\n @if ($media-queries == true\n or ($media-queries == 'for-lists' and $-breakpoints-is-a-list)) {\n @include breakpoint($bp) {\n @content;\n }\n }\n @else {\n @content;\n }\n\n $-zf-size: $old-zf-size !global;\n }\n}\n\n/// Generate the `@content` passed to the mixin with a value `$-zf-bp-value` related to a breakpoint, depending on the `$name` parameter:\n/// - For a single value, `$-zf-bp-value` is this value.\n/// - For a breakpoint name, `$-zf-bp-value` is the corresponding breakpoint value in `$map`.\n/// - For \"auto\", `$-zf-bp-value` is the corresponding breakpoint value in `$map` and is passed to `@content`, which is made responsive for each breakpoint of `$map`.\n/// @param {Number|Array|Keyword} $name [auto] - Single value, breakpoint name, or list of breakpoint names to use. \"auto\" by default.\n/// @param {Number|Map} $map - Map of breakpoints and values or single value to use.\n@mixin -zf-breakpoint-value(\n $name: auto,\n $map: null\n) {\n @if $name == auto and type-of($map) == 'map' {\n // \"auto\"\n @each $k, $v in $map {\n @include breakpoint($k) {\n @include -zf-breakpoint-value($v, $map) {\n @content;\n }\n }\n }\n }\n @else {\n // breakpoint name\n @if type-of($name) == 'string' {\n $bp-value: -zf-get-bp-val($map, $name);\n @if $bp-value != null {\n $name: $bp-value;\n }\n }\n\n // breakpoint value\n $-zf-bp-value: $name !global;\n @content;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group forms\n////\n\n/// Font color of text inputs.\n/// @type Color\n$input-color: $black !default;\n\n/// Font color of placeholder text within text inputs.\n/// @type Color\n$input-placeholder-color: $medium-gray !default;\n\n/// Font family of text inputs.\n/// @type Font\n$input-font-family: inherit !default;\n\n/// Font size of text inputs.\n/// @type Number\n$input-font-size: rem-calc(16) !default;\n\n/// Font weight of text inputs.\n/// @type Keyword\n$input-font-weight: $global-weight-normal !default;\n\n/// Line height of text inputs.\n/// @type Keyword\n$input-line-height: $global-lineheight !default;\n\n/// Background color of text inputs.\n/// @type Color\n$input-background: $white !default;\n\n/// Background color of focused of text inputs.\n/// @type Color\n$input-background-focus: $white !default;\n\n/// Background color of disabled text inputs.\n/// @type Color\n$input-background-disabled: $light-gray !default;\n\n/// Border around text inputs.\n/// @type Border\n$input-border: 1px solid $medium-gray !default;\n\n/// Border around focused text inputs.\n/// @type Color\n$input-border-focus: 1px solid $dark-gray !default;\n\n/// Padding of text inputs.\n/// @type Color\n$input-padding: $form-spacing / 2 !default;\n\n/// Box shadow inside text inputs when not focused.\n/// @type Shadow\n$input-shadow: inset 0 1px 2px rgba($black, 0.1) !default;\n\n/// Box shadow outside text inputs when focused.\n/// @type Shadow\n$input-shadow-focus: 0 0 5px $medium-gray !default;\n\n/// Cursor to use when hovering over a disabled text input.\n/// @type Cursor\n$input-cursor-disabled: not-allowed !default;\n\n/// Properties to transition on text inputs.\n/// @type Transition\n$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out !default;\n\n/// Enables the up/down buttons that Chrome and Firefox add to ` ` elements.\n/// @type Boolean\n$input-number-spinners: true !default;\n\n/// Radius for text inputs.\n/// @type Border\n$input-radius: $global-radius !default;\n\n/// Border radius for form buttons, defaulted to global-radius.\n/// @type Number\n$form-button-radius: $global-radius !default;\n\n@mixin form-element {\n $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);\n\n display: block;\n box-sizing: border-box;\n width: 100%;\n height: $height;\n margin: 0 0 $form-spacing;\n padding: $input-padding;\n\n border: $input-border;\n border-radius: $input-radius;\n background-color: $input-background;\n box-shadow: $input-shadow;\n\n font-family: $input-font-family;\n font-size: $input-font-size;\n font-weight: $input-font-weight;\n line-height: $input-line-height;\n color: $input-color;\n\n @if has-value($input-transition) {\n transition: $input-transition;\n }\n\n // Focus state\n &:focus {\n outline: none;\n border: $input-border-focus;\n background-color: $input-background-focus;\n box-shadow: $input-shadow-focus;\n\n @if has-value($input-transition) {\n transition: $input-transition;\n }\n }\n}\n\n@mixin foundation-form-text {\n // Text inputs\n #{text-inputs()},\n textarea {\n @include form-element;\n appearance: none;\n }\n\n // Text areas\n textarea {\n max-width: 100%;\n\n &[rows] {\n height: auto;\n }\n }\n\n input,\n textarea {\n // Disabled/readonly state\n &:disabled,\n &[readonly] {\n background-color: $input-background-disabled;\n cursor: $input-cursor-disabled;\n }\n }\n\n // Reset styles on button-like inputs\n [type='submit'],\n [type='button'] {\n appearance: none;\n border-radius: $form-button-radius;\n }\n\n // Reset Normalize setting content-box to search elements\n input[type='search'] { // sass-lint:disable-line no-qualifying-elements\n box-sizing: border-box;\n }\n\n // Number input styles\n [type='number'] {\n @if not $input-number-spinners {\n -moz-appearance: textfield; // sass-lint:disable-line no-vendor-prefixes\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n -webkit-appearance: none; // sass-lint:disable-line no-vendor-prefixes\n margin: 0;\n }\n }\n }\n\n // Placeholder text\n ::placeholder {\n color: $input-placeholder-color;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group forms\n////\n\n@mixin foundation-form-checkbox {\n [type='file'],\n [type='checkbox'],\n [type='radio'] {\n margin: 0 0 $form-spacing;\n }\n\n // Styles for input/label siblings\n [type='checkbox'] + label,\n [type='radio'] + label {\n display: inline-block;\n vertical-align: baseline;\n\n margin-#{$global-left}: $form-spacing * 0.5;\n margin-#{$global-right}: $form-spacing;\n margin-bottom: 0;\n\n &[for] {\n cursor: pointer;\n }\n }\n\n // Styles for inputs inside labels\n label > [type='checkbox'],\n label > [type='radio'] {\n margin-#{$global-right}: $form-spacing * 0.5;\n }\n\n // Normalize file input width\n [type='file'] {\n width: 100%;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group forms\n////\n\n/// Color for form labels.\n/// @type Color\n$form-label-color: $black !default;\n\n/// Font size for form labels.\n/// @type Number\n$form-label-font-size: rem-calc(14) !default;\n\n/// Font weight for form labels.\n/// @type Keyword\n$form-label-font-weight: $global-weight-normal !default;\n\n/// Line height for form labels. The higher the number, the more space between the label and its input field.\n/// @type Number\n$form-label-line-height: 1.8 !default;\n\n@mixin form-label {\n display: block;\n margin: 0;\n\n font-size: $form-label-font-size;\n font-weight: $form-label-font-weight;\n line-height: $form-label-line-height;\n color: $form-label-color;\n}\n\n@mixin form-label-middle {\n $input-border-width: get-border-value($input-border, width);\n\n margin: 0 0 $form-spacing;\n padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0;\n}\n\n@mixin foundation-form-label {\n label {\n @include form-label;\n\n &.middle {\n @include form-label-middle;\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group forms\n////\n\n/// Default color for help text.\n/// @type Color\n$helptext-color: $black !default;\n\n/// Default font size for help text.\n/// @type Number\n$helptext-font-size: rem-calc(13) !default;\n\n/// Default font style for help text.\n/// @type Keyword\n$helptext-font-style: italic !default;\n\n@mixin foundation-form-helptext {\n .help-text {\n $margin-top: ($form-spacing * 0.5) * -1;\n\n margin-top: $margin-top;\n font-size: $helptext-font-size;\n font-style: $helptext-font-style;\n color: $helptext-color;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group forms\n////\n\n/// Color of labels prefixed to an input.\n/// @type Color\n$input-prefix-color: $black !default;\n\n/// Background color of labels prefixed to an input.\n/// @type Color\n$input-prefix-background: $light-gray !default;\n\n/// Border around labels prefixed to an input.\n/// @type Border\n$input-prefix-border: 1px solid $medium-gray !default;\n\n/// Left/right padding of an pre/postfixed input label\n$input-prefix-padding: 1rem !default;\n\n@mixin foundation-form-prepostfix {\n $height: ($input-font-size * $input-line-height) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);\n\n .input-group {\n display: if($global-flexbox, flex, table);\n width: 100%;\n margin-bottom: $form-spacing;\n\n @if $global-flexbox {\n align-items: stretch;\n }\n\n > :first-child {\n &, &.input-group-button > * {\n border-radius: if($global-text-direction == rtl, 0 $input-radius $input-radius 0, $input-radius 0 0 $input-radius);\n }\n }\n\n > :last-child {\n &, &.input-group-button > * {\n border-radius: if($global-text-direction == rtl, $input-radius 0 0 $input-radius, 0 $input-radius $input-radius 0);\n }\n }\n }\n\n %input-group-child {\n margin: 0;\n white-space: nowrap;\n\n @if not $global-flexbox {\n display: table-cell;\n vertical-align: middle;\n }\n }\n\n .input-group-label {\n @extend %input-group-child;\n padding: 0 $input-prefix-padding;\n border: $input-prefix-border;\n background: $input-prefix-background;\n\n color: $input-prefix-color;\n text-align: center;\n white-space: nowrap;\n\n @if $global-flexbox {\n display: flex;\n flex: 0 0 auto;\n align-items: center;\n }\n @else {\n width: 1%;\n height: 100%;\n }\n\n @if has-value($input-prefix-border) {\n &:first-child {\n border-#{$global-right}: 0;\n }\n\n &:last-child {\n border-#{$global-left}: 0;\n }\n }\n }\n\n .input-group-field {\n @extend %input-group-child;\n border-radius: 0;\n\n @if $global-flexbox {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n min-width: 0;\n }\n }\n\n .input-group-button {\n @extend %input-group-child;\n padding-top: 0;\n padding-bottom: 0;\n text-align: center;\n\n @if $global-flexbox {\n display: flex;\n flex: 0 0 auto;\n }\n @else {\n width: 1%;\n height: 100%;\n }\n\n a,\n input,\n button,\n label {\n @extend %input-group-child;\n\n @if $global-flexbox {\n align-self: stretch;\n height: auto;\n }\n @else {\n height: $height;\n }\n padding-top: 0;\n padding-bottom: 0;\n font-size: $input-font-size;\n }\n }\n\n // Specificity bump needed to prevent override by buttons\n @if not $global-flexbox {\n .input-group {\n .input-group-button {\n display: table-cell;\n }\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group forms\n////\n\n/// Default border around custom fieldsets.\n/// @type Border\n$fieldset-border: 1px solid $medium-gray !default;\n\n/// Default padding inside custom fieldsets.\n/// @type Number\n$fieldset-padding: rem-calc(20) !default;\n\n/// Default margin around custom fieldsets.\n/// @type Number\n$fieldset-margin: rem-calc(18 0) !default;\n\n/// Default padding between the legend text and fieldset border.\n/// @type Number\n$legend-padding: rem-calc(0 3) !default;\n\n@mixin fieldset {\n margin: $fieldset-margin;\n padding: $fieldset-padding;\n border: $fieldset-border;\n\n legend {\n // Covers up the fieldset's border to create artificial padding\n margin: 0;\n margin-#{$global-left}: rem-calc(-3);\n padding: $legend-padding;\n }\n}\n\n@mixin foundation-form-fieldset {\n fieldset {\n margin: 0;\n padding: 0;\n border: 0;\n }\n\n legend {\n max-width: 100%;\n margin-bottom: $form-spacing * 0.5;\n }\n\n .fieldset {\n @include fieldset;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group forms\n////\n\n/// Background color for select menus.\n/// @type Color\n$select-background: $white !default;\n\n/// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely.\n/// @type Color\n$select-triangle-color: $dark-gray !default;\n\n/// Default radius for select menus.\n/// @type Color\n$select-radius: $global-radius !default;\n\n@mixin form-select {\n $height: ($input-font-size * unitless-calc($input-line-height)) + (get-side($input-padding, 'top') + get-side($input-padding, 'bottom')) - rem-calc(1);\n\n height: $height;\n margin: 0 0 $form-spacing;\n padding: $input-padding;\n\n appearance: none;\n border: $input-border;\n border-radius: $select-radius;\n background-color: $select-background;\n\n font-family: $input-font-family;\n font-size: $input-font-size;\n font-weight: $input-font-weight;\n line-height: $input-line-height;\n color: $input-color;\n\n @if $select-triangle-color != transparent {\n @include background-triangle($select-triangle-color);\n background-origin: content-box;\n background-position: $global-right (-$form-spacing) center;\n background-repeat: no-repeat;\n background-size: 9px 6px;\n\n padding-#{$global-right}: ($form-spacing * 1.5);\n }\n\n @if has-value($input-transition) {\n transition: $input-transition;\n }\n\n // Focus state\n &:focus {\n outline: none;\n border: $input-border-focus;\n background-color: $input-background-focus;\n box-shadow: $input-shadow-focus;\n\n @if has-value($input-transition) {\n transition: $input-transition;\n }\n }\n\n // Disabled state\n &:disabled {\n background-color: $input-background-disabled;\n cursor: $input-cursor-disabled;\n }\n\n // Hide the dropdown arrow shown in newer IE versions\n &::-ms-expand {\n display: none;\n }\n\n &[multiple] {\n height: auto;\n background-image: none;\n }\n &:not([multiple]) {\n padding-top: 0;\n padding-bottom: 0;\n }\n}\n\n@mixin foundation-form-select {\n select {\n @include form-select;\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group abide\n////\n\n/// Sets if error styles should be added to inputs.\n/// @type Boolean\n$abide-inputs: true !default;\n\n/// Sets if error styles should be added to labels.\n/// @type Boolean\n$abide-labels: true !default;\n\n/// Background color to use for invalid text inputs.\n/// @type Color\n$input-background-invalid: get-color(alert) !default;\n\n/// Color to use for labels of invalid inputs.\n/// @type Color\n$form-label-color-invalid: get-color(alert) !default;\n\n/// Default font color for form error text.\n/// @type Color\n$input-error-color: get-color(alert) !default;\n\n/// Default font size for form error text.\n/// @type Number\n$input-error-font-size: rem-calc(12) !default;\n\n/// Default font weight for form error text.\n/// @type Keyword\n$input-error-font-weight: $global-weight-bold !default;\n\n/// Styles the background and border of an input field to have an error state.\n///\n/// @param {Color} $background [$alert-color] - Color to use for the background and border.\n/// @param {Number} $background-lighten [10%] - Lightness level of the background color.\n@mixin form-input-error(\n $background: $input-background-invalid,\n $background-lighten: 10%\n) {\n &:not(:focus) {\n border-color: $background;\n background-color: mix($background, $white, $background-lighten);\n\n &::placeholder {\n color: $background;\n }\n }\n}\n\n/// Adds error styles to a form element, using the values in the settings file.\n@mixin form-error {\n display: none;\n margin-top: $form-spacing * -0.5;\n margin-bottom: $form-spacing;\n\n font-size: $input-error-font-size;\n font-weight: $input-error-font-weight;\n color: $input-error-color;\n}\n\n@mixin foundation-form-error {\n @if $abide-inputs {\n // Error class for invalid inputs\n .is-invalid-input {\n @include form-input-error;\n }\n }\n\n @if $abide-labels {\n // Error class for labels of invalid outputs\n .is-invalid-label {\n color: $form-label-color-invalid;\n }\n }\n\n // Form error element\n .form-error {\n @include form-error;\n\n &.is-visible {\n display: block;\n }\n }\n}\n","// Foundation for Sites\n// https://get.foundation\n// Licensed under MIT Open Source\n\n////\n/// @group typography-base\n////\n\n// Base Typography\n// - - - - - - - - - - - - - - -\n// These are styles applied to basic HTML tags, including:\n// - Paragraphs \n// - Bold/italics \n// - Small text \n// - Headings