\n// - Bold/italics \n// - Small text \n// - Headings -\n// - Anchors \n// - Dividers \n// - Lists \n// - Blockquotes \n// - Code blocks \n// - Abbreviations \n// - Citations \n// - Keystrokes \n\n/// Font family for header elements.\n/// @type String | List\n$header-font-family: $body-font-family !default;\n\n/// Font weight of headers.\n/// @type String\n$header-font-weight: $global-weight-normal !default;\n\n/// Font style (e.g. italicized) of headers.\n/// @type String\n$header-font-style: normal !default;\n\n/// Font stack used for elements that use monospaced type, such as code samples\n/// @type String | List\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;\n\n/// Color of headers.\n/// @type Color\n$header-color: inherit !default;\n\n/// Line height of headers.\n/// @type Number\n$header-lineheight: 1.4 !default;\n\n/// Bottom margin of headers.\n/// @type Number\n$header-margin-bottom: 0.5rem !default;\n\n/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.\n/// @type Map\n$header-styles: (\n small: (\n 'h1': ('font-size': 24),\n 'h2': ('font-size': 20),\n 'h3': ('font-size': 19),\n 'h4': ('font-size': 18),\n 'h5': ('font-size': 17),\n 'h6': ('font-size': 16),\n ),\n medium: (\n 'h1': ('font-size': 48),\n 'h2': ('font-size': 40),\n 'h3': ('font-size': 31),\n 'h4': ('font-size': 25),\n 'h5': ('font-size': 20),\n 'h6': ('font-size': 16),\n ),\n) !default;\n\n// $header-styles map is built from $header-sizes in order to ensure downward compatibility\n// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss\n@function build_from_header-sizes($header-sizes) {\n @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';\n $header-styles: ();\n @each $size, $headers in $header-sizes {\n $header-map: ();\n @each $header, $font-size in $headers {\n $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));\n }\n $header-styles: map-merge($header-styles, ($size: $header-map));\n }\n @return $header-styles;\n}\n\n// If it exists $headers-sizes is used to build $header-styles. See the documentation.\n@if variable-exists(header-sizes) {\n $header-styles: build_from_header-sizes($header-sizes);\n}\n\n/// Text rendering method of headers.\n/// @type String\n$header-text-rendering: optimizeLegibility !default;\n\n/// Font size of `` elements.\n/// @type Number\n$small-font-size: 80% !default;\n\n/// Color of `` elements when placed inside headers.\n/// @type Color\n$header-small-font-color: $medium-gray !default;\n\n/// Line height of text inside `` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `` elements.\n/// @type Number\n$defnlist-margin-bottom: 1rem !default;\n\n/// Font weight for `` elements.\n/// @type String\n$defnlist-term-weight: $global-weight-bold !default;\n\n/// Spacing between `` and `` elements.\n/// @type Number\n$defnlist-term-margin-bottom: 0.3rem !default;\n\n/// Text color of `` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\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 code {\n padding: $code-padding;\n\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 // 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 by ZURB\n// foundation.zurb.com\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@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","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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}\n\n@mixin foundation-form-select {\n select {\n @include form-select;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group tooltip\n////\n\n/// Default cursor of the defined term.\n/// @type Keyword\n$has-tip-cursor: help !default;\n\n/// Default font weight of the defined term.\n/// @type Keyword | Number\n$has-tip-font-weight: $global-weight-bold !default;\n\n/// Default border bottom of the defined term.\n/// @type List\n$has-tip-border-bottom: dotted 1px $dark-gray !default;\n\n/// Default color of the tooltip background.\n/// @type Color\n$tooltip-background-color: $black !default;\n\n/// Default color of the tooltip font.\n/// @type Color\n$tooltip-color: $white !default;\n\n/// Default padding of the tooltip background.\n/// @type Number\n$tooltip-padding: 0.75rem !default;\n\n/// Default max width for tooltips.\n/// @type Number\n$tooltip-max-width: 10rem !default;\n\n/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.\n/// @type Number\n$tooltip-font-size: $small-font-size !default;\n\n/// Default pip width for tooltips.\n/// @type Number\n$tooltip-pip-width: 0.75rem !default;\n\n/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.\n/// @type Number\n$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;\n\n/// Default radius for tooltips.\n/// @type Number\n$tooltip-radius: $global-radius !default;\n\n@mixin has-tip {\n position: relative;\n display: inline-block;\n\n border-bottom: $has-tip-border-bottom;\n font-weight: $has-tip-font-weight;\n cursor: $has-tip-cursor;\n}\n\n@mixin tooltip {\n position: absolute;\n top: calc(100% + #{$tooltip-pip-height});\n z-index: 1200;\n\n max-width: $tooltip-max-width;\n padding: $tooltip-padding;\n\n border-radius: $tooltip-radius;\n background-color: $tooltip-background-color;\n font-size: $tooltip-font-size;\n color: $tooltip-color;\n\n &::before {\n position: absolute;\n }\n\n &.bottom {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);\n bottom: 100%;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.top {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);\n top: 100%;\n bottom: auto;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.left {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);\n left: 100%;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.right {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);\n right: 100%;\n left: auto;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.align-top::before {\n bottom: auto;\n top: 10%;\n }\n\n &.align-bottom::before {\n bottom: 10%;\n top: auto;\n }\n\n &.align-left::before {\n left: 10%;\n right: auto;\n }\n\n &.align-right::before {\n left: auto;\n right: 10%;\n }\n}\n\n@mixin foundation-tooltip {\n .has-tip {\n @include has-tip;\n }\n\n .tooltip {\n @include tooltip;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group Flexbox Utilities\n////\n//\n/// Default value for the count of source ordering`\n/// @type Number\n$flex-source-ordering-count: 6 !default;\n\n/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.\n/// @type Boolean\n$flexbox-responsive-breakpoints: true !default;\n\n@mixin flex-helpers {\n .flex-container {\n @include flex;\n }\n\n .flex-child-auto {\n flex: 1 1 auto;\n }\n\n .flex-child-grow {\n flex: 1 0 auto;\n }\n\n .flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n\n @if ($flexbox-responsive-breakpoints) {\n // Loop through Responsive Breakpoints\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-flex-container {\n @include flex;\n }\n\n .#{$size}-flex-child-auto {\n flex: 1 1 auto;\n }\n\n .#{$size}-flex-child-grow {\n flex: 1 0 auto;\n }\n\n .#{$size}-flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .#{$size}-flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n }\n }\n }\n }\n}\n\n@mixin foundation-flex-classes {\n // Horizontal alignment using justify-content\n @each $hdir, $prop in $-zf-flex-justify {\n .align-#{$hdir} {\n @include flex-align($x: $hdir);\n }\n }\n \n // Horizontal alignment Specifically for Vertical Menu\n @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {\n .align-#{$hdir} {\n &.vertical {\n &.menu > li > a {\n @include flex-align($x: $hdir);\n }\n }\n }\n }\n\n // Vertical alignment using align-items and align-self\n @each $vdir, $prop in $-zf-flex-align {\n .align-#{$vdir} {\n @include flex-align($y: $vdir);\n }\n\n .align-self-#{$vdir} {\n @include flex-align-self($y: $vdir);\n }\n }\n\n // Central alignment of content\n .align-center-middle {\n @include flex-align($x: center, $y: middle);\n align-content: center;\n }\n\n // Source ordering\n @include -zf-each-breakpoint {\n @for $i from 1 through $flex-source-ordering-count {\n .#{$-zf-size}-order-#{$i} {\n @include flex-order($i);\n }\n }\n }\n\n // Vanilla Flexbox Helpers\n @include flex-helpers;\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// Hide an element by default, only displaying it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for($size) {\n $size: map-get($breakpoints, $size);\n // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).\n // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.\n // See https://github.com/zurb/foundation-sites/issues/11313\n $size: -zf-bp-to-em($size) - .00125;\n\n @include breakpoint($size down) {\n display: none !important;\n }\n}\n\n/// Hide an element by default, only displaying it within a certain breakpoint.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for-only($size) {\n $lower-bound-size: map-get($breakpoints, $size);\n $upper-bound-size: -zf-map-next($breakpoints, $size);\n\n // more often than not this will be correct, just one time round the loop it won't so set in scope here\n $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;\n // test actual lower-bound-size, if 0 set it to 0em\n @if strip-unit($lower-bound-size) == 0 {\n $lower-bound: -zf-bp-to-em($lower-bound-size);\n }\n\n @if $upper-bound-size == null {\n @media screen and (max-width: $lower-bound) {\n display: none !important;\n }\n }\n @else {\n $upper-bound: -zf-bp-to-em($upper-bound-size);\n\n @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {\n display: none !important;\n }\n }\n}\n\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for($size) {\n @include breakpoint($size) {\n display: none !important;\n }\n}\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for-only($size) {\n @include breakpoint($size only) {\n display: none !important;\n }\n}\n\n@mixin foundation-visibility-classes {\n // Basic hiding classes\n .hide {\n display: none !important;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n // Responsive visibility classes\n @each $size in $breakpoint-classes {\n @if $size != $-zf-zero-breakpoint {\n .hide-for-#{$size} {\n @include hide-for($size);\n }\n\n .show-for-#{$size} {\n @include show-for($size);\n }\n }\n\n .hide-for-#{$size}-only {\n @include hide-for-only($size);\n }\n\n .show-for-#{$size}-only {\n @include show-for-only($size);\n }\n }\n\n // Screen reader visibility classes\n // Need a \"hide-for-sr\" class? Add aria-hidden='true' to the element\n .show-for-sr,\n .show-on-focus {\n @include element-invisible;\n }\n\n // Only display the element when it's focused\n .show-on-focus {\n &:active,\n &:focus {\n @include element-invisible-off;\n }\n }\n\n // Landscape and portrait visibility\n .show-for-landscape,\n .hide-for-portrait {\n display: block !important;\n\n @include breakpoint(landscape) {\n display: block !important;\n }\n\n @include breakpoint(portrait) {\n display: none !important;\n }\n }\n\n .hide-for-landscape,\n .show-for-portrait {\n display: none !important;\n\n @include breakpoint(landscape) {\n display: none !important;\n }\n\n @include breakpoint(portrait) {\n display: block !important;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n// Margin Grid classes\n@mixin xy-base-grid-classes {\n\n // Grid Container\n .grid-container {\n @include xy-grid-container;\n\n &.fluid {\n @include xy-grid-container(100%);\n }\n\n &.full {\n @include xy-grid-container(100%, 0);\n }\n }\n\n // Base grid styles\n .grid-x {\n @include xy-grid;\n }\n\n .cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &.auto {\n @include xy-cell-base(auto);\n }\n\n &.shrink {\n @include xy-cell-base(shrink);\n }\n\n }\n .grid-x {\n > .auto {\n @include xy-cell-static(auto, false);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Auto width\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues & PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n .grid-x {\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false);\n }\n }\n\n %-xy-cell-base-shrink-horizontal-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n .grid-x > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static($i, false, $gutter-type: padding);\n }\n }\n }\n\n // Reset width when using `.grid-margin-x` not on `.grid-x`\n .grid-margin-x:not(.grid-x) > .cell {\n width: auto;\n }\n\n // Reset height when using `.grid-margin-y` not on `.grid-y`\n .grid-margin-y:not(.grid-y) > .cell {\n height: auto;\n }\n}\n\n@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {\n $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');\n > .#{$prefix}auto {\n @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n > .#{$prefix}shrink {\n @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');\n\n > #{$classname} {\n @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n }\n}\n\n// Margin Grid classes\n@mixin xy-margin-grid-classes(\n $gutter-position: left right,\n $vertical: false,\n $wrapping-selector: '.grid-margin-x'\n){\n #{$wrapping-selector} {\n @include xy-gutters($negative: true, $gutter-position: $gutter-position);\n\n // Base cell styles\n > .cell {\n @include xy-cell-static($vertical: $vertical);\n }\n\n // base styles need to all be before the auto and shrink styles\n @include -zf-each-breakpoint() {\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {\n > .cell {\n @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for all prior breakpoints.\n // As their gutter is defined with their width/height, even breakpoint without a new margin must be\n // generated to not having their width/height overrided by re-adjusted smaller breakpoints.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);\n }\n }\n\n @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);\n }\n }\n}\n\n// Padding Grid classes\n@mixin xy-padding-grid-classes {\n .grid-padding-x {\n\n // Negative margin for nested grids\n .grid-padding-x {\n @include xy-gutters($negative: true);\n }\n\n // Negative margin for grids within `grid-container/grid-container.fluid`\n // This allows margin and padding grids to line up with eachother\n .grid-container:not(.full) > & {\n @include xy-gutters($negative: true);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n }\n}\n\n// Block Grid classes\n@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {\n @if $padding-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n }\n }\n }\n\n @if $margin-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for prior breakpoints based on the responsive gutter.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @if(map-has-key($grid-margin-gutters, $bp)) {\n .grid-margin-x.#{$bp}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n }\n @for $i from 1 through $xy-block-grid-max {\n .grid-margin-x.#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n}\n\n// Collapse classes\n@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {\n @each $bp in $breakpoint-classes {\n @if $margin-grid {\n .#{$bp}-margin-collapse {\n @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);\n }\n }\n\n @if $padding-grid {\n .#{$bp}-padding-collapse {\n @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);\n }\n }\n }\n}\n\n// Offset classes\n@mixin xy-offset-cell-classes {\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-columns {\n // Offsets\n $o: $i - 1;\n\n .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n\n .grid-margin-x > .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $breakpoint: $-zf-size);\n }\n }\n }\n}\n\n// Vertical Grid classes\n@mixin xy-vertical-grid-classes(\n $margin-grid: true,\n $padding-grid: true\n) {\n\n @include -zf-each-breakpoint() {\n @if not($-zf-size == small) {\n }\n }\n\n .grid-y {\n @include xy-grid(vertical, false);\n\n\n > .cell {\n @include xy-cell-reset();\n }\n\n > .auto {\n @include xy-cell-static(auto, false, $vertical: true);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false, $vertical: true);\n }\n\n\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues and PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n %-xy-cell-base-shrink-vertical-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);\n }\n }\n\n }\n }\n\n @if $padding-grid {\n .grid-padding-y {\n // Negative margin for nested grids\n .grid-padding-y {\n @include xy-gutters($negative: true, $gutter-position: top bottom);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);\n }\n }\n }\n\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n }\n\n}\n\n@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {\n // Framed grid styles\n .grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .cell-block {\n @include xy-cell-block();\n }\n\n .cell-block-y {\n @include xy-cell-block(true);\n }\n\n\n .cell-block-container {\n @include xy-cell-block-container();\n }\n\n\n @include -zf-each-breakpoint(false) {\n\n .#{$-zf-size}-grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .#{$-zf-size}-grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .#{$-zf-size}-cell-block {\n @include xy-cell-block();\n }\n\n .#{$-zf-size}-cell-block-container {\n @include xy-cell-block-container();\n }\n\n .#{$-zf-size}-cell-block-y {\n @include xy-cell-block(true);\n }\n }\n\n @if $vertical-grid {\n .grid-y {\n &.grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n @include -zf-each-breakpoint(false) {\n &.#{$-zf-size}-grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n }\n }\n .cell {\n .grid-y.grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n @include -zf-each-breakpoint(false) {\n .grid-y.#{$-zf-size}-grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n }\n }\n }\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n .grid-frame.grid-margin-y {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);\n }\n @include -zf-each-breakpoint(false) {\n .grid-margin-y.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);\n }\n }\n }\n}\n\n// Final classes\n@mixin foundation-xy-grid-classes(\n $base-grid: true,\n $margin-grid: true,\n $padding-grid: true,\n $block-grid: true,\n $collapse: true,\n $offset: true,\n $vertical-grid: true,\n $frame-grid: true\n) {\n\n // Base grid styles\n @if($base-grid) {\n @include xy-base-grid-classes();\n }\n\n // Margin grid\n @if($margin-grid) {\n @include xy-margin-grid-classes();\n }\n\n // Padding grid\n @if($padding-grid) {\n @include xy-padding-grid-classes();\n }\n\n // Block grid\n @if($block-grid) {\n @include xy-block-grid-classes($margin-grid, $padding-grid);\n }\n\n // Collapse gutters\n @if($collapse) {\n @include xy-collapse-grid-classes($margin-grid, $padding-grid);\n }\n\n // Offset gutters\n @if($offset) {\n @include xy-offset-cell-classes();\n }\n\n // Vertical grid\n @if($vertical-grid) {\n @include xy-vertical-grid-classes($margin-grid, $padding-grid);\n }\n\n @if ($frame-grid) {\n @include xy-frame-grid-classes($vertical-grid, $margin-grid)\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @else if (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n/// @param {Number} $padding [$grid-container-padding] - paddings of the container.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin-left: auto;\n margin-right: auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @else if type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @else if ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @else if ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @else if ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @else if ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @else if ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $bp-is-fallback: false;\n\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n $bp-is-fallback: true;\n }\n }\n\n // Get the gutter for the given breakpoint/value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n // If the breakpoint is a fallback, use a fallback gutter as well\n @if ($bp-is-fallback == true and $gutter == null) {\n $gutter: 0;\n }\n\n @if($gutter != null) {\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n }\n @else {\n @warn 'xy-cell: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\", cell was not generated`'\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Sizes child elements so that `$n` number of items appear on each row.\n///\n/// @param {Number} $n - Number of elements to display per row.\n/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-grid-layout(\n $n,\n $selector: '.cell',\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $size: percentage(1/$n);\n\n & > #{$selector} {\n @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Collapses the grid a cells within it.\n///\n/// @param {String} $selector [.cell] - The child element to remove the gutter from.\n/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.\n/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.\n@mixin xy-grid-collapse(\n $selector: '.cell',\n $gutter-type: margin,\n $gutter-position: right left,\n $min-breakpoint: $-zf-zero-breakpoint\n) {\n // First, lets negate any margins on the top level\n @if ($gutter-type == 'margin') {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n }\n }\n\n $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);\n\n // Output new widths to not include gutters\n @each $bp in $breakpoint-classes {\n @if(sl-contain($excluded-bps, $bp)) {\n @include breakpoint($min-breakpoint) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n } @else {\n @include breakpoint($bp) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n }\n }\n }\n @else {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n padding-#{$value}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Offsets a column to the right/bottom by `$n` columns.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {Number|Array|Keyword} $breakpoint [$-zf-zero-breakpoint] - Single value, breakpoint name, or list of breakpoint names to use for `$gutters`. See `-zf-breakpoint-value()`.\n/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.\n@mixin xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n $direction: if($vertical, 'top', $global-left);\n\n @include -zf-breakpoint-value($breakpoint, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n $gutter-margin: if($gutter-type == 'margin', $gutter, 0);\n $size: if($gutter-margin == 0, #{xy-cell-size($n)}, calc(#{xy-cell-size($n)} + #{$gutter-margin}));\n\n margin-#{$direction}: #{$size};\n }\n}\n","/// Modifies a grid to give it \"frame\" behavior (no overflow, no wrap, stretch behavior)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.\n/// @param {Number|Map} $gutters [null] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.\n/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.\n@mixin xy-grid-frame(\n $vertical: false,\n $nested: false,\n $gutters: null,\n $breakpoint: null,\n $include-base: true\n) {\n\n @if $include-base {\n overflow: hidden;\n position: relative;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n\n @if $breakpoint == null and type-of($gutters) == 'map' {\n @include -zf-each-breakpoint() {\n @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);\n }\n } @else {\n // Get our gutters if applicable\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // If we have a gutter, add it to the width/height\n @if $gutter {\n @if $vertical == true {\n $unit: if($nested == true, 100%, 100vh);\n $gutter: rem-calc($gutter);\n height: calc(#{$unit} + #{$gutter});\n } @else {\n $unit: if($nested == true, 100%, 100vw);\n $gutter: rem-calc($gutter);\n width: calc(#{$unit} + #{$gutter});\n }\n }\n @else {\n @if $vertical == true {\n height: if($nested == true, 100%, 100vh);\n } @else {\n width: if($nested == true, 100%, 100vw);\n }\n }\n }\n}\n\n/// Modifies a cell to give it \"block\" behavior (overflow auto, inertial scrolling)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n@mixin xy-cell-block(\n $vertical: false\n) {\n $property: if($vertical == true, 'overflow-y', 'overflow-x');\n\n @if $vertical == true {\n overflow-y: auto;\n max-height: 100%;\n min-height: 100%;\n } @else {\n overflow-x: auto;\n max-width: 100%;\n }\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n/// Container for inside a grid frame containing multiple blocks. Typically used\n/// as a modifier for a `.cell` to allow the cell to pass along flex sizing\n/// constraints / from parents to children.\n@mixin xy-cell-block-container() {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n\n > .grid-x {\n max-height: 100%;\n flex-wrap: nowrap;\n }\n}\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Overrides and styles for form inputs\n// Should hopefully be removed as all styles are moved to individual components\n\ninput,\nselect,\n.Select-control {\n &:hover {\n background-color: $n150;\n }\n}\n\nselect {\n &:hover {\n &:focus {\n background-color: $n150;\n }\n }\n}\n\ninput,\ntextarea,\nselect {\n &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes\n color: $n400;\n }\n\n &:disabled{\n &,\n &:hover {\n cursor: not-allowed;\n background-color: $n200;\n }\n }\n}\n\ninput.is-invalid-input:focus {\n border-color: $r300;\n}\n\n.input-group {\n > :last-child {\n border-left: 0;\n border-radius: 0 $input-radius $input-radius 0;\n }\n}\n\n.input-group-label {\n &.disabled {\n .icon {\n color: $n400;\n }\n }\n}\n\n.form-error {\n font-weight: 600;\n}\n\n.select2 {\n margin: 0 0 1rem;\n\n .select2-selection {\n border: 1px solid $n400;\n height: 2.4375rem;\n\n &:focus {\n outline: 1px solid black;\n outline-offset: 2px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease;\n }\n\n &:hover {\n background-color: $n200;\n }\n }\n\n .selection {\n .select2-selection__rendered {\n line-height: 1.5;\n padding: 8px 24px 8px 8px;\n color: $n700;\n }\n\n .select2-selection__arrow {\n height: 24px;\n margin-top: 7px;\n margin-right: 2px;\n\n b {\n border-color: $n700 transparent transparent transparent;\n }\n }\n }\n}\n\n.select2-dropdown {\n .select2-results__option {\n color: $n600;\n\n &.select2-results__option[aria-selected=true] {\n background-color: $n200;\n color: $n700;\n }\n\n &.select2-results__option--highlighted[aria-selected] {\n background-color: $i100;\n color: $n700;\n }\n }\n}\n","@import '../../variables.scss';\n\n$pill-styles: (\n primary: (\n background-color: $i100,\n text-color: $i600,\n border-color: $i400\n ),\n secondary: (\n background-color: $b100,\n text-color: $b600,\n border-color: $b400\n ),\n success: (\n background-color: $g100,\n text-color: $g600,\n border-color: $g400\n ),\n warning: (\n background-color: $o100,\n text-color: $o600,\n border-color: $o400\n ),\n alert: (\n background-color: $r100,\n text-color: $r600,\n border-color: $r300\n ),\n neutral: (\n background-color: $n250,\n text-color: $n800,\n border-color: $n400\n ),\n highlight: (\n background-color: $c100,\n text-color: $c600,\n border-color: $c400\n ),\n dark: (\n background-color: $n700,\n text-color: $n200,\n border-color: $n100\n )\n);\n\n@mixin pill-color(\n $text-color,\n $background-color,\n $border-color\n) {\n background: $background-color;\n border: 1px solid $border-color;\n color: $text-color;\n}\n\n// --------------\n// Legacy global pill (label) class for non-javascript support\n// --------------\n// sass-lint:disable placeholder-in-extend\n.label {\n border-radius: 32px;\n display: inline-block;\n font-size: $fz-xsmall;\n font-weight: $fw-semi-bold;\n line-height: 14px;\n padding: 4px 8px;\n white-space: nowrap;\n\n @each $color, $value in $pill-styles {\n &.#{$color} {\n @include pill-color(\n map-get($value, text-color),\n map-get($value, background-color),\n map-get($value, border-color)\n );\n }\n }\n\n &.medium {\n font-size: $fz-small;\n line-height: 16px;\n }\n\n &.large {\n font-size: $fz-body;\n line-height: 18px;\n padding: 4px 12px;\n }\n\n // Neutral by default\n @extend .neutral;\n\n // Domain specific colours; unfortunately have to be kept for now\n &.leave {\n @extend .warning;\n }\n\n &.overdue {\n @extend .alert;\n }\n\n &.draft {\n @extend .neutral;\n }\n\n &.abandoned {\n @extend .primary;\n }\n}\n// sass-lint:enable placeholder-in-extend\n\n\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Old version of avatar entity; kept here for now to show off in the style guide\n// Should be removed once we're satisfied we can port to avatar entity in future\n.person-tag {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: 2px;\n\n .grid-x {\n flex-wrap: nowrap;\n width: 100%;\n }\n\n .person-label {\n align-items: center;\n display: flex;\n }\n\n .avatar-container {\n align-self: start;\n display: flex;\n position: relative;\n\n .avatar-icon {\n position: absolute;\n right: 0;\n text-align: right;\n top: 27px;\n\n .icon {\n font-size: 14px;\n }\n }\n }\n\n .display-name {\n align-self: center;\n color: $n700;\n overflow: hidden;\n padding-left: 10px;\n\n .position-title {\n color: $n600;\n font-size: .8125rem;\n line-height: 1.3;\n margin-top: 2px;\n }\n }\n\n .person-tag-description {\n color: $n600;\n font-size: .75rem;\n font-weight: 600;\n }\n\n &.cursor-auto {\n cursor: auto;\n }\n\n &.cursor-pointer {\n cursor: pointer;\n }\n\n .has-tip {\n display: inherit;\n }\n\n .header-component {\n font-size: .9375rem;\n font-weight: normal;\n\n .overdue-count {\n @include breakpoint(small down) {\n order: 2;\n }\n }\n }\n\n .tag-icon {\n i {\n font-size: 2rem;\n margin-right: 10px;\n }\n }\n}\n\n.avatar-container {\n display: inline-block;\n position: relative;\n}\n\n.profile-picture-badge,\n.initials-badge {\n border: 1px solid $n400;\n border-radius: 50%;\n color: $i400;\n display: inline-block;\n font-size: 1rem;\n font-weight: 600;\n height: 40px;\n line-height: 38px;\n overflow: hidden;\n text-align: center;\n width: 40px;\n user-select: none;\n vertical-align: middle;\n\n .extended-leave-circle {\n background-color: $o400;\n bottom: -.1rem;\n border: 2px solid $n100;\n border-radius: 50%;\n right: -.3rem;\n padding: 5.5px;\n position: absolute;\n }\n\n img {\n vertical-align: initial;\n width: 100%;\n }\n\n &.badge-small {\n font-size: 0.8rem;\n height: 30px;\n line-height: 28px;\n width: 30px;\n\n .extended-leave-circle {\n padding: 5px;\n }\n }\n\n &.badge-large {\n font-size: 1.5rem;\n height: 72px;\n line-height: 70px;\n width: 72px;\n\n .extended-leave-circle {\n bottom: .1rem;\n right: .1rem;\n padding: 6.5px;\n }\n }\n\n &.badge-xlarge {\n font-size: 2.5rem;\n height: 120px;\n line-height: 118px;\n width: 120px;\n\n .extended-leave-circle {\n bottom: .25rem;\n right: .75rem;\n padding: 7px;\n }\n }\n}\n\n.profile-picture-badge {\n background-color: transparent;\n}\n\n.initials-badge {\n background-color: $n200;\n text-transform: uppercase;\n}\n","@import '../../variables';\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n border: 0;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead,\n tbody {\n border: 0;\n }\n\n thead {\n background: $n200;\n border-bottom: 2px solid $n400;\n\n th {\n font-weight: 600;\n }\n }\n\n tbody {\n tr {\n border: 0;\n border-bottom: 1px solid $n300;\n }\n }\n\n .button-group {\n margin-bottom: 0;\n }\n}\n\n\ntr {\n &.highlight {\n // As styled by foundation's callout\n background-color: $o100;\n }\n\n &.alert {\n background-color: $r100;\n }\n}\n\nth,\ntd {\n &.fit {\n white-space: nowrap;\n width: 1%;\n }\n\n &.collapse-all {\n word-break: break-all;\n word-wrap: break-word;\n }\n}\n\ntd {\n .button {\n margin: auto;\n }\n\n &.contains-inputs {\n input,\n select {\n margin: 0;\n }\n\n .input-group {\n margin: 0;\n }\n }\n}\n\n.table-full-width {\n margin-left: auto;\n margin-right: auto;\n max-width: initial;\n width: 100%;\n\n tr td.fit {\n white-space: nowrap;\n width: 1%;\n\n .button-group {\n .button {\n float: none;\n }\n }\n }\n}\n","@import '../../variables';\n\nh1, .h1 {\n font-size: 2rem;\n font-weight: 600;\n line-height: 3.5rem;\n}\n\nh6 {\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n\n.display-text-1 {\n font-size: 4.125rem;\n font-weight: 300;\n}\n\n.display-text-2 {\n font-size: 3.25rem;\n font-weight: 400;\n}\n\n.display-text-3 {\n font-size: 2.5625em;\n font-weight: 400;\n}\n\n.subheader {\n color: $n600;\n}\n\n.title {\n color: $n600;\n font-size: 1.4375rem;\n margin-bottom: .4rem;\n}\n\n%section-header {\n color: $n800;\n font-size: 1.125em;\n font-weight: 600;\n}\n\n.section-header {\n @extend %section-header\n}\n\np.page-subheader {\n color: $n600;\n font-size: .9375rem;\n}\n"],"sourceRoot":""}
\n// - Code blocks \n// - Abbreviations \n// - Citations \n// - Keystrokes \n\n/// Font family for header elements.\n/// @type String | List\n$header-font-family: $body-font-family !default;\n\n/// Font weight of headers.\n/// @type String\n$header-font-weight: $global-weight-normal !default;\n\n/// Font style (e.g. italicized) of headers.\n/// @type String\n$header-font-style: normal !default;\n\n/// Font stack used for elements that use monospaced type, such as code samples\n/// @type String | List\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;\n\n/// Color of headers.\n/// @type Color\n$header-color: inherit !default;\n\n/// Line height of headers.\n/// @type Number\n$header-lineheight: 1.4 !default;\n\n/// Bottom margin of headers.\n/// @type Number\n$header-margin-bottom: 0.5rem !default;\n\n/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.\n/// @type Map\n$header-styles: (\n small: (\n 'h1': ('font-size': 24),\n 'h2': ('font-size': 20),\n 'h3': ('font-size': 19),\n 'h4': ('font-size': 18),\n 'h5': ('font-size': 17),\n 'h6': ('font-size': 16),\n ),\n medium: (\n 'h1': ('font-size': 48),\n 'h2': ('font-size': 40),\n 'h3': ('font-size': 31),\n 'h4': ('font-size': 25),\n 'h5': ('font-size': 20),\n 'h6': ('font-size': 16),\n ),\n) !default;\n\n// $header-styles map is built from $header-sizes in order to ensure downward compatibility\n// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss\n@function build_from_header-sizes($header-sizes) {\n @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';\n $header-styles: ();\n @each $size, $headers in $header-sizes {\n $header-map: ();\n @each $header, $font-size in $headers {\n $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));\n }\n $header-styles: map-merge($header-styles, ($size: $header-map));\n }\n @return $header-styles;\n}\n\n// If it exists $headers-sizes is used to build $header-styles. See the documentation.\n@if variable-exists(header-sizes) {\n $header-styles: build_from_header-sizes($header-sizes);\n}\n\n/// Text rendering method of headers.\n/// @type String\n$header-text-rendering: optimizeLegibility !default;\n\n/// Font size of `` elements.\n/// @type Number\n$small-font-size: 80% !default;\n\n/// Color of `` elements when placed inside headers.\n/// @type Color\n$header-small-font-color: $medium-gray !default;\n\n/// Line height of text inside `` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `` elements.\n/// @type Number\n$defnlist-margin-bottom: 1rem !default;\n\n/// Font weight for `` elements.\n/// @type String\n$defnlist-term-weight: $global-weight-bold !default;\n\n/// Spacing between `` and `` elements.\n/// @type Number\n$defnlist-term-margin-bottom: 0.3rem !default;\n\n/// Text color of `` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\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 code {\n padding: $code-padding;\n\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 // 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 by ZURB\n// foundation.zurb.com\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@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","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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}\n\n@mixin foundation-form-select {\n select {\n @include form-select;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group tooltip\n////\n\n/// Default cursor of the defined term.\n/// @type Keyword\n$has-tip-cursor: help !default;\n\n/// Default font weight of the defined term.\n/// @type Keyword | Number\n$has-tip-font-weight: $global-weight-bold !default;\n\n/// Default border bottom of the defined term.\n/// @type List\n$has-tip-border-bottom: dotted 1px $dark-gray !default;\n\n/// Default color of the tooltip background.\n/// @type Color\n$tooltip-background-color: $black !default;\n\n/// Default color of the tooltip font.\n/// @type Color\n$tooltip-color: $white !default;\n\n/// Default padding of the tooltip background.\n/// @type Number\n$tooltip-padding: 0.75rem !default;\n\n/// Default max width for tooltips.\n/// @type Number\n$tooltip-max-width: 10rem !default;\n\n/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.\n/// @type Number\n$tooltip-font-size: $small-font-size !default;\n\n/// Default pip width for tooltips.\n/// @type Number\n$tooltip-pip-width: 0.75rem !default;\n\n/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.\n/// @type Number\n$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;\n\n/// Default radius for tooltips.\n/// @type Number\n$tooltip-radius: $global-radius !default;\n\n@mixin has-tip {\n position: relative;\n display: inline-block;\n\n border-bottom: $has-tip-border-bottom;\n font-weight: $has-tip-font-weight;\n cursor: $has-tip-cursor;\n}\n\n@mixin tooltip {\n position: absolute;\n top: calc(100% + #{$tooltip-pip-height});\n z-index: 1200;\n\n max-width: $tooltip-max-width;\n padding: $tooltip-padding;\n\n border-radius: $tooltip-radius;\n background-color: $tooltip-background-color;\n font-size: $tooltip-font-size;\n color: $tooltip-color;\n\n &::before {\n position: absolute;\n }\n\n &.bottom {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);\n bottom: 100%;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.top {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);\n top: 100%;\n bottom: auto;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.left {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);\n left: 100%;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.right {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);\n right: 100%;\n left: auto;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.align-top::before {\n bottom: auto;\n top: 10%;\n }\n\n &.align-bottom::before {\n bottom: 10%;\n top: auto;\n }\n\n &.align-left::before {\n left: 10%;\n right: auto;\n }\n\n &.align-right::before {\n left: auto;\n right: 10%;\n }\n}\n\n@mixin foundation-tooltip {\n .has-tip {\n @include has-tip;\n }\n\n .tooltip {\n @include tooltip;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group Flexbox Utilities\n////\n//\n/// Default value for the count of source ordering`\n/// @type Number\n$flex-source-ordering-count: 6 !default;\n\n/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.\n/// @type Boolean\n$flexbox-responsive-breakpoints: true !default;\n\n@mixin flex-helpers {\n .flex-container {\n @include flex;\n }\n\n .flex-child-auto {\n flex: 1 1 auto;\n }\n\n .flex-child-grow {\n flex: 1 0 auto;\n }\n\n .flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n\n @if ($flexbox-responsive-breakpoints) {\n // Loop through Responsive Breakpoints\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-flex-container {\n @include flex;\n }\n\n .#{$size}-flex-child-auto {\n flex: 1 1 auto;\n }\n\n .#{$size}-flex-child-grow {\n flex: 1 0 auto;\n }\n\n .#{$size}-flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .#{$size}-flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n }\n }\n }\n }\n}\n\n@mixin foundation-flex-classes {\n // Horizontal alignment using justify-content\n @each $hdir, $prop in $-zf-flex-justify {\n .align-#{$hdir} {\n @include flex-align($x: $hdir);\n }\n }\n \n // Horizontal alignment Specifically for Vertical Menu\n @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {\n .align-#{$hdir} {\n &.vertical {\n &.menu > li > a {\n @include flex-align($x: $hdir);\n }\n }\n }\n }\n\n // Vertical alignment using align-items and align-self\n @each $vdir, $prop in $-zf-flex-align {\n .align-#{$vdir} {\n @include flex-align($y: $vdir);\n }\n\n .align-self-#{$vdir} {\n @include flex-align-self($y: $vdir);\n }\n }\n\n // Central alignment of content\n .align-center-middle {\n @include flex-align($x: center, $y: middle);\n align-content: center;\n }\n\n // Source ordering\n @include -zf-each-breakpoint {\n @for $i from 1 through $flex-source-ordering-count {\n .#{$-zf-size}-order-#{$i} {\n @include flex-order($i);\n }\n }\n }\n\n // Vanilla Flexbox Helpers\n @include flex-helpers;\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// Hide an element by default, only displaying it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for($size) {\n $size: map-get($breakpoints, $size);\n // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).\n // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.\n // See https://github.com/zurb/foundation-sites/issues/11313\n $size: -zf-bp-to-em($size) - .00125;\n\n @include breakpoint($size down) {\n display: none !important;\n }\n}\n\n/// Hide an element by default, only displaying it within a certain breakpoint.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for-only($size) {\n $lower-bound-size: map-get($breakpoints, $size);\n $upper-bound-size: -zf-map-next($breakpoints, $size);\n\n // more often than not this will be correct, just one time round the loop it won't so set in scope here\n $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;\n // test actual lower-bound-size, if 0 set it to 0em\n @if strip-unit($lower-bound-size) == 0 {\n $lower-bound: -zf-bp-to-em($lower-bound-size);\n }\n\n @if $upper-bound-size == null {\n @media screen and (max-width: $lower-bound) {\n display: none !important;\n }\n }\n @else {\n $upper-bound: -zf-bp-to-em($upper-bound-size);\n\n @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {\n display: none !important;\n }\n }\n}\n\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for($size) {\n @include breakpoint($size) {\n display: none !important;\n }\n}\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for-only($size) {\n @include breakpoint($size only) {\n display: none !important;\n }\n}\n\n@mixin foundation-visibility-classes {\n // Basic hiding classes\n .hide {\n display: none !important;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n // Responsive visibility classes\n @each $size in $breakpoint-classes {\n @if $size != $-zf-zero-breakpoint {\n .hide-for-#{$size} {\n @include hide-for($size);\n }\n\n .show-for-#{$size} {\n @include show-for($size);\n }\n }\n\n .hide-for-#{$size}-only {\n @include hide-for-only($size);\n }\n\n .show-for-#{$size}-only {\n @include show-for-only($size);\n }\n }\n\n // Screen reader visibility classes\n // Need a \"hide-for-sr\" class? Add aria-hidden='true' to the element\n .show-for-sr,\n .show-on-focus {\n @include element-invisible;\n }\n\n // Only display the element when it's focused\n .show-on-focus {\n &:active,\n &:focus {\n @include element-invisible-off;\n }\n }\n\n // Landscape and portrait visibility\n .show-for-landscape,\n .hide-for-portrait {\n display: block !important;\n\n @include breakpoint(landscape) {\n display: block !important;\n }\n\n @include breakpoint(portrait) {\n display: none !important;\n }\n }\n\n .hide-for-landscape,\n .show-for-portrait {\n display: none !important;\n\n @include breakpoint(landscape) {\n display: none !important;\n }\n\n @include breakpoint(portrait) {\n display: block !important;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n// Margin Grid classes\n@mixin xy-base-grid-classes {\n\n // Grid Container\n .grid-container {\n @include xy-grid-container;\n\n &.fluid {\n @include xy-grid-container(100%);\n }\n\n &.full {\n @include xy-grid-container(100%, 0);\n }\n }\n\n // Base grid styles\n .grid-x {\n @include xy-grid;\n }\n\n .cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &.auto {\n @include xy-cell-base(auto);\n }\n\n &.shrink {\n @include xy-cell-base(shrink);\n }\n\n }\n .grid-x {\n > .auto {\n @include xy-cell-static(auto, false);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Auto width\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues & PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n .grid-x {\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false);\n }\n }\n\n %-xy-cell-base-shrink-horizontal-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n .grid-x > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static($i, false, $gutter-type: padding);\n }\n }\n }\n\n // Reset width when using `.grid-margin-x` not on `.grid-x`\n .grid-margin-x:not(.grid-x) > .cell {\n width: auto;\n }\n\n // Reset height when using `.grid-margin-y` not on `.grid-y`\n .grid-margin-y:not(.grid-y) > .cell {\n height: auto;\n }\n}\n\n@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {\n $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');\n > .#{$prefix}auto {\n @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n > .#{$prefix}shrink {\n @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');\n\n > #{$classname} {\n @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n }\n}\n\n// Margin Grid classes\n@mixin xy-margin-grid-classes(\n $gutter-position: left right,\n $vertical: false,\n $wrapping-selector: '.grid-margin-x'\n){\n #{$wrapping-selector} {\n @include xy-gutters($negative: true, $gutter-position: $gutter-position);\n\n // Base cell styles\n > .cell {\n @include xy-cell-static($vertical: $vertical);\n }\n\n // base styles need to all be before the auto and shrink styles\n @include -zf-each-breakpoint() {\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {\n > .cell {\n @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for all prior breakpoints.\n // As their gutter is defined with their width/height, even breakpoint without a new margin must be\n // generated to not having their width/height overrided by re-adjusted smaller breakpoints.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);\n }\n }\n\n @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);\n }\n }\n}\n\n// Padding Grid classes\n@mixin xy-padding-grid-classes {\n .grid-padding-x {\n\n // Negative margin for nested grids\n .grid-padding-x {\n @include xy-gutters($negative: true);\n }\n\n // Negative margin for grids within `grid-container/grid-container.fluid`\n // This allows margin and padding grids to line up with eachother\n .grid-container:not(.full) > & {\n @include xy-gutters($negative: true);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n }\n}\n\n// Block Grid classes\n@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {\n @if $padding-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n }\n }\n }\n\n @if $margin-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for prior breakpoints based on the responsive gutter.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @if(map-has-key($grid-margin-gutters, $bp)) {\n .grid-margin-x.#{$bp}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n }\n @for $i from 1 through $xy-block-grid-max {\n .grid-margin-x.#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n}\n\n// Collapse classes\n@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {\n @each $bp in $breakpoint-classes {\n @if $margin-grid {\n .#{$bp}-margin-collapse {\n @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);\n }\n }\n\n @if $padding-grid {\n .#{$bp}-padding-collapse {\n @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);\n }\n }\n }\n}\n\n// Offset classes\n@mixin xy-offset-cell-classes {\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-columns {\n // Offsets\n $o: $i - 1;\n\n .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n\n .grid-margin-x > .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $breakpoint: $-zf-size);\n }\n }\n }\n}\n\n// Vertical Grid classes\n@mixin xy-vertical-grid-classes(\n $margin-grid: true,\n $padding-grid: true\n) {\n\n @include -zf-each-breakpoint() {\n @if not($-zf-size == small) {\n }\n }\n\n .grid-y {\n @include xy-grid(vertical, false);\n\n\n > .cell {\n @include xy-cell-reset();\n }\n\n > .auto {\n @include xy-cell-static(auto, false, $vertical: true);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false, $vertical: true);\n }\n\n\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues and PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n %-xy-cell-base-shrink-vertical-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);\n }\n }\n\n }\n }\n\n @if $padding-grid {\n .grid-padding-y {\n // Negative margin for nested grids\n .grid-padding-y {\n @include xy-gutters($negative: true, $gutter-position: top bottom);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);\n }\n }\n }\n\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n }\n\n}\n\n@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {\n // Framed grid styles\n .grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .cell-block {\n @include xy-cell-block();\n }\n\n .cell-block-y {\n @include xy-cell-block(true);\n }\n\n\n .cell-block-container {\n @include xy-cell-block-container();\n }\n\n\n @include -zf-each-breakpoint(false) {\n\n .#{$-zf-size}-grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .#{$-zf-size}-grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .#{$-zf-size}-cell-block {\n @include xy-cell-block();\n }\n\n .#{$-zf-size}-cell-block-container {\n @include xy-cell-block-container();\n }\n\n .#{$-zf-size}-cell-block-y {\n @include xy-cell-block(true);\n }\n }\n\n @if $vertical-grid {\n .grid-y {\n &.grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n @include -zf-each-breakpoint(false) {\n &.#{$-zf-size}-grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n }\n }\n .cell {\n .grid-y.grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n @include -zf-each-breakpoint(false) {\n .grid-y.#{$-zf-size}-grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n }\n }\n }\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n .grid-frame.grid-margin-y {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);\n }\n @include -zf-each-breakpoint(false) {\n .grid-margin-y.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);\n }\n }\n }\n}\n\n// Final classes\n@mixin foundation-xy-grid-classes(\n $base-grid: true,\n $margin-grid: true,\n $padding-grid: true,\n $block-grid: true,\n $collapse: true,\n $offset: true,\n $vertical-grid: true,\n $frame-grid: true\n) {\n\n // Base grid styles\n @if($base-grid) {\n @include xy-base-grid-classes();\n }\n\n // Margin grid\n @if($margin-grid) {\n @include xy-margin-grid-classes();\n }\n\n // Padding grid\n @if($padding-grid) {\n @include xy-padding-grid-classes();\n }\n\n // Block grid\n @if($block-grid) {\n @include xy-block-grid-classes($margin-grid, $padding-grid);\n }\n\n // Collapse gutters\n @if($collapse) {\n @include xy-collapse-grid-classes($margin-grid, $padding-grid);\n }\n\n // Offset gutters\n @if($offset) {\n @include xy-offset-cell-classes();\n }\n\n // Vertical grid\n @if($vertical-grid) {\n @include xy-vertical-grid-classes($margin-grid, $padding-grid);\n }\n\n @if ($frame-grid) {\n @include xy-frame-grid-classes($vertical-grid, $margin-grid)\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @else if (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n/// @param {Number} $padding [$grid-container-padding] - paddings of the container.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin-left: auto;\n margin-right: auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @else if type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @else if ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @else if ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @else if ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @else if ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @else if ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $bp-is-fallback: false;\n\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n $bp-is-fallback: true;\n }\n }\n\n // Get the gutter for the given breakpoint/value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n // If the breakpoint is a fallback, use a fallback gutter as well\n @if ($bp-is-fallback == true and $gutter == null) {\n $gutter: 0;\n }\n\n @if($gutter != null) {\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n }\n @else {\n @warn 'xy-cell: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\", cell was not generated`'\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Sizes child elements so that `$n` number of items appear on each row.\n///\n/// @param {Number} $n - Number of elements to display per row.\n/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-grid-layout(\n $n,\n $selector: '.cell',\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $size: percentage(1/$n);\n\n & > #{$selector} {\n @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Collapses the grid a cells within it.\n///\n/// @param {String} $selector [.cell] - The child element to remove the gutter from.\n/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.\n/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.\n@mixin xy-grid-collapse(\n $selector: '.cell',\n $gutter-type: margin,\n $gutter-position: right left,\n $min-breakpoint: $-zf-zero-breakpoint\n) {\n // First, lets negate any margins on the top level\n @if ($gutter-type == 'margin') {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n }\n }\n\n $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);\n\n // Output new widths to not include gutters\n @each $bp in $breakpoint-classes {\n @if(sl-contain($excluded-bps, $bp)) {\n @include breakpoint($min-breakpoint) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n } @else {\n @include breakpoint($bp) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n }\n }\n }\n @else {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n padding-#{$value}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Offsets a column to the right/bottom by `$n` columns.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {Number|Array|Keyword} $breakpoint [$-zf-zero-breakpoint] - Single value, breakpoint name, or list of breakpoint names to use for `$gutters`. See `-zf-breakpoint-value()`.\n/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.\n@mixin xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n $direction: if($vertical, 'top', $global-left);\n\n @include -zf-breakpoint-value($breakpoint, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n $gutter-margin: if($gutter-type == 'margin', $gutter, 0);\n $size: if($gutter-margin == 0, #{xy-cell-size($n)}, calc(#{xy-cell-size($n)} + #{$gutter-margin}));\n\n margin-#{$direction}: #{$size};\n }\n}\n","/// Modifies a grid to give it \"frame\" behavior (no overflow, no wrap, stretch behavior)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.\n/// @param {Number|Map} $gutters [null] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.\n/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.\n@mixin xy-grid-frame(\n $vertical: false,\n $nested: false,\n $gutters: null,\n $breakpoint: null,\n $include-base: true\n) {\n\n @if $include-base {\n overflow: hidden;\n position: relative;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n\n @if $breakpoint == null and type-of($gutters) == 'map' {\n @include -zf-each-breakpoint() {\n @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);\n }\n } @else {\n // Get our gutters if applicable\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // If we have a gutter, add it to the width/height\n @if $gutter {\n @if $vertical == true {\n $unit: if($nested == true, 100%, 100vh);\n $gutter: rem-calc($gutter);\n height: calc(#{$unit} + #{$gutter});\n } @else {\n $unit: if($nested == true, 100%, 100vw);\n $gutter: rem-calc($gutter);\n width: calc(#{$unit} + #{$gutter});\n }\n }\n @else {\n @if $vertical == true {\n height: if($nested == true, 100%, 100vh);\n } @else {\n width: if($nested == true, 100%, 100vw);\n }\n }\n }\n}\n\n/// Modifies a cell to give it \"block\" behavior (overflow auto, inertial scrolling)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n@mixin xy-cell-block(\n $vertical: false\n) {\n $property: if($vertical == true, 'overflow-y', 'overflow-x');\n\n @if $vertical == true {\n overflow-y: auto;\n max-height: 100%;\n min-height: 100%;\n } @else {\n overflow-x: auto;\n max-width: 100%;\n }\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n/// Container for inside a grid frame containing multiple blocks. Typically used\n/// as a modifier for a `.cell` to allow the cell to pass along flex sizing\n/// constraints / from parents to children.\n@mixin xy-cell-block-container() {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n\n > .grid-x {\n max-height: 100%;\n flex-wrap: nowrap;\n }\n}\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Overrides and styles for form inputs\n// Should hopefully be removed as all styles are moved to individual components\n\ninput,\nselect,\n.Select-control {\n &:hover {\n background-color: $n150;\n }\n}\n\nselect {\n &:hover {\n &:focus {\n background-color: $n150;\n }\n }\n}\n\ninput,\ntextarea,\nselect {\n &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes\n color: $n400;\n }\n\n &:disabled{\n &,\n &:hover {\n cursor: not-allowed;\n background-color: $n200;\n }\n }\n}\n\ninput.is-invalid-input:focus {\n border-color: $r300;\n}\n\n.input-group {\n > :last-child {\n border-left: 0;\n border-radius: 0 $input-radius $input-radius 0;\n }\n}\n\n.input-group-label {\n &.disabled {\n .icon {\n color: $n400;\n }\n }\n}\n\n.form-error {\n font-weight: 600;\n}\n\n.select2 {\n margin: 0 0 1rem;\n\n .select2-selection {\n border: 1px solid $n400;\n height: 2.4375rem;\n\n &:focus {\n outline: 1px solid black;\n outline-offset: 2px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease;\n }\n\n &:hover {\n background-color: $n200;\n }\n }\n\n .selection {\n .select2-selection__rendered {\n line-height: 1.5;\n padding: 8px 24px 8px 8px;\n color: $n700;\n }\n\n .select2-selection__arrow {\n height: 24px;\n margin-top: 7px;\n margin-right: 2px;\n\n b {\n border-color: $n700 transparent transparent transparent;\n }\n }\n }\n}\n\n.select2-dropdown {\n .select2-results__option {\n color: $n600;\n\n &.select2-results__option[aria-selected=true] {\n background-color: $n200;\n color: $n700;\n }\n\n &.select2-results__option--highlighted[aria-selected] {\n background-color: $i100;\n color: $n700;\n }\n }\n}\n","@import '../../variables.scss';\n\n$pill-styles: (\n primary: (\n background-color: $i100,\n text-color: $i600,\n border-color: $i400\n ),\n secondary: (\n background-color: $b100,\n text-color: $b600,\n border-color: $b400\n ),\n success: (\n background-color: $g100,\n text-color: $g600,\n border-color: $g400\n ),\n warning: (\n background-color: $o100,\n text-color: $o600,\n border-color: $o400\n ),\n alert: (\n background-color: $r100,\n text-color: $r600,\n border-color: $r300\n ),\n neutral: (\n background-color: $n250,\n text-color: $n800,\n border-color: $n400\n ),\n highlight: (\n background-color: $c100,\n text-color: $c600,\n border-color: $c400\n ),\n dark: (\n background-color: $n700,\n text-color: $n200,\n border-color: $n100\n )\n);\n\n@mixin pill-color(\n $text-color,\n $background-color,\n $border-color\n) {\n background: $background-color;\n border: 1px solid $border-color;\n color: $text-color;\n}\n\n// --------------\n// Legacy global pill (label) class for non-javascript support\n// --------------\n// sass-lint:disable placeholder-in-extend\n.label {\n border-radius: 32px;\n display: inline-block;\n font-size: $fz-xsmall;\n font-weight: $fw-semi-bold;\n line-height: 14px;\n padding: 4px 8px;\n white-space: nowrap;\n\n @each $color, $value in $pill-styles {\n &.#{$color} {\n @include pill-color(\n map-get($value, text-color),\n map-get($value, background-color),\n map-get($value, border-color)\n );\n }\n }\n\n &.medium {\n font-size: $fz-small;\n line-height: 16px;\n }\n\n &.large {\n font-size: $fz-body;\n line-height: 18px;\n padding: 4px 12px;\n }\n\n // Neutral by default\n @extend .neutral;\n\n // Domain specific colours; unfortunately have to be kept for now\n &.leave {\n @extend .warning;\n }\n\n &.overdue {\n @extend .alert;\n }\n\n &.draft {\n @extend .neutral;\n }\n\n &.abandoned {\n @extend .primary;\n }\n}\n// sass-lint:enable placeholder-in-extend\n\n\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Old version of avatar entity; kept here for now to show off in the style guide\n// Should be removed once we're satisfied we can port to avatar entity in future\n.person-tag {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: 2px;\n\n .grid-x {\n flex-wrap: nowrap;\n width: 100%;\n }\n\n .person-label {\n align-items: center;\n display: flex;\n }\n\n .avatar-container {\n align-self: start;\n display: flex;\n position: relative;\n\n .avatar-icon {\n position: absolute;\n right: 0;\n text-align: right;\n top: 27px;\n\n .icon {\n font-size: 14px;\n }\n }\n }\n\n .display-name {\n align-self: center;\n color: $n700;\n overflow: hidden;\n padding-left: 10px;\n\n .position-title {\n color: $n600;\n font-size: .8125rem;\n line-height: 1.3;\n margin-top: 2px;\n }\n }\n\n .person-tag-description {\n color: $n600;\n font-size: .75rem;\n font-weight: 600;\n }\n\n &.cursor-auto {\n cursor: auto;\n }\n\n &.cursor-pointer {\n cursor: pointer;\n }\n\n .has-tip {\n display: inherit;\n }\n\n .header-component {\n font-size: .9375rem;\n font-weight: normal;\n\n .overdue-count {\n @include breakpoint(small down) {\n order: 2;\n }\n }\n }\n\n .tag-icon {\n i {\n font-size: 2rem;\n margin-right: 10px;\n }\n }\n}\n\n.avatar-container {\n display: inline-block;\n position: relative;\n}\n\n.profile-picture-badge,\n.initials-badge {\n border: 1px solid $n400;\n border-radius: 50%;\n color: $i400;\n display: inline-block;\n font-size: 1rem;\n font-weight: 600;\n height: 40px;\n line-height: 38px;\n overflow: hidden;\n text-align: center;\n width: 40px;\n user-select: none;\n vertical-align: middle;\n\n .extended-leave-circle {\n background-color: $o400;\n bottom: -.1rem;\n border: 2px solid $n100;\n border-radius: 50%;\n right: -.3rem;\n padding: 5.5px;\n position: absolute;\n }\n\n img {\n vertical-align: initial;\n width: 100%;\n }\n\n &.badge-small {\n font-size: 0.8rem;\n height: 30px;\n line-height: 28px;\n width: 30px;\n\n .extended-leave-circle {\n padding: 5px;\n }\n }\n\n &.badge-large {\n font-size: 1.5rem;\n height: 72px;\n line-height: 70px;\n width: 72px;\n\n .extended-leave-circle {\n bottom: .1rem;\n right: .1rem;\n padding: 6.5px;\n }\n }\n\n &.badge-xlarge {\n font-size: 2.5rem;\n height: 120px;\n line-height: 118px;\n width: 120px;\n\n .extended-leave-circle {\n bottom: .25rem;\n right: .75rem;\n padding: 7px;\n }\n }\n}\n\n.profile-picture-badge {\n background-color: transparent;\n}\n\n.initials-badge {\n background-color: $n200;\n text-transform: uppercase;\n}\n","@import '../../variables';\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n border: 0;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead,\n tbody {\n border: 0;\n }\n\n thead {\n background: $n200;\n border-bottom: 2px solid $n400;\n\n th {\n font-weight: 600;\n }\n }\n\n tbody {\n tr {\n border: 0;\n border-bottom: 1px solid $n300;\n }\n }\n\n .button-group {\n margin-bottom: 0;\n }\n}\n\n\ntr {\n &.highlight {\n // As styled by foundation's callout\n background-color: $o100;\n }\n\n &.alert {\n background-color: $r100;\n }\n}\n\nth,\ntd {\n &.fit {\n white-space: nowrap;\n width: 1%;\n }\n\n &.collapse-all {\n word-break: break-all;\n word-wrap: break-word;\n }\n}\n\ntd {\n .button {\n margin: auto;\n }\n\n &.contains-inputs {\n input,\n select {\n margin: 0;\n }\n\n .input-group {\n margin: 0;\n }\n }\n}\n\n.table-full-width {\n margin-left: auto;\n margin-right: auto;\n max-width: initial;\n width: 100%;\n\n tr td.fit {\n white-space: nowrap;\n width: 1%;\n\n .button-group {\n .button {\n float: none;\n }\n }\n }\n}\n","@import '../../variables';\n\nh1, .h1 {\n font-size: 2rem;\n font-weight: 600;\n line-height: 3.5rem;\n}\n\nh6 {\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n\n.display-text-1 {\n font-size: 4.125rem;\n font-weight: 300;\n}\n\n.display-text-2 {\n font-size: 3.25rem;\n font-weight: 400;\n}\n\n.display-text-3 {\n font-size: 2.5625em;\n font-weight: 400;\n}\n\n.subheader {\n color: $n600;\n}\n\n.title {\n color: $n600;\n font-size: 1.4375rem;\n margin-bottom: .4rem;\n}\n\n%section-header {\n color: $n800;\n font-size: 1.125em;\n font-weight: 600;\n}\n\n.section-header {\n @extend %section-header\n}\n\np.page-subheader {\n color: $n600;\n font-size: .9375rem;\n}\n"],"sourceRoot":""}
\n// - Abbreviations \n// - Citations \n// - Keystrokes \n\n/// Font family for header elements.\n/// @type String | List\n$header-font-family: $body-font-family !default;\n\n/// Font weight of headers.\n/// @type String\n$header-font-weight: $global-weight-normal !default;\n\n/// Font style (e.g. italicized) of headers.\n/// @type String\n$header-font-style: normal !default;\n\n/// Font stack used for elements that use monospaced type, such as code samples\n/// @type String | List\n$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace !default;\n\n/// Color of headers.\n/// @type Color\n$header-color: inherit !default;\n\n/// Line height of headers.\n/// @type Number\n$header-lineheight: 1.4 !default;\n\n/// Bottom margin of headers.\n/// @type Number\n$header-margin-bottom: 0.5rem !default;\n\n/// Styles for headings at various screen sizes. Each key is a breakpoint, and each value is a map of heading styles.\n/// @type Map\n$header-styles: (\n small: (\n 'h1': ('font-size': 24),\n 'h2': ('font-size': 20),\n 'h3': ('font-size': 19),\n 'h4': ('font-size': 18),\n 'h5': ('font-size': 17),\n 'h6': ('font-size': 16),\n ),\n medium: (\n 'h1': ('font-size': 48),\n 'h2': ('font-size': 40),\n 'h3': ('font-size': 31),\n 'h4': ('font-size': 25),\n 'h5': ('font-size': 20),\n 'h6': ('font-size': 16),\n ),\n) !default;\n\n// $header-styles map is built from $header-sizes in order to ensure downward compatibility\n// when $header-sizes is depreciated, $header-styles needs to get !default values like settings.scss\n@function build_from_header-sizes($header-sizes) {\n @warn 'Note, that $header-sizes has been replaced with $header-styles. $header-sizes still works, but it is going to be depreciated.';\n $header-styles: ();\n @each $size, $headers in $header-sizes {\n $header-map: ();\n @each $header, $font-size in $headers {\n $header-map: map-merge($header-map, ($header: ('font-size': $font-size)));\n }\n $header-styles: map-merge($header-styles, ($size: $header-map));\n }\n @return $header-styles;\n}\n\n// If it exists $headers-sizes is used to build $header-styles. See the documentation.\n@if variable-exists(header-sizes) {\n $header-styles: build_from_header-sizes($header-sizes);\n}\n\n/// Text rendering method of headers.\n/// @type String\n$header-text-rendering: optimizeLegibility !default;\n\n/// Font size of `` elements.\n/// @type Number\n$small-font-size: 80% !default;\n\n/// Color of `` elements when placed inside headers.\n/// @type Color\n$header-small-font-color: $medium-gray !default;\n\n/// Line height of text inside `` elements.\n/// @type Number\n$paragraph-lineheight: 1.6 !default;\n\n/// Bottom margin of paragraphs.\n/// @type Number\n$paragraph-margin-bottom: 1rem !default;\n\n/// Text rendering method for paragraph text.\n/// @type String\n$paragraph-text-rendering: optimizeLegibility !default;\n\n/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `` elements.\n/// @type Number\n$defnlist-margin-bottom: 1rem !default;\n\n/// Font weight for `` elements.\n/// @type String\n$defnlist-term-weight: $global-weight-bold !default;\n\n/// Spacing between `` and `` elements.\n/// @type Number\n$defnlist-term-margin-bottom: 0.3rem !default;\n\n/// Text color of `` elements.\n/// @type Color\n$blockquote-color: $dark-gray !default;\n\n/// Padding inside a `` element.\n/// @type Number | List\n$blockquote-padding: rem-calc(9 20 0 19) !default;\n\n/// Side border for `` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\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 code {\n padding: $code-padding;\n\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 // 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 by ZURB\n// foundation.zurb.com\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@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","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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}\n\n@mixin foundation-form-select {\n select {\n @include form-select;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group tooltip\n////\n\n/// Default cursor of the defined term.\n/// @type Keyword\n$has-tip-cursor: help !default;\n\n/// Default font weight of the defined term.\n/// @type Keyword | Number\n$has-tip-font-weight: $global-weight-bold !default;\n\n/// Default border bottom of the defined term.\n/// @type List\n$has-tip-border-bottom: dotted 1px $dark-gray !default;\n\n/// Default color of the tooltip background.\n/// @type Color\n$tooltip-background-color: $black !default;\n\n/// Default color of the tooltip font.\n/// @type Color\n$tooltip-color: $white !default;\n\n/// Default padding of the tooltip background.\n/// @type Number\n$tooltip-padding: 0.75rem !default;\n\n/// Default max width for tooltips.\n/// @type Number\n$tooltip-max-width: 10rem !default;\n\n/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.\n/// @type Number\n$tooltip-font-size: $small-font-size !default;\n\n/// Default pip width for tooltips.\n/// @type Number\n$tooltip-pip-width: 0.75rem !default;\n\n/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.\n/// @type Number\n$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;\n\n/// Default radius for tooltips.\n/// @type Number\n$tooltip-radius: $global-radius !default;\n\n@mixin has-tip {\n position: relative;\n display: inline-block;\n\n border-bottom: $has-tip-border-bottom;\n font-weight: $has-tip-font-weight;\n cursor: $has-tip-cursor;\n}\n\n@mixin tooltip {\n position: absolute;\n top: calc(100% + #{$tooltip-pip-height});\n z-index: 1200;\n\n max-width: $tooltip-max-width;\n padding: $tooltip-padding;\n\n border-radius: $tooltip-radius;\n background-color: $tooltip-background-color;\n font-size: $tooltip-font-size;\n color: $tooltip-color;\n\n &::before {\n position: absolute;\n }\n\n &.bottom {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);\n bottom: 100%;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.top {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);\n top: 100%;\n bottom: auto;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.left {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);\n left: 100%;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.right {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);\n right: 100%;\n left: auto;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.align-top::before {\n bottom: auto;\n top: 10%;\n }\n\n &.align-bottom::before {\n bottom: 10%;\n top: auto;\n }\n\n &.align-left::before {\n left: 10%;\n right: auto;\n }\n\n &.align-right::before {\n left: auto;\n right: 10%;\n }\n}\n\n@mixin foundation-tooltip {\n .has-tip {\n @include has-tip;\n }\n\n .tooltip {\n @include tooltip;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group Flexbox Utilities\n////\n//\n/// Default value for the count of source ordering`\n/// @type Number\n$flex-source-ordering-count: 6 !default;\n\n/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.\n/// @type Boolean\n$flexbox-responsive-breakpoints: true !default;\n\n@mixin flex-helpers {\n .flex-container {\n @include flex;\n }\n\n .flex-child-auto {\n flex: 1 1 auto;\n }\n\n .flex-child-grow {\n flex: 1 0 auto;\n }\n\n .flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n\n @if ($flexbox-responsive-breakpoints) {\n // Loop through Responsive Breakpoints\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-flex-container {\n @include flex;\n }\n\n .#{$size}-flex-child-auto {\n flex: 1 1 auto;\n }\n\n .#{$size}-flex-child-grow {\n flex: 1 0 auto;\n }\n\n .#{$size}-flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .#{$size}-flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n }\n }\n }\n }\n}\n\n@mixin foundation-flex-classes {\n // Horizontal alignment using justify-content\n @each $hdir, $prop in $-zf-flex-justify {\n .align-#{$hdir} {\n @include flex-align($x: $hdir);\n }\n }\n \n // Horizontal alignment Specifically for Vertical Menu\n @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {\n .align-#{$hdir} {\n &.vertical {\n &.menu > li > a {\n @include flex-align($x: $hdir);\n }\n }\n }\n }\n\n // Vertical alignment using align-items and align-self\n @each $vdir, $prop in $-zf-flex-align {\n .align-#{$vdir} {\n @include flex-align($y: $vdir);\n }\n\n .align-self-#{$vdir} {\n @include flex-align-self($y: $vdir);\n }\n }\n\n // Central alignment of content\n .align-center-middle {\n @include flex-align($x: center, $y: middle);\n align-content: center;\n }\n\n // Source ordering\n @include -zf-each-breakpoint {\n @for $i from 1 through $flex-source-ordering-count {\n .#{$-zf-size}-order-#{$i} {\n @include flex-order($i);\n }\n }\n }\n\n // Vanilla Flexbox Helpers\n @include flex-helpers;\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// Hide an element by default, only displaying it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for($size) {\n $size: map-get($breakpoints, $size);\n // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).\n // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.\n // See https://github.com/zurb/foundation-sites/issues/11313\n $size: -zf-bp-to-em($size) - .00125;\n\n @include breakpoint($size down) {\n display: none !important;\n }\n}\n\n/// Hide an element by default, only displaying it within a certain breakpoint.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for-only($size) {\n $lower-bound-size: map-get($breakpoints, $size);\n $upper-bound-size: -zf-map-next($breakpoints, $size);\n\n // more often than not this will be correct, just one time round the loop it won't so set in scope here\n $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;\n // test actual lower-bound-size, if 0 set it to 0em\n @if strip-unit($lower-bound-size) == 0 {\n $lower-bound: -zf-bp-to-em($lower-bound-size);\n }\n\n @if $upper-bound-size == null {\n @media screen and (max-width: $lower-bound) {\n display: none !important;\n }\n }\n @else {\n $upper-bound: -zf-bp-to-em($upper-bound-size);\n\n @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {\n display: none !important;\n }\n }\n}\n\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for($size) {\n @include breakpoint($size) {\n display: none !important;\n }\n}\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for-only($size) {\n @include breakpoint($size only) {\n display: none !important;\n }\n}\n\n@mixin foundation-visibility-classes {\n // Basic hiding classes\n .hide {\n display: none !important;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n // Responsive visibility classes\n @each $size in $breakpoint-classes {\n @if $size != $-zf-zero-breakpoint {\n .hide-for-#{$size} {\n @include hide-for($size);\n }\n\n .show-for-#{$size} {\n @include show-for($size);\n }\n }\n\n .hide-for-#{$size}-only {\n @include hide-for-only($size);\n }\n\n .show-for-#{$size}-only {\n @include show-for-only($size);\n }\n }\n\n // Screen reader visibility classes\n // Need a \"hide-for-sr\" class? Add aria-hidden='true' to the element\n .show-for-sr,\n .show-on-focus {\n @include element-invisible;\n }\n\n // Only display the element when it's focused\n .show-on-focus {\n &:active,\n &:focus {\n @include element-invisible-off;\n }\n }\n\n // Landscape and portrait visibility\n .show-for-landscape,\n .hide-for-portrait {\n display: block !important;\n\n @include breakpoint(landscape) {\n display: block !important;\n }\n\n @include breakpoint(portrait) {\n display: none !important;\n }\n }\n\n .hide-for-landscape,\n .show-for-portrait {\n display: none !important;\n\n @include breakpoint(landscape) {\n display: none !important;\n }\n\n @include breakpoint(portrait) {\n display: block !important;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n// Margin Grid classes\n@mixin xy-base-grid-classes {\n\n // Grid Container\n .grid-container {\n @include xy-grid-container;\n\n &.fluid {\n @include xy-grid-container(100%);\n }\n\n &.full {\n @include xy-grid-container(100%, 0);\n }\n }\n\n // Base grid styles\n .grid-x {\n @include xy-grid;\n }\n\n .cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &.auto {\n @include xy-cell-base(auto);\n }\n\n &.shrink {\n @include xy-cell-base(shrink);\n }\n\n }\n .grid-x {\n > .auto {\n @include xy-cell-static(auto, false);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Auto width\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues & PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n .grid-x {\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false);\n }\n }\n\n %-xy-cell-base-shrink-horizontal-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n .grid-x > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static($i, false, $gutter-type: padding);\n }\n }\n }\n\n // Reset width when using `.grid-margin-x` not on `.grid-x`\n .grid-margin-x:not(.grid-x) > .cell {\n width: auto;\n }\n\n // Reset height when using `.grid-margin-y` not on `.grid-y`\n .grid-margin-y:not(.grid-y) > .cell {\n height: auto;\n }\n}\n\n@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {\n $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');\n > .#{$prefix}auto {\n @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n > .#{$prefix}shrink {\n @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');\n\n > #{$classname} {\n @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n }\n}\n\n// Margin Grid classes\n@mixin xy-margin-grid-classes(\n $gutter-position: left right,\n $vertical: false,\n $wrapping-selector: '.grid-margin-x'\n){\n #{$wrapping-selector} {\n @include xy-gutters($negative: true, $gutter-position: $gutter-position);\n\n // Base cell styles\n > .cell {\n @include xy-cell-static($vertical: $vertical);\n }\n\n // base styles need to all be before the auto and shrink styles\n @include -zf-each-breakpoint() {\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {\n > .cell {\n @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for all prior breakpoints.\n // As their gutter is defined with their width/height, even breakpoint without a new margin must be\n // generated to not having their width/height overrided by re-adjusted smaller breakpoints.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);\n }\n }\n\n @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);\n }\n }\n}\n\n// Padding Grid classes\n@mixin xy-padding-grid-classes {\n .grid-padding-x {\n\n // Negative margin for nested grids\n .grid-padding-x {\n @include xy-gutters($negative: true);\n }\n\n // Negative margin for grids within `grid-container/grid-container.fluid`\n // This allows margin and padding grids to line up with eachother\n .grid-container:not(.full) > & {\n @include xy-gutters($negative: true);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n }\n}\n\n// Block Grid classes\n@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {\n @if $padding-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n }\n }\n }\n\n @if $margin-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for prior breakpoints based on the responsive gutter.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @if(map-has-key($grid-margin-gutters, $bp)) {\n .grid-margin-x.#{$bp}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n }\n @for $i from 1 through $xy-block-grid-max {\n .grid-margin-x.#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n}\n\n// Collapse classes\n@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {\n @each $bp in $breakpoint-classes {\n @if $margin-grid {\n .#{$bp}-margin-collapse {\n @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);\n }\n }\n\n @if $padding-grid {\n .#{$bp}-padding-collapse {\n @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);\n }\n }\n }\n}\n\n// Offset classes\n@mixin xy-offset-cell-classes {\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-columns {\n // Offsets\n $o: $i - 1;\n\n .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n\n .grid-margin-x > .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $breakpoint: $-zf-size);\n }\n }\n }\n}\n\n// Vertical Grid classes\n@mixin xy-vertical-grid-classes(\n $margin-grid: true,\n $padding-grid: true\n) {\n\n @include -zf-each-breakpoint() {\n @if not($-zf-size == small) {\n }\n }\n\n .grid-y {\n @include xy-grid(vertical, false);\n\n\n > .cell {\n @include xy-cell-reset();\n }\n\n > .auto {\n @include xy-cell-static(auto, false, $vertical: true);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false, $vertical: true);\n }\n\n\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues and PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n %-xy-cell-base-shrink-vertical-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);\n }\n }\n\n }\n }\n\n @if $padding-grid {\n .grid-padding-y {\n // Negative margin for nested grids\n .grid-padding-y {\n @include xy-gutters($negative: true, $gutter-position: top bottom);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);\n }\n }\n }\n\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n }\n\n}\n\n@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {\n // Framed grid styles\n .grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .cell-block {\n @include xy-cell-block();\n }\n\n .cell-block-y {\n @include xy-cell-block(true);\n }\n\n\n .cell-block-container {\n @include xy-cell-block-container();\n }\n\n\n @include -zf-each-breakpoint(false) {\n\n .#{$-zf-size}-grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .#{$-zf-size}-grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .#{$-zf-size}-cell-block {\n @include xy-cell-block();\n }\n\n .#{$-zf-size}-cell-block-container {\n @include xy-cell-block-container();\n }\n\n .#{$-zf-size}-cell-block-y {\n @include xy-cell-block(true);\n }\n }\n\n @if $vertical-grid {\n .grid-y {\n &.grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n @include -zf-each-breakpoint(false) {\n &.#{$-zf-size}-grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n }\n }\n .cell {\n .grid-y.grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n @include -zf-each-breakpoint(false) {\n .grid-y.#{$-zf-size}-grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n }\n }\n }\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n .grid-frame.grid-margin-y {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);\n }\n @include -zf-each-breakpoint(false) {\n .grid-margin-y.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);\n }\n }\n }\n}\n\n// Final classes\n@mixin foundation-xy-grid-classes(\n $base-grid: true,\n $margin-grid: true,\n $padding-grid: true,\n $block-grid: true,\n $collapse: true,\n $offset: true,\n $vertical-grid: true,\n $frame-grid: true\n) {\n\n // Base grid styles\n @if($base-grid) {\n @include xy-base-grid-classes();\n }\n\n // Margin grid\n @if($margin-grid) {\n @include xy-margin-grid-classes();\n }\n\n // Padding grid\n @if($padding-grid) {\n @include xy-padding-grid-classes();\n }\n\n // Block grid\n @if($block-grid) {\n @include xy-block-grid-classes($margin-grid, $padding-grid);\n }\n\n // Collapse gutters\n @if($collapse) {\n @include xy-collapse-grid-classes($margin-grid, $padding-grid);\n }\n\n // Offset gutters\n @if($offset) {\n @include xy-offset-cell-classes();\n }\n\n // Vertical grid\n @if($vertical-grid) {\n @include xy-vertical-grid-classes($margin-grid, $padding-grid);\n }\n\n @if ($frame-grid) {\n @include xy-frame-grid-classes($vertical-grid, $margin-grid)\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @else if (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n/// @param {Number} $padding [$grid-container-padding] - paddings of the container.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin-left: auto;\n margin-right: auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @else if type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @else if ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @else if ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @else if ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @else if ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @else if ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $bp-is-fallback: false;\n\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n $bp-is-fallback: true;\n }\n }\n\n // Get the gutter for the given breakpoint/value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n // If the breakpoint is a fallback, use a fallback gutter as well\n @if ($bp-is-fallback == true and $gutter == null) {\n $gutter: 0;\n }\n\n @if($gutter != null) {\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n }\n @else {\n @warn 'xy-cell: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\", cell was not generated`'\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Sizes child elements so that `$n` number of items appear on each row.\n///\n/// @param {Number} $n - Number of elements to display per row.\n/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-grid-layout(\n $n,\n $selector: '.cell',\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $size: percentage(1/$n);\n\n & > #{$selector} {\n @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Collapses the grid a cells within it.\n///\n/// @param {String} $selector [.cell] - The child element to remove the gutter from.\n/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.\n/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.\n@mixin xy-grid-collapse(\n $selector: '.cell',\n $gutter-type: margin,\n $gutter-position: right left,\n $min-breakpoint: $-zf-zero-breakpoint\n) {\n // First, lets negate any margins on the top level\n @if ($gutter-type == 'margin') {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n }\n }\n\n $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);\n\n // Output new widths to not include gutters\n @each $bp in $breakpoint-classes {\n @if(sl-contain($excluded-bps, $bp)) {\n @include breakpoint($min-breakpoint) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n } @else {\n @include breakpoint($bp) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n }\n }\n }\n @else {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n padding-#{$value}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Offsets a column to the right/bottom by `$n` columns.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {Number|Array|Keyword} $breakpoint [$-zf-zero-breakpoint] - Single value, breakpoint name, or list of breakpoint names to use for `$gutters`. See `-zf-breakpoint-value()`.\n/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.\n@mixin xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n $direction: if($vertical, 'top', $global-left);\n\n @include -zf-breakpoint-value($breakpoint, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n $gutter-margin: if($gutter-type == 'margin', $gutter, 0);\n $size: if($gutter-margin == 0, #{xy-cell-size($n)}, calc(#{xy-cell-size($n)} + #{$gutter-margin}));\n\n margin-#{$direction}: #{$size};\n }\n}\n","/// Modifies a grid to give it \"frame\" behavior (no overflow, no wrap, stretch behavior)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.\n/// @param {Number|Map} $gutters [null] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.\n/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.\n@mixin xy-grid-frame(\n $vertical: false,\n $nested: false,\n $gutters: null,\n $breakpoint: null,\n $include-base: true\n) {\n\n @if $include-base {\n overflow: hidden;\n position: relative;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n\n @if $breakpoint == null and type-of($gutters) == 'map' {\n @include -zf-each-breakpoint() {\n @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);\n }\n } @else {\n // Get our gutters if applicable\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // If we have a gutter, add it to the width/height\n @if $gutter {\n @if $vertical == true {\n $unit: if($nested == true, 100%, 100vh);\n $gutter: rem-calc($gutter);\n height: calc(#{$unit} + #{$gutter});\n } @else {\n $unit: if($nested == true, 100%, 100vw);\n $gutter: rem-calc($gutter);\n width: calc(#{$unit} + #{$gutter});\n }\n }\n @else {\n @if $vertical == true {\n height: if($nested == true, 100%, 100vh);\n } @else {\n width: if($nested == true, 100%, 100vw);\n }\n }\n }\n}\n\n/// Modifies a cell to give it \"block\" behavior (overflow auto, inertial scrolling)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n@mixin xy-cell-block(\n $vertical: false\n) {\n $property: if($vertical == true, 'overflow-y', 'overflow-x');\n\n @if $vertical == true {\n overflow-y: auto;\n max-height: 100%;\n min-height: 100%;\n } @else {\n overflow-x: auto;\n max-width: 100%;\n }\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n/// Container for inside a grid frame containing multiple blocks. Typically used\n/// as a modifier for a `.cell` to allow the cell to pass along flex sizing\n/// constraints / from parents to children.\n@mixin xy-cell-block-container() {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n\n > .grid-x {\n max-height: 100%;\n flex-wrap: nowrap;\n }\n}\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Overrides and styles for form inputs\n// Should hopefully be removed as all styles are moved to individual components\n\ninput,\nselect,\n.Select-control {\n &:hover {\n background-color: $n150;\n }\n}\n\nselect {\n &:hover {\n &:focus {\n background-color: $n150;\n }\n }\n}\n\ninput,\ntextarea,\nselect {\n &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes\n color: $n400;\n }\n\n &:disabled{\n &,\n &:hover {\n cursor: not-allowed;\n background-color: $n200;\n }\n }\n}\n\ninput.is-invalid-input:focus {\n border-color: $r300;\n}\n\n.input-group {\n > :last-child {\n border-left: 0;\n border-radius: 0 $input-radius $input-radius 0;\n }\n}\n\n.input-group-label {\n &.disabled {\n .icon {\n color: $n400;\n }\n }\n}\n\n.form-error {\n font-weight: 600;\n}\n\n.select2 {\n margin: 0 0 1rem;\n\n .select2-selection {\n border: 1px solid $n400;\n height: 2.4375rem;\n\n &:focus {\n outline: 1px solid black;\n outline-offset: 2px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease;\n }\n\n &:hover {\n background-color: $n200;\n }\n }\n\n .selection {\n .select2-selection__rendered {\n line-height: 1.5;\n padding: 8px 24px 8px 8px;\n color: $n700;\n }\n\n .select2-selection__arrow {\n height: 24px;\n margin-top: 7px;\n margin-right: 2px;\n\n b {\n border-color: $n700 transparent transparent transparent;\n }\n }\n }\n}\n\n.select2-dropdown {\n .select2-results__option {\n color: $n600;\n\n &.select2-results__option[aria-selected=true] {\n background-color: $n200;\n color: $n700;\n }\n\n &.select2-results__option--highlighted[aria-selected] {\n background-color: $i100;\n color: $n700;\n }\n }\n}\n","@import '../../variables.scss';\n\n$pill-styles: (\n primary: (\n background-color: $i100,\n text-color: $i600,\n border-color: $i400\n ),\n secondary: (\n background-color: $b100,\n text-color: $b600,\n border-color: $b400\n ),\n success: (\n background-color: $g100,\n text-color: $g600,\n border-color: $g400\n ),\n warning: (\n background-color: $o100,\n text-color: $o600,\n border-color: $o400\n ),\n alert: (\n background-color: $r100,\n text-color: $r600,\n border-color: $r300\n ),\n neutral: (\n background-color: $n250,\n text-color: $n800,\n border-color: $n400\n ),\n highlight: (\n background-color: $c100,\n text-color: $c600,\n border-color: $c400\n ),\n dark: (\n background-color: $n700,\n text-color: $n200,\n border-color: $n100\n )\n);\n\n@mixin pill-color(\n $text-color,\n $background-color,\n $border-color\n) {\n background: $background-color;\n border: 1px solid $border-color;\n color: $text-color;\n}\n\n// --------------\n// Legacy global pill (label) class for non-javascript support\n// --------------\n// sass-lint:disable placeholder-in-extend\n.label {\n border-radius: 32px;\n display: inline-block;\n font-size: $fz-xsmall;\n font-weight: $fw-semi-bold;\n line-height: 14px;\n padding: 4px 8px;\n white-space: nowrap;\n\n @each $color, $value in $pill-styles {\n &.#{$color} {\n @include pill-color(\n map-get($value, text-color),\n map-get($value, background-color),\n map-get($value, border-color)\n );\n }\n }\n\n &.medium {\n font-size: $fz-small;\n line-height: 16px;\n }\n\n &.large {\n font-size: $fz-body;\n line-height: 18px;\n padding: 4px 12px;\n }\n\n // Neutral by default\n @extend .neutral;\n\n // Domain specific colours; unfortunately have to be kept for now\n &.leave {\n @extend .warning;\n }\n\n &.overdue {\n @extend .alert;\n }\n\n &.draft {\n @extend .neutral;\n }\n\n &.abandoned {\n @extend .primary;\n }\n}\n// sass-lint:enable placeholder-in-extend\n\n\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Old version of avatar entity; kept here for now to show off in the style guide\n// Should be removed once we're satisfied we can port to avatar entity in future\n.person-tag {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: 2px;\n\n .grid-x {\n flex-wrap: nowrap;\n width: 100%;\n }\n\n .person-label {\n align-items: center;\n display: flex;\n }\n\n .avatar-container {\n align-self: start;\n display: flex;\n position: relative;\n\n .avatar-icon {\n position: absolute;\n right: 0;\n text-align: right;\n top: 27px;\n\n .icon {\n font-size: 14px;\n }\n }\n }\n\n .display-name {\n align-self: center;\n color: $n700;\n overflow: hidden;\n padding-left: 10px;\n\n .position-title {\n color: $n600;\n font-size: .8125rem;\n line-height: 1.3;\n margin-top: 2px;\n }\n }\n\n .person-tag-description {\n color: $n600;\n font-size: .75rem;\n font-weight: 600;\n }\n\n &.cursor-auto {\n cursor: auto;\n }\n\n &.cursor-pointer {\n cursor: pointer;\n }\n\n .has-tip {\n display: inherit;\n }\n\n .header-component {\n font-size: .9375rem;\n font-weight: normal;\n\n .overdue-count {\n @include breakpoint(small down) {\n order: 2;\n }\n }\n }\n\n .tag-icon {\n i {\n font-size: 2rem;\n margin-right: 10px;\n }\n }\n}\n\n.avatar-container {\n display: inline-block;\n position: relative;\n}\n\n.profile-picture-badge,\n.initials-badge {\n border: 1px solid $n400;\n border-radius: 50%;\n color: $i400;\n display: inline-block;\n font-size: 1rem;\n font-weight: 600;\n height: 40px;\n line-height: 38px;\n overflow: hidden;\n text-align: center;\n width: 40px;\n user-select: none;\n vertical-align: middle;\n\n .extended-leave-circle {\n background-color: $o400;\n bottom: -.1rem;\n border: 2px solid $n100;\n border-radius: 50%;\n right: -.3rem;\n padding: 5.5px;\n position: absolute;\n }\n\n img {\n vertical-align: initial;\n width: 100%;\n }\n\n &.badge-small {\n font-size: 0.8rem;\n height: 30px;\n line-height: 28px;\n width: 30px;\n\n .extended-leave-circle {\n padding: 5px;\n }\n }\n\n &.badge-large {\n font-size: 1.5rem;\n height: 72px;\n line-height: 70px;\n width: 72px;\n\n .extended-leave-circle {\n bottom: .1rem;\n right: .1rem;\n padding: 6.5px;\n }\n }\n\n &.badge-xlarge {\n font-size: 2.5rem;\n height: 120px;\n line-height: 118px;\n width: 120px;\n\n .extended-leave-circle {\n bottom: .25rem;\n right: .75rem;\n padding: 7px;\n }\n }\n}\n\n.profile-picture-badge {\n background-color: transparent;\n}\n\n.initials-badge {\n background-color: $n200;\n text-transform: uppercase;\n}\n","@import '../../variables';\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n border: 0;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead,\n tbody {\n border: 0;\n }\n\n thead {\n background: $n200;\n border-bottom: 2px solid $n400;\n\n th {\n font-weight: 600;\n }\n }\n\n tbody {\n tr {\n border: 0;\n border-bottom: 1px solid $n300;\n }\n }\n\n .button-group {\n margin-bottom: 0;\n }\n}\n\n\ntr {\n &.highlight {\n // As styled by foundation's callout\n background-color: $o100;\n }\n\n &.alert {\n background-color: $r100;\n }\n}\n\nth,\ntd {\n &.fit {\n white-space: nowrap;\n width: 1%;\n }\n\n &.collapse-all {\n word-break: break-all;\n word-wrap: break-word;\n }\n}\n\ntd {\n .button {\n margin: auto;\n }\n\n &.contains-inputs {\n input,\n select {\n margin: 0;\n }\n\n .input-group {\n margin: 0;\n }\n }\n}\n\n.table-full-width {\n margin-left: auto;\n margin-right: auto;\n max-width: initial;\n width: 100%;\n\n tr td.fit {\n white-space: nowrap;\n width: 1%;\n\n .button-group {\n .button {\n float: none;\n }\n }\n }\n}\n","@import '../../variables';\n\nh1, .h1 {\n font-size: 2rem;\n font-weight: 600;\n line-height: 3.5rem;\n}\n\nh6 {\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n\n.display-text-1 {\n font-size: 4.125rem;\n font-weight: 300;\n}\n\n.display-text-2 {\n font-size: 3.25rem;\n font-weight: 400;\n}\n\n.display-text-3 {\n font-size: 2.5625em;\n font-weight: 400;\n}\n\n.subheader {\n color: $n600;\n}\n\n.title {\n color: $n600;\n font-size: 1.4375rem;\n margin-bottom: .4rem;\n}\n\n%section-header {\n color: $n800;\n font-size: 1.125em;\n font-weight: 600;\n}\n\n.section-header {\n @extend %section-header\n}\n\np.page-subheader {\n color: $n600;\n font-size: .9375rem;\n}\n"],"sourceRoot":""}
` 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/// Text color of code samples.\n/// @type Color\n$code-color: $black !default;\n\n/// Font family of code samples.\n/// @type String | List\n$code-font-family: $font-family-monospace !default;\n\n/// Font weight of text in code samples.\n/// @type String\n$code-font-weight: $global-weight-normal !default;\n\n/// Background color of code samples.\n/// @type Color\n$code-background: $light-gray !default;\n\n/// Border around code samples.\n/// @type List\n$code-border: 1px solid $medium-gray !default;\n\n/// Padding around text of code samples.\n/// @type Number | List\n$code-padding: rem-calc(2 5 1) !default;\n\n/// Default color for links.\n/// @type Color\n$anchor-color: $primary-color !default;\n\n/// Default color for links on hover.\n/// @type Color\n$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;\n\n/// Default text decoration for links.\n/// @type String\n$anchor-text-decoration: none !default;\n\n/// Default text decoration for links on hover.\n/// @type String\n$anchor-text-decoration-hover: none !default;\n\n/// Maximum width of a divider.\n/// @type Number\n$hr-width: $global-width !default;\n\n/// Default border for a divider.\n/// @type List\n$hr-border: 1px solid $medium-gray !default;\n\n/// Default margin for a divider.\n/// @type Number | List\n$hr-margin: rem-calc(20) auto !default;\n\n/// Line height for items in a list.\n/// @type Number\n$list-lineheight: $paragraph-lineheight !default;\n\n/// Bottom margin for items in a list.\n/// @type Number\n$list-margin-bottom: $paragraph-margin-bottom !default;\n\n/// Bullet type to use for unordered lists (e.g., `square`, `circle`, `disc`).\n/// @type String\n$list-style-type: disc !default;\n\n/// Positioning for bullets on unordered list items.\n/// @type String\n$list-style-position: outside !default;\n\n/// Left (or right) margin for lists.\n/// @type Number\n$list-side-margin: 1.25rem !default;\n\n/// Left (or right) margin for a list inside a list.\n/// @type Number\n$list-nested-side-margin: 1.25rem !default;\n\n/// Bottom margin for `
` elements.\n/// @type 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/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\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 code {\n padding: $code-padding;\n\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 // 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 by ZURB\n// foundation.zurb.com\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@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","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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}\n\n@mixin foundation-form-select {\n select {\n @include form-select;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group tooltip\n////\n\n/// Default cursor of the defined term.\n/// @type Keyword\n$has-tip-cursor: help !default;\n\n/// Default font weight of the defined term.\n/// @type Keyword | Number\n$has-tip-font-weight: $global-weight-bold !default;\n\n/// Default border bottom of the defined term.\n/// @type List\n$has-tip-border-bottom: dotted 1px $dark-gray !default;\n\n/// Default color of the tooltip background.\n/// @type Color\n$tooltip-background-color: $black !default;\n\n/// Default color of the tooltip font.\n/// @type Color\n$tooltip-color: $white !default;\n\n/// Default padding of the tooltip background.\n/// @type Number\n$tooltip-padding: 0.75rem !default;\n\n/// Default max width for tooltips.\n/// @type Number\n$tooltip-max-width: 10rem !default;\n\n/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.\n/// @type Number\n$tooltip-font-size: $small-font-size !default;\n\n/// Default pip width for tooltips.\n/// @type Number\n$tooltip-pip-width: 0.75rem !default;\n\n/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.\n/// @type Number\n$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;\n\n/// Default radius for tooltips.\n/// @type Number\n$tooltip-radius: $global-radius !default;\n\n@mixin has-tip {\n position: relative;\n display: inline-block;\n\n border-bottom: $has-tip-border-bottom;\n font-weight: $has-tip-font-weight;\n cursor: $has-tip-cursor;\n}\n\n@mixin tooltip {\n position: absolute;\n top: calc(100% + #{$tooltip-pip-height});\n z-index: 1200;\n\n max-width: $tooltip-max-width;\n padding: $tooltip-padding;\n\n border-radius: $tooltip-radius;\n background-color: $tooltip-background-color;\n font-size: $tooltip-font-size;\n color: $tooltip-color;\n\n &::before {\n position: absolute;\n }\n\n &.bottom {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);\n bottom: 100%;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.top {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);\n top: 100%;\n bottom: auto;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.left {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);\n left: 100%;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.right {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);\n right: 100%;\n left: auto;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.align-top::before {\n bottom: auto;\n top: 10%;\n }\n\n &.align-bottom::before {\n bottom: 10%;\n top: auto;\n }\n\n &.align-left::before {\n left: 10%;\n right: auto;\n }\n\n &.align-right::before {\n left: auto;\n right: 10%;\n }\n}\n\n@mixin foundation-tooltip {\n .has-tip {\n @include has-tip;\n }\n\n .tooltip {\n @include tooltip;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group Flexbox Utilities\n////\n//\n/// Default value for the count of source ordering`\n/// @type Number\n$flex-source-ordering-count: 6 !default;\n\n/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.\n/// @type Boolean\n$flexbox-responsive-breakpoints: true !default;\n\n@mixin flex-helpers {\n .flex-container {\n @include flex;\n }\n\n .flex-child-auto {\n flex: 1 1 auto;\n }\n\n .flex-child-grow {\n flex: 1 0 auto;\n }\n\n .flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n\n @if ($flexbox-responsive-breakpoints) {\n // Loop through Responsive Breakpoints\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-flex-container {\n @include flex;\n }\n\n .#{$size}-flex-child-auto {\n flex: 1 1 auto;\n }\n\n .#{$size}-flex-child-grow {\n flex: 1 0 auto;\n }\n\n .#{$size}-flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .#{$size}-flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n }\n }\n }\n }\n}\n\n@mixin foundation-flex-classes {\n // Horizontal alignment using justify-content\n @each $hdir, $prop in $-zf-flex-justify {\n .align-#{$hdir} {\n @include flex-align($x: $hdir);\n }\n }\n \n // Horizontal alignment Specifically for Vertical Menu\n @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {\n .align-#{$hdir} {\n &.vertical {\n &.menu > li > a {\n @include flex-align($x: $hdir);\n }\n }\n }\n }\n\n // Vertical alignment using align-items and align-self\n @each $vdir, $prop in $-zf-flex-align {\n .align-#{$vdir} {\n @include flex-align($y: $vdir);\n }\n\n .align-self-#{$vdir} {\n @include flex-align-self($y: $vdir);\n }\n }\n\n // Central alignment of content\n .align-center-middle {\n @include flex-align($x: center, $y: middle);\n align-content: center;\n }\n\n // Source ordering\n @include -zf-each-breakpoint {\n @for $i from 1 through $flex-source-ordering-count {\n .#{$-zf-size}-order-#{$i} {\n @include flex-order($i);\n }\n }\n }\n\n // Vanilla Flexbox Helpers\n @include flex-helpers;\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// Hide an element by default, only displaying it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for($size) {\n $size: map-get($breakpoints, $size);\n // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).\n // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.\n // See https://github.com/zurb/foundation-sites/issues/11313\n $size: -zf-bp-to-em($size) - .00125;\n\n @include breakpoint($size down) {\n display: none !important;\n }\n}\n\n/// Hide an element by default, only displaying it within a certain breakpoint.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for-only($size) {\n $lower-bound-size: map-get($breakpoints, $size);\n $upper-bound-size: -zf-map-next($breakpoints, $size);\n\n // more often than not this will be correct, just one time round the loop it won't so set in scope here\n $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;\n // test actual lower-bound-size, if 0 set it to 0em\n @if strip-unit($lower-bound-size) == 0 {\n $lower-bound: -zf-bp-to-em($lower-bound-size);\n }\n\n @if $upper-bound-size == null {\n @media screen and (max-width: $lower-bound) {\n display: none !important;\n }\n }\n @else {\n $upper-bound: -zf-bp-to-em($upper-bound-size);\n\n @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {\n display: none !important;\n }\n }\n}\n\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for($size) {\n @include breakpoint($size) {\n display: none !important;\n }\n}\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for-only($size) {\n @include breakpoint($size only) {\n display: none !important;\n }\n}\n\n@mixin foundation-visibility-classes {\n // Basic hiding classes\n .hide {\n display: none !important;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n // Responsive visibility classes\n @each $size in $breakpoint-classes {\n @if $size != $-zf-zero-breakpoint {\n .hide-for-#{$size} {\n @include hide-for($size);\n }\n\n .show-for-#{$size} {\n @include show-for($size);\n }\n }\n\n .hide-for-#{$size}-only {\n @include hide-for-only($size);\n }\n\n .show-for-#{$size}-only {\n @include show-for-only($size);\n }\n }\n\n // Screen reader visibility classes\n // Need a \"hide-for-sr\" class? Add aria-hidden='true' to the element\n .show-for-sr,\n .show-on-focus {\n @include element-invisible;\n }\n\n // Only display the element when it's focused\n .show-on-focus {\n &:active,\n &:focus {\n @include element-invisible-off;\n }\n }\n\n // Landscape and portrait visibility\n .show-for-landscape,\n .hide-for-portrait {\n display: block !important;\n\n @include breakpoint(landscape) {\n display: block !important;\n }\n\n @include breakpoint(portrait) {\n display: none !important;\n }\n }\n\n .hide-for-landscape,\n .show-for-portrait {\n display: none !important;\n\n @include breakpoint(landscape) {\n display: none !important;\n }\n\n @include breakpoint(portrait) {\n display: block !important;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n// Margin Grid classes\n@mixin xy-base-grid-classes {\n\n // Grid Container\n .grid-container {\n @include xy-grid-container;\n\n &.fluid {\n @include xy-grid-container(100%);\n }\n\n &.full {\n @include xy-grid-container(100%, 0);\n }\n }\n\n // Base grid styles\n .grid-x {\n @include xy-grid;\n }\n\n .cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &.auto {\n @include xy-cell-base(auto);\n }\n\n &.shrink {\n @include xy-cell-base(shrink);\n }\n\n }\n .grid-x {\n > .auto {\n @include xy-cell-static(auto, false);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Auto width\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues & PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n .grid-x {\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false);\n }\n }\n\n %-xy-cell-base-shrink-horizontal-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n .grid-x > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static($i, false, $gutter-type: padding);\n }\n }\n }\n\n // Reset width when using `.grid-margin-x` not on `.grid-x`\n .grid-margin-x:not(.grid-x) > .cell {\n width: auto;\n }\n\n // Reset height when using `.grid-margin-y` not on `.grid-y`\n .grid-margin-y:not(.grid-y) > .cell {\n height: auto;\n }\n}\n\n@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {\n $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');\n > .#{$prefix}auto {\n @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n > .#{$prefix}shrink {\n @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');\n\n > #{$classname} {\n @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n }\n}\n\n// Margin Grid classes\n@mixin xy-margin-grid-classes(\n $gutter-position: left right,\n $vertical: false,\n $wrapping-selector: '.grid-margin-x'\n){\n #{$wrapping-selector} {\n @include xy-gutters($negative: true, $gutter-position: $gutter-position);\n\n // Base cell styles\n > .cell {\n @include xy-cell-static($vertical: $vertical);\n }\n\n // base styles need to all be before the auto and shrink styles\n @include -zf-each-breakpoint() {\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {\n > .cell {\n @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for all prior breakpoints.\n // As their gutter is defined with their width/height, even breakpoint without a new margin must be\n // generated to not having their width/height overrided by re-adjusted smaller breakpoints.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);\n }\n }\n\n @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);\n }\n }\n}\n\n// Padding Grid classes\n@mixin xy-padding-grid-classes {\n .grid-padding-x {\n\n // Negative margin for nested grids\n .grid-padding-x {\n @include xy-gutters($negative: true);\n }\n\n // Negative margin for grids within `grid-container/grid-container.fluid`\n // This allows margin and padding grids to line up with eachother\n .grid-container:not(.full) > & {\n @include xy-gutters($negative: true);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n }\n}\n\n// Block Grid classes\n@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {\n @if $padding-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n }\n }\n }\n\n @if $margin-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for prior breakpoints based on the responsive gutter.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @if(map-has-key($grid-margin-gutters, $bp)) {\n .grid-margin-x.#{$bp}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n }\n @for $i from 1 through $xy-block-grid-max {\n .grid-margin-x.#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n}\n\n// Collapse classes\n@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {\n @each $bp in $breakpoint-classes {\n @if $margin-grid {\n .#{$bp}-margin-collapse {\n @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);\n }\n }\n\n @if $padding-grid {\n .#{$bp}-padding-collapse {\n @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);\n }\n }\n }\n}\n\n// Offset classes\n@mixin xy-offset-cell-classes {\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-columns {\n // Offsets\n $o: $i - 1;\n\n .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n\n .grid-margin-x > .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $breakpoint: $-zf-size);\n }\n }\n }\n}\n\n// Vertical Grid classes\n@mixin xy-vertical-grid-classes(\n $margin-grid: true,\n $padding-grid: true\n) {\n\n @include -zf-each-breakpoint() {\n @if not($-zf-size == small) {\n }\n }\n\n .grid-y {\n @include xy-grid(vertical, false);\n\n\n > .cell {\n @include xy-cell-reset();\n }\n\n > .auto {\n @include xy-cell-static(auto, false, $vertical: true);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false, $vertical: true);\n }\n\n\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues and PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n %-xy-cell-base-shrink-vertical-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);\n }\n }\n\n }\n }\n\n @if $padding-grid {\n .grid-padding-y {\n // Negative margin for nested grids\n .grid-padding-y {\n @include xy-gutters($negative: true, $gutter-position: top bottom);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);\n }\n }\n }\n\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n }\n\n}\n\n@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {\n // Framed grid styles\n .grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .cell-block {\n @include xy-cell-block();\n }\n\n .cell-block-y {\n @include xy-cell-block(true);\n }\n\n\n .cell-block-container {\n @include xy-cell-block-container();\n }\n\n\n @include -zf-each-breakpoint(false) {\n\n .#{$-zf-size}-grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .#{$-zf-size}-grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .#{$-zf-size}-cell-block {\n @include xy-cell-block();\n }\n\n .#{$-zf-size}-cell-block-container {\n @include xy-cell-block-container();\n }\n\n .#{$-zf-size}-cell-block-y {\n @include xy-cell-block(true);\n }\n }\n\n @if $vertical-grid {\n .grid-y {\n &.grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n @include -zf-each-breakpoint(false) {\n &.#{$-zf-size}-grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n }\n }\n .cell {\n .grid-y.grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n @include -zf-each-breakpoint(false) {\n .grid-y.#{$-zf-size}-grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n }\n }\n }\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n .grid-frame.grid-margin-y {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);\n }\n @include -zf-each-breakpoint(false) {\n .grid-margin-y.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);\n }\n }\n }\n}\n\n// Final classes\n@mixin foundation-xy-grid-classes(\n $base-grid: true,\n $margin-grid: true,\n $padding-grid: true,\n $block-grid: true,\n $collapse: true,\n $offset: true,\n $vertical-grid: true,\n $frame-grid: true\n) {\n\n // Base grid styles\n @if($base-grid) {\n @include xy-base-grid-classes();\n }\n\n // Margin grid\n @if($margin-grid) {\n @include xy-margin-grid-classes();\n }\n\n // Padding grid\n @if($padding-grid) {\n @include xy-padding-grid-classes();\n }\n\n // Block grid\n @if($block-grid) {\n @include xy-block-grid-classes($margin-grid, $padding-grid);\n }\n\n // Collapse gutters\n @if($collapse) {\n @include xy-collapse-grid-classes($margin-grid, $padding-grid);\n }\n\n // Offset gutters\n @if($offset) {\n @include xy-offset-cell-classes();\n }\n\n // Vertical grid\n @if($vertical-grid) {\n @include xy-vertical-grid-classes($margin-grid, $padding-grid);\n }\n\n @if ($frame-grid) {\n @include xy-frame-grid-classes($vertical-grid, $margin-grid)\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @else if (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n/// @param {Number} $padding [$grid-container-padding] - paddings of the container.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin-left: auto;\n margin-right: auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @else if type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @else if ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @else if ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @else if ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @else if ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @else if ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $bp-is-fallback: false;\n\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n $bp-is-fallback: true;\n }\n }\n\n // Get the gutter for the given breakpoint/value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n // If the breakpoint is a fallback, use a fallback gutter as well\n @if ($bp-is-fallback == true and $gutter == null) {\n $gutter: 0;\n }\n\n @if($gutter != null) {\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n }\n @else {\n @warn 'xy-cell: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\", cell was not generated`'\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Sizes child elements so that `$n` number of items appear on each row.\n///\n/// @param {Number} $n - Number of elements to display per row.\n/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-grid-layout(\n $n,\n $selector: '.cell',\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $size: percentage(1/$n);\n\n & > #{$selector} {\n @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Collapses the grid a cells within it.\n///\n/// @param {String} $selector [.cell] - The child element to remove the gutter from.\n/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.\n/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.\n@mixin xy-grid-collapse(\n $selector: '.cell',\n $gutter-type: margin,\n $gutter-position: right left,\n $min-breakpoint: $-zf-zero-breakpoint\n) {\n // First, lets negate any margins on the top level\n @if ($gutter-type == 'margin') {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n }\n }\n\n $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);\n\n // Output new widths to not include gutters\n @each $bp in $breakpoint-classes {\n @if(sl-contain($excluded-bps, $bp)) {\n @include breakpoint($min-breakpoint) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n } @else {\n @include breakpoint($bp) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n }\n }\n }\n @else {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n padding-#{$value}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Offsets a column to the right/bottom by `$n` columns.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {Number|Array|Keyword} $breakpoint [$-zf-zero-breakpoint] - Single value, breakpoint name, or list of breakpoint names to use for `$gutters`. See `-zf-breakpoint-value()`.\n/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.\n@mixin xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n $direction: if($vertical, 'top', $global-left);\n\n @include -zf-breakpoint-value($breakpoint, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n $gutter-margin: if($gutter-type == 'margin', $gutter, 0);\n $size: if($gutter-margin == 0, #{xy-cell-size($n)}, calc(#{xy-cell-size($n)} + #{$gutter-margin}));\n\n margin-#{$direction}: #{$size};\n }\n}\n","/// Modifies a grid to give it \"frame\" behavior (no overflow, no wrap, stretch behavior)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.\n/// @param {Number|Map} $gutters [null] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.\n/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.\n@mixin xy-grid-frame(\n $vertical: false,\n $nested: false,\n $gutters: null,\n $breakpoint: null,\n $include-base: true\n) {\n\n @if $include-base {\n overflow: hidden;\n position: relative;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n\n @if $breakpoint == null and type-of($gutters) == 'map' {\n @include -zf-each-breakpoint() {\n @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);\n }\n } @else {\n // Get our gutters if applicable\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // If we have a gutter, add it to the width/height\n @if $gutter {\n @if $vertical == true {\n $unit: if($nested == true, 100%, 100vh);\n $gutter: rem-calc($gutter);\n height: calc(#{$unit} + #{$gutter});\n } @else {\n $unit: if($nested == true, 100%, 100vw);\n $gutter: rem-calc($gutter);\n width: calc(#{$unit} + #{$gutter});\n }\n }\n @else {\n @if $vertical == true {\n height: if($nested == true, 100%, 100vh);\n } @else {\n width: if($nested == true, 100%, 100vw);\n }\n }\n }\n}\n\n/// Modifies a cell to give it \"block\" behavior (overflow auto, inertial scrolling)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n@mixin xy-cell-block(\n $vertical: false\n) {\n $property: if($vertical == true, 'overflow-y', 'overflow-x');\n\n @if $vertical == true {\n overflow-y: auto;\n max-height: 100%;\n min-height: 100%;\n } @else {\n overflow-x: auto;\n max-width: 100%;\n }\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n/// Container for inside a grid frame containing multiple blocks. Typically used\n/// as a modifier for a `.cell` to allow the cell to pass along flex sizing\n/// constraints / from parents to children.\n@mixin xy-cell-block-container() {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n\n > .grid-x {\n max-height: 100%;\n flex-wrap: nowrap;\n }\n}\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Overrides and styles for form inputs\n// Should hopefully be removed as all styles are moved to individual components\n\ninput,\nselect,\n.Select-control {\n &:hover {\n background-color: $n150;\n }\n}\n\nselect {\n &:hover {\n &:focus {\n background-color: $n150;\n }\n }\n}\n\ninput,\ntextarea,\nselect {\n &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes\n color: $n400;\n }\n\n &:disabled{\n &,\n &:hover {\n cursor: not-allowed;\n background-color: $n200;\n }\n }\n}\n\ninput.is-invalid-input:focus {\n border-color: $r300;\n}\n\n.input-group {\n > :last-child {\n border-left: 0;\n border-radius: 0 $input-radius $input-radius 0;\n }\n}\n\n.input-group-label {\n &.disabled {\n .icon {\n color: $n400;\n }\n }\n}\n\n.form-error {\n font-weight: 600;\n}\n\n.select2 {\n margin: 0 0 1rem;\n\n .select2-selection {\n border: 1px solid $n400;\n height: 2.4375rem;\n\n &:focus {\n outline: 1px solid black;\n outline-offset: 2px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease;\n }\n\n &:hover {\n background-color: $n200;\n }\n }\n\n .selection {\n .select2-selection__rendered {\n line-height: 1.5;\n padding: 8px 24px 8px 8px;\n color: $n700;\n }\n\n .select2-selection__arrow {\n height: 24px;\n margin-top: 7px;\n margin-right: 2px;\n\n b {\n border-color: $n700 transparent transparent transparent;\n }\n }\n }\n}\n\n.select2-dropdown {\n .select2-results__option {\n color: $n600;\n\n &.select2-results__option[aria-selected=true] {\n background-color: $n200;\n color: $n700;\n }\n\n &.select2-results__option--highlighted[aria-selected] {\n background-color: $i100;\n color: $n700;\n }\n }\n}\n","@import '../../variables.scss';\n\n$pill-styles: (\n primary: (\n background-color: $i100,\n text-color: $i600,\n border-color: $i400\n ),\n secondary: (\n background-color: $b100,\n text-color: $b600,\n border-color: $b400\n ),\n success: (\n background-color: $g100,\n text-color: $g600,\n border-color: $g400\n ),\n warning: (\n background-color: $o100,\n text-color: $o600,\n border-color: $o400\n ),\n alert: (\n background-color: $r100,\n text-color: $r600,\n border-color: $r300\n ),\n neutral: (\n background-color: $n250,\n text-color: $n800,\n border-color: $n400\n ),\n highlight: (\n background-color: $c100,\n text-color: $c600,\n border-color: $c400\n ),\n dark: (\n background-color: $n700,\n text-color: $n200,\n border-color: $n100\n )\n);\n\n@mixin pill-color(\n $text-color,\n $background-color,\n $border-color\n) {\n background: $background-color;\n border: 1px solid $border-color;\n color: $text-color;\n}\n\n// --------------\n// Legacy global pill (label) class for non-javascript support\n// --------------\n// sass-lint:disable placeholder-in-extend\n.label {\n border-radius: 32px;\n display: inline-block;\n font-size: $fz-xsmall;\n font-weight: $fw-semi-bold;\n line-height: 14px;\n padding: 4px 8px;\n white-space: nowrap;\n\n @each $color, $value in $pill-styles {\n &.#{$color} {\n @include pill-color(\n map-get($value, text-color),\n map-get($value, background-color),\n map-get($value, border-color)\n );\n }\n }\n\n &.medium {\n font-size: $fz-small;\n line-height: 16px;\n }\n\n &.large {\n font-size: $fz-body;\n line-height: 18px;\n padding: 4px 12px;\n }\n\n // Neutral by default\n @extend .neutral;\n\n // Domain specific colours; unfortunately have to be kept for now\n &.leave {\n @extend .warning;\n }\n\n &.overdue {\n @extend .alert;\n }\n\n &.draft {\n @extend .neutral;\n }\n\n &.abandoned {\n @extend .primary;\n }\n}\n// sass-lint:enable placeholder-in-extend\n\n\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Old version of avatar entity; kept here for now to show off in the style guide\n// Should be removed once we're satisfied we can port to avatar entity in future\n.person-tag {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: 2px;\n\n .grid-x {\n flex-wrap: nowrap;\n width: 100%;\n }\n\n .person-label {\n align-items: center;\n display: flex;\n }\n\n .avatar-container {\n align-self: start;\n display: flex;\n position: relative;\n\n .avatar-icon {\n position: absolute;\n right: 0;\n text-align: right;\n top: 27px;\n\n .icon {\n font-size: 14px;\n }\n }\n }\n\n .display-name {\n align-self: center;\n color: $n700;\n overflow: hidden;\n padding-left: 10px;\n\n .position-title {\n color: $n600;\n font-size: .8125rem;\n line-height: 1.3;\n margin-top: 2px;\n }\n }\n\n .person-tag-description {\n color: $n600;\n font-size: .75rem;\n font-weight: 600;\n }\n\n &.cursor-auto {\n cursor: auto;\n }\n\n &.cursor-pointer {\n cursor: pointer;\n }\n\n .has-tip {\n display: inherit;\n }\n\n .header-component {\n font-size: .9375rem;\n font-weight: normal;\n\n .overdue-count {\n @include breakpoint(small down) {\n order: 2;\n }\n }\n }\n\n .tag-icon {\n i {\n font-size: 2rem;\n margin-right: 10px;\n }\n }\n}\n\n.avatar-container {\n display: inline-block;\n position: relative;\n}\n\n.profile-picture-badge,\n.initials-badge {\n border: 1px solid $n400;\n border-radius: 50%;\n color: $i400;\n display: inline-block;\n font-size: 1rem;\n font-weight: 600;\n height: 40px;\n line-height: 38px;\n overflow: hidden;\n text-align: center;\n width: 40px;\n user-select: none;\n vertical-align: middle;\n\n .extended-leave-circle {\n background-color: $o400;\n bottom: -.1rem;\n border: 2px solid $n100;\n border-radius: 50%;\n right: -.3rem;\n padding: 5.5px;\n position: absolute;\n }\n\n img {\n vertical-align: initial;\n width: 100%;\n }\n\n &.badge-small {\n font-size: 0.8rem;\n height: 30px;\n line-height: 28px;\n width: 30px;\n\n .extended-leave-circle {\n padding: 5px;\n }\n }\n\n &.badge-large {\n font-size: 1.5rem;\n height: 72px;\n line-height: 70px;\n width: 72px;\n\n .extended-leave-circle {\n bottom: .1rem;\n right: .1rem;\n padding: 6.5px;\n }\n }\n\n &.badge-xlarge {\n font-size: 2.5rem;\n height: 120px;\n line-height: 118px;\n width: 120px;\n\n .extended-leave-circle {\n bottom: .25rem;\n right: .75rem;\n padding: 7px;\n }\n }\n}\n\n.profile-picture-badge {\n background-color: transparent;\n}\n\n.initials-badge {\n background-color: $n200;\n text-transform: uppercase;\n}\n","@import '../../variables';\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n border: 0;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead,\n tbody {\n border: 0;\n }\n\n thead {\n background: $n200;\n border-bottom: 2px solid $n400;\n\n th {\n font-weight: 600;\n }\n }\n\n tbody {\n tr {\n border: 0;\n border-bottom: 1px solid $n300;\n }\n }\n\n .button-group {\n margin-bottom: 0;\n }\n}\n\n\ntr {\n &.highlight {\n // As styled by foundation's callout\n background-color: $o100;\n }\n\n &.alert {\n background-color: $r100;\n }\n}\n\nth,\ntd {\n &.fit {\n white-space: nowrap;\n width: 1%;\n }\n\n &.collapse-all {\n word-break: break-all;\n word-wrap: break-word;\n }\n}\n\ntd {\n .button {\n margin: auto;\n }\n\n &.contains-inputs {\n input,\n select {\n margin: 0;\n }\n\n .input-group {\n margin: 0;\n }\n }\n}\n\n.table-full-width {\n margin-left: auto;\n margin-right: auto;\n max-width: initial;\n width: 100%;\n\n tr td.fit {\n white-space: nowrap;\n width: 1%;\n\n .button-group {\n .button {\n float: none;\n }\n }\n }\n}\n","@import '../../variables';\n\nh1, .h1 {\n font-size: 2rem;\n font-weight: 600;\n line-height: 3.5rem;\n}\n\nh6 {\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n\n.display-text-1 {\n font-size: 4.125rem;\n font-weight: 300;\n}\n\n.display-text-2 {\n font-size: 3.25rem;\n font-weight: 400;\n}\n\n.display-text-3 {\n font-size: 2.5625em;\n font-weight: 400;\n}\n\n.subheader {\n color: $n600;\n}\n\n.title {\n color: $n600;\n font-size: 1.4375rem;\n margin-bottom: .4rem;\n}\n\n%section-header {\n color: $n800;\n font-size: 1.125em;\n font-weight: 600;\n}\n\n.section-header {\n @extend %section-header\n}\n\np.page-subheader {\n color: $n600;\n font-size: .9375rem;\n}\n"],"sourceRoot":""}
` 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/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\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 code {\n padding: $code-padding;\n\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 // 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 by ZURB\n// foundation.zurb.com\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@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","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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}\n\n@mixin foundation-form-select {\n select {\n @include form-select;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group tooltip\n////\n\n/// Default cursor of the defined term.\n/// @type Keyword\n$has-tip-cursor: help !default;\n\n/// Default font weight of the defined term.\n/// @type Keyword | Number\n$has-tip-font-weight: $global-weight-bold !default;\n\n/// Default border bottom of the defined term.\n/// @type List\n$has-tip-border-bottom: dotted 1px $dark-gray !default;\n\n/// Default color of the tooltip background.\n/// @type Color\n$tooltip-background-color: $black !default;\n\n/// Default color of the tooltip font.\n/// @type Color\n$tooltip-color: $white !default;\n\n/// Default padding of the tooltip background.\n/// @type Number\n$tooltip-padding: 0.75rem !default;\n\n/// Default max width for tooltips.\n/// @type Number\n$tooltip-max-width: 10rem !default;\n\n/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.\n/// @type Number\n$tooltip-font-size: $small-font-size !default;\n\n/// Default pip width for tooltips.\n/// @type Number\n$tooltip-pip-width: 0.75rem !default;\n\n/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.\n/// @type Number\n$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;\n\n/// Default radius for tooltips.\n/// @type Number\n$tooltip-radius: $global-radius !default;\n\n@mixin has-tip {\n position: relative;\n display: inline-block;\n\n border-bottom: $has-tip-border-bottom;\n font-weight: $has-tip-font-weight;\n cursor: $has-tip-cursor;\n}\n\n@mixin tooltip {\n position: absolute;\n top: calc(100% + #{$tooltip-pip-height});\n z-index: 1200;\n\n max-width: $tooltip-max-width;\n padding: $tooltip-padding;\n\n border-radius: $tooltip-radius;\n background-color: $tooltip-background-color;\n font-size: $tooltip-font-size;\n color: $tooltip-color;\n\n &::before {\n position: absolute;\n }\n\n &.bottom {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);\n bottom: 100%;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.top {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);\n top: 100%;\n bottom: auto;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.left {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);\n left: 100%;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.right {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);\n right: 100%;\n left: auto;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.align-top::before {\n bottom: auto;\n top: 10%;\n }\n\n &.align-bottom::before {\n bottom: 10%;\n top: auto;\n }\n\n &.align-left::before {\n left: 10%;\n right: auto;\n }\n\n &.align-right::before {\n left: auto;\n right: 10%;\n }\n}\n\n@mixin foundation-tooltip {\n .has-tip {\n @include has-tip;\n }\n\n .tooltip {\n @include tooltip;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group Flexbox Utilities\n////\n//\n/// Default value for the count of source ordering`\n/// @type Number\n$flex-source-ordering-count: 6 !default;\n\n/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.\n/// @type Boolean\n$flexbox-responsive-breakpoints: true !default;\n\n@mixin flex-helpers {\n .flex-container {\n @include flex;\n }\n\n .flex-child-auto {\n flex: 1 1 auto;\n }\n\n .flex-child-grow {\n flex: 1 0 auto;\n }\n\n .flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n\n @if ($flexbox-responsive-breakpoints) {\n // Loop through Responsive Breakpoints\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-flex-container {\n @include flex;\n }\n\n .#{$size}-flex-child-auto {\n flex: 1 1 auto;\n }\n\n .#{$size}-flex-child-grow {\n flex: 1 0 auto;\n }\n\n .#{$size}-flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .#{$size}-flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n }\n }\n }\n }\n}\n\n@mixin foundation-flex-classes {\n // Horizontal alignment using justify-content\n @each $hdir, $prop in $-zf-flex-justify {\n .align-#{$hdir} {\n @include flex-align($x: $hdir);\n }\n }\n \n // Horizontal alignment Specifically for Vertical Menu\n @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {\n .align-#{$hdir} {\n &.vertical {\n &.menu > li > a {\n @include flex-align($x: $hdir);\n }\n }\n }\n }\n\n // Vertical alignment using align-items and align-self\n @each $vdir, $prop in $-zf-flex-align {\n .align-#{$vdir} {\n @include flex-align($y: $vdir);\n }\n\n .align-self-#{$vdir} {\n @include flex-align-self($y: $vdir);\n }\n }\n\n // Central alignment of content\n .align-center-middle {\n @include flex-align($x: center, $y: middle);\n align-content: center;\n }\n\n // Source ordering\n @include -zf-each-breakpoint {\n @for $i from 1 through $flex-source-ordering-count {\n .#{$-zf-size}-order-#{$i} {\n @include flex-order($i);\n }\n }\n }\n\n // Vanilla Flexbox Helpers\n @include flex-helpers;\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// Hide an element by default, only displaying it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for($size) {\n $size: map-get($breakpoints, $size);\n // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).\n // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.\n // See https://github.com/zurb/foundation-sites/issues/11313\n $size: -zf-bp-to-em($size) - .00125;\n\n @include breakpoint($size down) {\n display: none !important;\n }\n}\n\n/// Hide an element by default, only displaying it within a certain breakpoint.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for-only($size) {\n $lower-bound-size: map-get($breakpoints, $size);\n $upper-bound-size: -zf-map-next($breakpoints, $size);\n\n // more often than not this will be correct, just one time round the loop it won't so set in scope here\n $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;\n // test actual lower-bound-size, if 0 set it to 0em\n @if strip-unit($lower-bound-size) == 0 {\n $lower-bound: -zf-bp-to-em($lower-bound-size);\n }\n\n @if $upper-bound-size == null {\n @media screen and (max-width: $lower-bound) {\n display: none !important;\n }\n }\n @else {\n $upper-bound: -zf-bp-to-em($upper-bound-size);\n\n @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {\n display: none !important;\n }\n }\n}\n\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for($size) {\n @include breakpoint($size) {\n display: none !important;\n }\n}\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for-only($size) {\n @include breakpoint($size only) {\n display: none !important;\n }\n}\n\n@mixin foundation-visibility-classes {\n // Basic hiding classes\n .hide {\n display: none !important;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n // Responsive visibility classes\n @each $size in $breakpoint-classes {\n @if $size != $-zf-zero-breakpoint {\n .hide-for-#{$size} {\n @include hide-for($size);\n }\n\n .show-for-#{$size} {\n @include show-for($size);\n }\n }\n\n .hide-for-#{$size}-only {\n @include hide-for-only($size);\n }\n\n .show-for-#{$size}-only {\n @include show-for-only($size);\n }\n }\n\n // Screen reader visibility classes\n // Need a \"hide-for-sr\" class? Add aria-hidden='true' to the element\n .show-for-sr,\n .show-on-focus {\n @include element-invisible;\n }\n\n // Only display the element when it's focused\n .show-on-focus {\n &:active,\n &:focus {\n @include element-invisible-off;\n }\n }\n\n // Landscape and portrait visibility\n .show-for-landscape,\n .hide-for-portrait {\n display: block !important;\n\n @include breakpoint(landscape) {\n display: block !important;\n }\n\n @include breakpoint(portrait) {\n display: none !important;\n }\n }\n\n .hide-for-landscape,\n .show-for-portrait {\n display: none !important;\n\n @include breakpoint(landscape) {\n display: none !important;\n }\n\n @include breakpoint(portrait) {\n display: block !important;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n// Margin Grid classes\n@mixin xy-base-grid-classes {\n\n // Grid Container\n .grid-container {\n @include xy-grid-container;\n\n &.fluid {\n @include xy-grid-container(100%);\n }\n\n &.full {\n @include xy-grid-container(100%, 0);\n }\n }\n\n // Base grid styles\n .grid-x {\n @include xy-grid;\n }\n\n .cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &.auto {\n @include xy-cell-base(auto);\n }\n\n &.shrink {\n @include xy-cell-base(shrink);\n }\n\n }\n .grid-x {\n > .auto {\n @include xy-cell-static(auto, false);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Auto width\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues & PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n .grid-x {\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false);\n }\n }\n\n %-xy-cell-base-shrink-horizontal-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n .grid-x > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static($i, false, $gutter-type: padding);\n }\n }\n }\n\n // Reset width when using `.grid-margin-x` not on `.grid-x`\n .grid-margin-x:not(.grid-x) > .cell {\n width: auto;\n }\n\n // Reset height when using `.grid-margin-y` not on `.grid-y`\n .grid-margin-y:not(.grid-y) > .cell {\n height: auto;\n }\n}\n\n@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {\n $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');\n > .#{$prefix}auto {\n @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n > .#{$prefix}shrink {\n @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');\n\n > #{$classname} {\n @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n }\n}\n\n// Margin Grid classes\n@mixin xy-margin-grid-classes(\n $gutter-position: left right,\n $vertical: false,\n $wrapping-selector: '.grid-margin-x'\n){\n #{$wrapping-selector} {\n @include xy-gutters($negative: true, $gutter-position: $gutter-position);\n\n // Base cell styles\n > .cell {\n @include xy-cell-static($vertical: $vertical);\n }\n\n // base styles need to all be before the auto and shrink styles\n @include -zf-each-breakpoint() {\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {\n > .cell {\n @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for all prior breakpoints.\n // As their gutter is defined with their width/height, even breakpoint without a new margin must be\n // generated to not having their width/height overrided by re-adjusted smaller breakpoints.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);\n }\n }\n\n @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);\n }\n }\n}\n\n// Padding Grid classes\n@mixin xy-padding-grid-classes {\n .grid-padding-x {\n\n // Negative margin for nested grids\n .grid-padding-x {\n @include xy-gutters($negative: true);\n }\n\n // Negative margin for grids within `grid-container/grid-container.fluid`\n // This allows margin and padding grids to line up with eachother\n .grid-container:not(.full) > & {\n @include xy-gutters($negative: true);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n }\n}\n\n// Block Grid classes\n@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {\n @if $padding-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n }\n }\n }\n\n @if $margin-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for prior breakpoints based on the responsive gutter.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @if(map-has-key($grid-margin-gutters, $bp)) {\n .grid-margin-x.#{$bp}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n }\n @for $i from 1 through $xy-block-grid-max {\n .grid-margin-x.#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n}\n\n// Collapse classes\n@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {\n @each $bp in $breakpoint-classes {\n @if $margin-grid {\n .#{$bp}-margin-collapse {\n @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);\n }\n }\n\n @if $padding-grid {\n .#{$bp}-padding-collapse {\n @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);\n }\n }\n }\n}\n\n// Offset classes\n@mixin xy-offset-cell-classes {\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-columns {\n // Offsets\n $o: $i - 1;\n\n .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n\n .grid-margin-x > .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $breakpoint: $-zf-size);\n }\n }\n }\n}\n\n// Vertical Grid classes\n@mixin xy-vertical-grid-classes(\n $margin-grid: true,\n $padding-grid: true\n) {\n\n @include -zf-each-breakpoint() {\n @if not($-zf-size == small) {\n }\n }\n\n .grid-y {\n @include xy-grid(vertical, false);\n\n\n > .cell {\n @include xy-cell-reset();\n }\n\n > .auto {\n @include xy-cell-static(auto, false, $vertical: true);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false, $vertical: true);\n }\n\n\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues and PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n %-xy-cell-base-shrink-vertical-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);\n }\n }\n\n }\n }\n\n @if $padding-grid {\n .grid-padding-y {\n // Negative margin for nested grids\n .grid-padding-y {\n @include xy-gutters($negative: true, $gutter-position: top bottom);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);\n }\n }\n }\n\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n }\n\n}\n\n@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {\n // Framed grid styles\n .grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .cell-block {\n @include xy-cell-block();\n }\n\n .cell-block-y {\n @include xy-cell-block(true);\n }\n\n\n .cell-block-container {\n @include xy-cell-block-container();\n }\n\n\n @include -zf-each-breakpoint(false) {\n\n .#{$-zf-size}-grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .#{$-zf-size}-grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .#{$-zf-size}-cell-block {\n @include xy-cell-block();\n }\n\n .#{$-zf-size}-cell-block-container {\n @include xy-cell-block-container();\n }\n\n .#{$-zf-size}-cell-block-y {\n @include xy-cell-block(true);\n }\n }\n\n @if $vertical-grid {\n .grid-y {\n &.grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n @include -zf-each-breakpoint(false) {\n &.#{$-zf-size}-grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n }\n }\n .cell {\n .grid-y.grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n @include -zf-each-breakpoint(false) {\n .grid-y.#{$-zf-size}-grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n }\n }\n }\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n .grid-frame.grid-margin-y {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);\n }\n @include -zf-each-breakpoint(false) {\n .grid-margin-y.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);\n }\n }\n }\n}\n\n// Final classes\n@mixin foundation-xy-grid-classes(\n $base-grid: true,\n $margin-grid: true,\n $padding-grid: true,\n $block-grid: true,\n $collapse: true,\n $offset: true,\n $vertical-grid: true,\n $frame-grid: true\n) {\n\n // Base grid styles\n @if($base-grid) {\n @include xy-base-grid-classes();\n }\n\n // Margin grid\n @if($margin-grid) {\n @include xy-margin-grid-classes();\n }\n\n // Padding grid\n @if($padding-grid) {\n @include xy-padding-grid-classes();\n }\n\n // Block grid\n @if($block-grid) {\n @include xy-block-grid-classes($margin-grid, $padding-grid);\n }\n\n // Collapse gutters\n @if($collapse) {\n @include xy-collapse-grid-classes($margin-grid, $padding-grid);\n }\n\n // Offset gutters\n @if($offset) {\n @include xy-offset-cell-classes();\n }\n\n // Vertical grid\n @if($vertical-grid) {\n @include xy-vertical-grid-classes($margin-grid, $padding-grid);\n }\n\n @if ($frame-grid) {\n @include xy-frame-grid-classes($vertical-grid, $margin-grid)\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @else if (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n/// @param {Number} $padding [$grid-container-padding] - paddings of the container.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin-left: auto;\n margin-right: auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @else if type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @else if ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @else if ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @else if ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @else if ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @else if ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $bp-is-fallback: false;\n\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n $bp-is-fallback: true;\n }\n }\n\n // Get the gutter for the given breakpoint/value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n // If the breakpoint is a fallback, use a fallback gutter as well\n @if ($bp-is-fallback == true and $gutter == null) {\n $gutter: 0;\n }\n\n @if($gutter != null) {\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n }\n @else {\n @warn 'xy-cell: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\", cell was not generated`'\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Sizes child elements so that `$n` number of items appear on each row.\n///\n/// @param {Number} $n - Number of elements to display per row.\n/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-grid-layout(\n $n,\n $selector: '.cell',\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $size: percentage(1/$n);\n\n & > #{$selector} {\n @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Collapses the grid a cells within it.\n///\n/// @param {String} $selector [.cell] - The child element to remove the gutter from.\n/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.\n/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.\n@mixin xy-grid-collapse(\n $selector: '.cell',\n $gutter-type: margin,\n $gutter-position: right left,\n $min-breakpoint: $-zf-zero-breakpoint\n) {\n // First, lets negate any margins on the top level\n @if ($gutter-type == 'margin') {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n }\n }\n\n $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);\n\n // Output new widths to not include gutters\n @each $bp in $breakpoint-classes {\n @if(sl-contain($excluded-bps, $bp)) {\n @include breakpoint($min-breakpoint) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n } @else {\n @include breakpoint($bp) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n }\n }\n }\n @else {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n padding-#{$value}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Offsets a column to the right/bottom by `$n` columns.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {Number|Array|Keyword} $breakpoint [$-zf-zero-breakpoint] - Single value, breakpoint name, or list of breakpoint names to use for `$gutters`. See `-zf-breakpoint-value()`.\n/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.\n@mixin xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n $direction: if($vertical, 'top', $global-left);\n\n @include -zf-breakpoint-value($breakpoint, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n $gutter-margin: if($gutter-type == 'margin', $gutter, 0);\n $size: if($gutter-margin == 0, #{xy-cell-size($n)}, calc(#{xy-cell-size($n)} + #{$gutter-margin}));\n\n margin-#{$direction}: #{$size};\n }\n}\n","/// Modifies a grid to give it \"frame\" behavior (no overflow, no wrap, stretch behavior)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.\n/// @param {Number|Map} $gutters [null] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.\n/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.\n@mixin xy-grid-frame(\n $vertical: false,\n $nested: false,\n $gutters: null,\n $breakpoint: null,\n $include-base: true\n) {\n\n @if $include-base {\n overflow: hidden;\n position: relative;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n\n @if $breakpoint == null and type-of($gutters) == 'map' {\n @include -zf-each-breakpoint() {\n @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);\n }\n } @else {\n // Get our gutters if applicable\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // If we have a gutter, add it to the width/height\n @if $gutter {\n @if $vertical == true {\n $unit: if($nested == true, 100%, 100vh);\n $gutter: rem-calc($gutter);\n height: calc(#{$unit} + #{$gutter});\n } @else {\n $unit: if($nested == true, 100%, 100vw);\n $gutter: rem-calc($gutter);\n width: calc(#{$unit} + #{$gutter});\n }\n }\n @else {\n @if $vertical == true {\n height: if($nested == true, 100%, 100vh);\n } @else {\n width: if($nested == true, 100%, 100vw);\n }\n }\n }\n}\n\n/// Modifies a cell to give it \"block\" behavior (overflow auto, inertial scrolling)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n@mixin xy-cell-block(\n $vertical: false\n) {\n $property: if($vertical == true, 'overflow-y', 'overflow-x');\n\n @if $vertical == true {\n overflow-y: auto;\n max-height: 100%;\n min-height: 100%;\n } @else {\n overflow-x: auto;\n max-width: 100%;\n }\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n/// Container for inside a grid frame containing multiple blocks. Typically used\n/// as a modifier for a `.cell` to allow the cell to pass along flex sizing\n/// constraints / from parents to children.\n@mixin xy-cell-block-container() {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n\n > .grid-x {\n max-height: 100%;\n flex-wrap: nowrap;\n }\n}\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Overrides and styles for form inputs\n// Should hopefully be removed as all styles are moved to individual components\n\ninput,\nselect,\n.Select-control {\n &:hover {\n background-color: $n150;\n }\n}\n\nselect {\n &:hover {\n &:focus {\n background-color: $n150;\n }\n }\n}\n\ninput,\ntextarea,\nselect {\n &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes\n color: $n400;\n }\n\n &:disabled{\n &,\n &:hover {\n cursor: not-allowed;\n background-color: $n200;\n }\n }\n}\n\ninput.is-invalid-input:focus {\n border-color: $r300;\n}\n\n.input-group {\n > :last-child {\n border-left: 0;\n border-radius: 0 $input-radius $input-radius 0;\n }\n}\n\n.input-group-label {\n &.disabled {\n .icon {\n color: $n400;\n }\n }\n}\n\n.form-error {\n font-weight: 600;\n}\n\n.select2 {\n margin: 0 0 1rem;\n\n .select2-selection {\n border: 1px solid $n400;\n height: 2.4375rem;\n\n &:focus {\n outline: 1px solid black;\n outline-offset: 2px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease;\n }\n\n &:hover {\n background-color: $n200;\n }\n }\n\n .selection {\n .select2-selection__rendered {\n line-height: 1.5;\n padding: 8px 24px 8px 8px;\n color: $n700;\n }\n\n .select2-selection__arrow {\n height: 24px;\n margin-top: 7px;\n margin-right: 2px;\n\n b {\n border-color: $n700 transparent transparent transparent;\n }\n }\n }\n}\n\n.select2-dropdown {\n .select2-results__option {\n color: $n600;\n\n &.select2-results__option[aria-selected=true] {\n background-color: $n200;\n color: $n700;\n }\n\n &.select2-results__option--highlighted[aria-selected] {\n background-color: $i100;\n color: $n700;\n }\n }\n}\n","@import '../../variables.scss';\n\n$pill-styles: (\n primary: (\n background-color: $i100,\n text-color: $i600,\n border-color: $i400\n ),\n secondary: (\n background-color: $b100,\n text-color: $b600,\n border-color: $b400\n ),\n success: (\n background-color: $g100,\n text-color: $g600,\n border-color: $g400\n ),\n warning: (\n background-color: $o100,\n text-color: $o600,\n border-color: $o400\n ),\n alert: (\n background-color: $r100,\n text-color: $r600,\n border-color: $r300\n ),\n neutral: (\n background-color: $n250,\n text-color: $n800,\n border-color: $n400\n ),\n highlight: (\n background-color: $c100,\n text-color: $c600,\n border-color: $c400\n ),\n dark: (\n background-color: $n700,\n text-color: $n200,\n border-color: $n100\n )\n);\n\n@mixin pill-color(\n $text-color,\n $background-color,\n $border-color\n) {\n background: $background-color;\n border: 1px solid $border-color;\n color: $text-color;\n}\n\n// --------------\n// Legacy global pill (label) class for non-javascript support\n// --------------\n// sass-lint:disable placeholder-in-extend\n.label {\n border-radius: 32px;\n display: inline-block;\n font-size: $fz-xsmall;\n font-weight: $fw-semi-bold;\n line-height: 14px;\n padding: 4px 8px;\n white-space: nowrap;\n\n @each $color, $value in $pill-styles {\n &.#{$color} {\n @include pill-color(\n map-get($value, text-color),\n map-get($value, background-color),\n map-get($value, border-color)\n );\n }\n }\n\n &.medium {\n font-size: $fz-small;\n line-height: 16px;\n }\n\n &.large {\n font-size: $fz-body;\n line-height: 18px;\n padding: 4px 12px;\n }\n\n // Neutral by default\n @extend .neutral;\n\n // Domain specific colours; unfortunately have to be kept for now\n &.leave {\n @extend .warning;\n }\n\n &.overdue {\n @extend .alert;\n }\n\n &.draft {\n @extend .neutral;\n }\n\n &.abandoned {\n @extend .primary;\n }\n}\n// sass-lint:enable placeholder-in-extend\n\n\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Old version of avatar entity; kept here for now to show off in the style guide\n// Should be removed once we're satisfied we can port to avatar entity in future\n.person-tag {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: 2px;\n\n .grid-x {\n flex-wrap: nowrap;\n width: 100%;\n }\n\n .person-label {\n align-items: center;\n display: flex;\n }\n\n .avatar-container {\n align-self: start;\n display: flex;\n position: relative;\n\n .avatar-icon {\n position: absolute;\n right: 0;\n text-align: right;\n top: 27px;\n\n .icon {\n font-size: 14px;\n }\n }\n }\n\n .display-name {\n align-self: center;\n color: $n700;\n overflow: hidden;\n padding-left: 10px;\n\n .position-title {\n color: $n600;\n font-size: .8125rem;\n line-height: 1.3;\n margin-top: 2px;\n }\n }\n\n .person-tag-description {\n color: $n600;\n font-size: .75rem;\n font-weight: 600;\n }\n\n &.cursor-auto {\n cursor: auto;\n }\n\n &.cursor-pointer {\n cursor: pointer;\n }\n\n .has-tip {\n display: inherit;\n }\n\n .header-component {\n font-size: .9375rem;\n font-weight: normal;\n\n .overdue-count {\n @include breakpoint(small down) {\n order: 2;\n }\n }\n }\n\n .tag-icon {\n i {\n font-size: 2rem;\n margin-right: 10px;\n }\n }\n}\n\n.avatar-container {\n display: inline-block;\n position: relative;\n}\n\n.profile-picture-badge,\n.initials-badge {\n border: 1px solid $n400;\n border-radius: 50%;\n color: $i400;\n display: inline-block;\n font-size: 1rem;\n font-weight: 600;\n height: 40px;\n line-height: 38px;\n overflow: hidden;\n text-align: center;\n width: 40px;\n user-select: none;\n vertical-align: middle;\n\n .extended-leave-circle {\n background-color: $o400;\n bottom: -.1rem;\n border: 2px solid $n100;\n border-radius: 50%;\n right: -.3rem;\n padding: 5.5px;\n position: absolute;\n }\n\n img {\n vertical-align: initial;\n width: 100%;\n }\n\n &.badge-small {\n font-size: 0.8rem;\n height: 30px;\n line-height: 28px;\n width: 30px;\n\n .extended-leave-circle {\n padding: 5px;\n }\n }\n\n &.badge-large {\n font-size: 1.5rem;\n height: 72px;\n line-height: 70px;\n width: 72px;\n\n .extended-leave-circle {\n bottom: .1rem;\n right: .1rem;\n padding: 6.5px;\n }\n }\n\n &.badge-xlarge {\n font-size: 2.5rem;\n height: 120px;\n line-height: 118px;\n width: 120px;\n\n .extended-leave-circle {\n bottom: .25rem;\n right: .75rem;\n padding: 7px;\n }\n }\n}\n\n.profile-picture-badge {\n background-color: transparent;\n}\n\n.initials-badge {\n background-color: $n200;\n text-transform: uppercase;\n}\n","@import '../../variables';\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n border: 0;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead,\n tbody {\n border: 0;\n }\n\n thead {\n background: $n200;\n border-bottom: 2px solid $n400;\n\n th {\n font-weight: 600;\n }\n }\n\n tbody {\n tr {\n border: 0;\n border-bottom: 1px solid $n300;\n }\n }\n\n .button-group {\n margin-bottom: 0;\n }\n}\n\n\ntr {\n &.highlight {\n // As styled by foundation's callout\n background-color: $o100;\n }\n\n &.alert {\n background-color: $r100;\n }\n}\n\nth,\ntd {\n &.fit {\n white-space: nowrap;\n width: 1%;\n }\n\n &.collapse-all {\n word-break: break-all;\n word-wrap: break-word;\n }\n}\n\ntd {\n .button {\n margin: auto;\n }\n\n &.contains-inputs {\n input,\n select {\n margin: 0;\n }\n\n .input-group {\n margin: 0;\n }\n }\n}\n\n.table-full-width {\n margin-left: auto;\n margin-right: auto;\n max-width: initial;\n width: 100%;\n\n tr td.fit {\n white-space: nowrap;\n width: 1%;\n\n .button-group {\n .button {\n float: none;\n }\n }\n }\n}\n","@import '../../variables';\n\nh1, .h1 {\n font-size: 2rem;\n font-weight: 600;\n line-height: 3.5rem;\n}\n\nh6 {\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n\n.display-text-1 {\n font-size: 4.125rem;\n font-weight: 300;\n}\n\n.display-text-2 {\n font-size: 3.25rem;\n font-weight: 400;\n}\n\n.display-text-3 {\n font-size: 2.5625em;\n font-weight: 400;\n}\n\n.subheader {\n color: $n600;\n}\n\n.title {\n color: $n600;\n font-size: 1.4375rem;\n margin-bottom: .4rem;\n}\n\n%section-header {\n color: $n800;\n font-size: 1.125em;\n font-weight: 600;\n}\n\n.section-header {\n @extend %section-header\n}\n\np.page-subheader {\n color: $n600;\n font-size: .9375rem;\n}\n"],"sourceRoot":""}
` elements.\n/// @type List\n$blockquote-border: 1px solid $medium-gray !default;\n\n/// Font size for `` elements.\n/// @type Number\n$cite-font-size: rem-calc(13) !default;\n\n/// Text color for `` elements.\n/// @type Color\n$cite-color: $dark-gray !default;\n\n/// Pseudo content for `` elements.\n/// @type String\n$cite-pseudo-content: '\\2014 \\0020' !default;\n\n/// Font family for `` elements.\n/// @type String | List\n$keystroke-font: $font-family-monospace !default;\n\n/// Text color for `` elements.\n/// @type Color\n$keystroke-color: $black !default;\n\n/// Background color for `` elements.\n/// @type Color\n$keystroke-background: $light-gray !default;\n\n/// Padding for `` elements.\n/// @type Number | List\n$keystroke-padding: rem-calc(2 4 0) !default;\n\n/// Border radius for `` elements.\n/// @type Number | List\n$keystroke-radius: $global-radius !default;\n\n/// Bottom border style for `` elements.\n/// @type List\n$abbr-underline: 1px dotted $black !default;\n\n@mixin foundation-typography-base {\n // Typography resets\n div,\n dl,\n dt,\n dd,\n ul,\n ol,\n li,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n pre,\n form,\n p,\n blockquote,\n th,\n td {\n margin: 0;\n padding: 0;\n }\n\n // Paragraphs\n p {\n margin-bottom: $paragraph-margin-bottom;\n\n font-size: inherit;\n line-height: $paragraph-lineheight;\n text-rendering: $paragraph-text-rendering;\n }\n\n // Emphasized text\n em,\n i {\n font-style: italic;\n line-height: inherit;\n }\n\n // Strong text\n strong,\n b {\n font-weight: $global-weight-bold;\n line-height: inherit;\n }\n\n // Small text\n small {\n font-size: $small-font-size;\n line-height: inherit;\n }\n\n // Headings\n h1, .h1,\n h2, .h2,\n h3, .h3,\n h4, .h4,\n h5, .h5,\n h6, .h6 {\n font-family: $header-font-family;\n font-style: $header-font-style;\n font-weight: $header-font-weight;\n color: $header-color;\n text-rendering: $header-text-rendering;\n\n small {\n line-height: 0;\n color: $header-small-font-color;\n }\n }\n\n // Heading styles\n @each $size, $headers in $header-styles {\n @include breakpoint($size) {\n @each $header, $header-defs in $headers {\n $font-size-temp: 1rem;\n #{$header}, .#{$header} {\n\n @if map-has-key($header-defs, font-size) {\n $font-size-temp: rem-calc(map-get($header-defs, font-size));\n font-size: $font-size-temp;\n } @else if map-has-key($header-defs, fs) {\n $font-size-temp: rem-calc(map-get($header-defs, fs));\n font-size: $font-size-temp;\n } @else if $size == $-zf-zero-breakpoint {\n font-size: $font-size-temp;\n }\n @if map-has-key($header-defs, line-height) {\n line-height: unitless-calc(map-get($header-defs, line-height), $font-size-temp);\n } @else if map-has-key($header-defs, lh) {\n line-height: unitless-calc(map-get($header-defs, lh), $font-size-temp);\n } @else if $size == $-zf-zero-breakpoint {\n line-height: unitless-calc($header-lineheight, $font-size-temp);\n }\n\n @if map-has-key($header-defs, margin-top) {\n margin-top: rem-calc(map-get($header-defs, margin-top));\n } @else if map-has-key($header-defs, mt) {\n margin-top: rem-calc(map-get($header-defs, mt));\n } @else if $size == $-zf-zero-breakpoint {\n margin-top: 0;\n }\n @if map-has-key($header-defs, margin-bottom) {\n margin-bottom: rem-calc(map-get($header-defs, margin-bottom));\n } @else if map-has-key($header-defs, mb) {\n margin-bottom: rem-calc(map-get($header-defs, mb));\n } @else if $size == $-zf-zero-breakpoint {\n margin-bottom: rem-calc($header-margin-bottom);\n }\n }\n }\n }\n }\n\n // Links\n a {\n line-height: inherit;\n color: $anchor-color;\n text-decoration: $anchor-text-decoration;\n\n cursor: pointer;\n\n &:hover,\n &:focus {\n color: $anchor-color-hover;\n @if $anchor-text-decoration-hover != $anchor-text-decoration {\n text-decoration: $anchor-text-decoration-hover;\n }\n }\n\n img {\n border: 0;\n }\n }\n\n // Horizontal rule\n hr {\n clear: both;\n\n max-width: $hr-width;\n height: 0;\n margin: $hr-margin;\n\n border-top: 0;\n border-right: 0;\n border-bottom: $hr-border;\n border-left: 0;\n }\n\n // Lists\n ul,\n ol,\n dl {\n margin-bottom: $list-margin-bottom;\n list-style-position: $list-style-position;\n line-height: $list-lineheight;\n }\n\n // List items\n li {\n font-size: inherit;\n }\n\n // Unordered lists\n ul {\n margin-#{$global-left}: $list-side-margin;\n list-style-type: $list-style-type;\n }\n\n // Ordered lists\n ol {\n margin-#{$global-left}: $list-side-margin;\n }\n\n // Nested unordered/ordered lists\n ul, ol {\n & & {\n margin-#{$global-left}: $list-nested-side-margin;\n margin-bottom: 0;\n }\n }\n\n // Definition lists\n dl {\n margin-bottom: $defnlist-margin-bottom;\n\n dt {\n margin-bottom: $defnlist-term-margin-bottom;\n font-weight: $defnlist-term-weight;\n }\n }\n\n // Blockquotes\n blockquote {\n margin: 0 0 $paragraph-margin-bottom;\n padding: $blockquote-padding;\n border-#{$global-left}: $blockquote-border;\n\n &, p {\n line-height: $paragraph-lineheight;\n color: $blockquote-color;\n }\n }\n\n // Citations\n cite {\n display: block;\n font-size: $cite-font-size;\n color: $cite-color;\n\n &:before {\n content: $cite-pseudo-content;\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 code {\n padding: $code-padding;\n\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 // 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 by ZURB\n// foundation.zurb.com\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@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","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\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}\n\n@mixin foundation-form-select {\n select {\n @include form-select;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\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 by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n@import 'math';\n\n$contrast-warnings: true !default;\n\n////\n/// @group functions\n////\n\n/// Checks the luminance of `$color`.\n///\n/// @param {Color} $color - Color to check the luminance of.\n///\n/// @returns {Number} The luminance of `$color`.\n@function color-luminance($color) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n $rgba: red($color), green($color), blue($color);\n $rgba2: ();\n\n @for $i from 1 through 3 {\n $rgb: nth($rgba, $i);\n $rgb: $rgb / 255;\n\n $rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));\n\n $rgba2: append($rgba2, $rgb);\n }\n\n @return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);\n}\n\n/// Checks the contrast ratio of two colors.\n///\n/// @param {Color} $color1 - First color to compare.\n/// @param {Color} $color2 - Second color to compare.\n///\n/// @returns {Number} The contrast ratio of the compared colors.\n@function color-contrast($color1, $color2) {\n // Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js\n // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef\n $luminance1: color-luminance($color1) + 0.05;\n $luminance2: color-luminance($color2) + 0.05;\n $ratio: $luminance1 / $luminance2;\n\n @if $luminance2 > $luminance1 {\n $ratio: 1 / $ratio;\n }\n\n $ratio: round($ratio * 10) / 10;\n\n @return $ratio;\n}\n\n/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.\n///\n/// @param {Color} $base - Color to check luminance.\n/// @param {List} $colors [($white, $black)] - Colors to compare.\n/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.\n///\n/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.\n@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {\n $contrast: color-contrast($base, nth($colors, 1));\n $best: nth($colors, 1);\n\n @for $i from 2 through length($colors) {\n $current-contrast: color-contrast($base, nth($colors, $i));\n @if ($current-contrast - $contrast > $tolerance) {\n $contrast: color-contrast($base, nth($colors, $i));\n $best: nth($colors, $i);\n }\n }\n\n @if ($contrast-warnings and $contrast < 3) {\n @warn \"Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}\";\n }\n\n @return $best;\n}\n\n/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.\n///\n/// @param {Color} $color - Color to scale.\n/// @param {Percentage} $scale [5%] - Amount to scale up or down.\n/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.\n///\n/// @returns {Color} A scaled color.\n@function smart-scale($color, $scale: 5%, $threshold: 40%) {\n @if lightness($color) > $threshold {\n $scale: -$scale;\n }\n @return scale-color($color, $lightness: $scale);\n}\n\n/// Get color from foundation-palette\n///\n/// @param {key} color key from foundation-palette\n///\n/// @returns {Color} color from foundation-palette\n@function get-color($key) {\n @if map-has-key($foundation-palette, $key) {\n @return map-get($foundation-palette, $key);\n }\n @else {\n @error 'given $key is not available in $foundation-palette';\n }\n}\n\n/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.\n@mixin add-foundation-colors() {\n @if map-has-key($foundation-palette, primary) {\n $primary-color: map-get($foundation-palette, primary) !global;\n } @else {\n $primary-color: #1779ba !global;\n }\n @if map-has-key($foundation-palette, secondary) {\n $secondary-color: map-get($foundation-palette, secondary) !global;\n } @else {\n $secondary-color: #767676 !global;\n }\n @if map-has-key($foundation-palette, success) {\n $success-color: map-get($foundation-palette, success) !global;\n } @else {\n $success-color: #3adb76 !global;\n }\n @if map-has-key($foundation-palette, warning) {\n $warning-color: map-get($foundation-palette, warning) !global;\n } @else {\n $warning-color: #ffae00 !global;\n }\n @if map-has-key($foundation-palette, alert) {\n $alert-color: map-get($foundation-palette, alert) !global;\n } @else {\n $alert-color: #cc4b37 !global;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group tooltip\n////\n\n/// Default cursor of the defined term.\n/// @type Keyword\n$has-tip-cursor: help !default;\n\n/// Default font weight of the defined term.\n/// @type Keyword | Number\n$has-tip-font-weight: $global-weight-bold !default;\n\n/// Default border bottom of the defined term.\n/// @type List\n$has-tip-border-bottom: dotted 1px $dark-gray !default;\n\n/// Default color of the tooltip background.\n/// @type Color\n$tooltip-background-color: $black !default;\n\n/// Default color of the tooltip font.\n/// @type Color\n$tooltip-color: $white !default;\n\n/// Default padding of the tooltip background.\n/// @type Number\n$tooltip-padding: 0.75rem !default;\n\n/// Default max width for tooltips.\n/// @type Number\n$tooltip-max-width: 10rem !default;\n\n/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy.\n/// @type Number\n$tooltip-font-size: $small-font-size !default;\n\n/// Default pip width for tooltips.\n/// @type Number\n$tooltip-pip-width: 0.75rem !default;\n\n/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word.\n/// @type Number\n$tooltip-pip-height: $tooltip-pip-width * 0.866 !default;\n\n/// Default radius for tooltips.\n/// @type Number\n$tooltip-radius: $global-radius !default;\n\n@mixin has-tip {\n position: relative;\n display: inline-block;\n\n border-bottom: $has-tip-border-bottom;\n font-weight: $has-tip-font-weight;\n cursor: $has-tip-cursor;\n}\n\n@mixin tooltip {\n position: absolute;\n top: calc(100% + #{$tooltip-pip-height});\n z-index: 1200;\n\n max-width: $tooltip-max-width;\n padding: $tooltip-padding;\n\n border-radius: $tooltip-radius;\n background-color: $tooltip-background-color;\n font-size: $tooltip-font-size;\n color: $tooltip-color;\n\n &::before {\n position: absolute;\n }\n\n &.bottom {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);\n bottom: 100%;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.top {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);\n top: 100%;\n bottom: auto;\n }\n\n &.align-center::before {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &.left {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);\n left: 100%;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.right {\n &::before {\n @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);\n right: 100%;\n left: auto;\n }\n\n &.align-center::before {\n bottom: auto;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n &.align-top::before {\n bottom: auto;\n top: 10%;\n }\n\n &.align-bottom::before {\n bottom: 10%;\n top: auto;\n }\n\n &.align-left::before {\n left: 10%;\n right: auto;\n }\n\n &.align-right::before {\n left: auto;\n right: 10%;\n }\n}\n\n@mixin foundation-tooltip {\n .has-tip {\n @include has-tip;\n }\n\n .tooltip {\n @include tooltip;\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group Flexbox Utilities\n////\n//\n/// Default value for the count of source ordering`\n/// @type Number\n$flex-source-ordering-count: 6 !default;\n\n/// Quickly disable/enable Responsive breakpoints for Vanilla Flex Helpers.\n/// @type Boolean\n$flexbox-responsive-breakpoints: true !default;\n\n@mixin flex-helpers {\n .flex-container {\n @include flex;\n }\n\n .flex-child-auto {\n flex: 1 1 auto;\n }\n\n .flex-child-grow {\n flex: 1 0 auto;\n }\n\n .flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n\n @if ($flexbox-responsive-breakpoints) {\n // Loop through Responsive Breakpoints\n @each $size in $breakpoint-classes {\n @include breakpoint($size) {\n @if $size != $-zf-zero-breakpoint {\n .#{$size}-flex-container {\n @include flex;\n }\n\n .#{$size}-flex-child-auto {\n flex: 1 1 auto;\n }\n\n .#{$size}-flex-child-grow {\n flex: 1 0 auto;\n }\n\n .#{$size}-flex-child-shrink {\n flex: 0 1 auto;\n }\n\n @each $dir, $prop in $-zf-flex-direction {\n .#{$size}-flex-dir-#{$dir} {\n @include flex-direction($prop);\n }\n }\n }\n }\n }\n }\n}\n\n@mixin foundation-flex-classes {\n // Horizontal alignment using justify-content\n @each $hdir, $prop in $-zf-flex-justify {\n .align-#{$hdir} {\n @include flex-align($x: $hdir);\n }\n }\n \n // Horizontal alignment Specifically for Vertical Menu\n @each $hdir, $prop in map-remove($-zf-flex-justify, 'justify', 'spaced') {\n .align-#{$hdir} {\n &.vertical {\n &.menu > li > a {\n @include flex-align($x: $hdir);\n }\n }\n }\n }\n\n // Vertical alignment using align-items and align-self\n @each $vdir, $prop in $-zf-flex-align {\n .align-#{$vdir} {\n @include flex-align($y: $vdir);\n }\n\n .align-self-#{$vdir} {\n @include flex-align-self($y: $vdir);\n }\n }\n\n // Central alignment of content\n .align-center-middle {\n @include flex-align($x: center, $y: middle);\n align-content: center;\n }\n\n // Source ordering\n @include -zf-each-breakpoint {\n @for $i from 1 through $flex-source-ordering-count {\n .#{$-zf-size}-order-#{$i} {\n @include flex-order($i);\n }\n }\n }\n\n // Vanilla Flexbox Helpers\n @include flex-helpers;\n}\n","@function -zf-flex-justify($text-direction){\n $-zf-flex-justify: (\n 'left': if($text-direction == rtl, flex-end, flex-start),\n 'right': if($text-direction == rtl, flex-start, flex-end),\n 'center': center,\n 'justify': space-between,\n 'spaced': space-around,\n );\n\n @return $-zf-flex-justify;\n}\n\n\n$-zf-flex-align: (\n 'top': flex-start,\n 'bottom': flex-end,\n 'middle': center,\n 'stretch': stretch,\n);\n\n$-zf-flex-direction: (\n 'row': row,\n 'row-reverse': row-reverse,\n 'column': column,\n 'column-reverse': column-reverse,\n);\n\n/// Enables flexbox by adding `display: flex` to the element.\n@mixin flex {\n display: flex;\n}\n\n/// Horizontally or vertically aligns the items within a flex container.\n///\n/// @param {Keyword} $x [null] - Horizontal alignment to use. Can be `left`, `right`, `center`, `justify`, or `spaced`. Or, set it to `null` (the default) to not set horizontal alignment.\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align($x: null, $y: null) {\n @if $x {\n @if map-has-key($-zf-flex-justify, $x) {\n $x: map-get($-zf-flex-justify, $x);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$x} is not a valid value for horizontal alignment. Use left, right, center, justify, or spaced.';\n }\n }\n\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-row-align(): #{$y} is not a valid value for vertical alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n justify-content: $x;\n align-items: $y;\n}\n\n/// Vertically align a single column within a flex row. Apply this mixin to a flex column.\n///\n/// @param {Keyword} $y [null] - Vertical alignment to use. Can be `top`, `bottom`, `middle`, or `stretch`. Or, set it to `null` (the default) to not set vertical alignment.\n@mixin flex-align-self($y: null) {\n @if $y {\n @if map-has-key($-zf-flex-align, $y) {\n $y: map-get($-zf-flex-align, $y);\n }\n @else {\n @warn 'flex-grid-column-align(): #{$y} is not a valid value for alignment. Use top, bottom, middle, or stretch.';\n }\n }\n\n align-self: $y;\n}\n\n/// Changes the source order of a flex child. Children with lower numbers appear first in the layout.\n/// @param {Number} $order [0] - Order number to apply.\n@mixin flex-order($order: 0) {\n order: $order;\n}\n\n/// Change flex-direction\n/// @param {Keyword} $direction [row] - Flex direction to use. Can be\n/// - row (default): same as text direction\n/// - row-reverse: opposite to text direction\n/// - column: same as row but top to bottom\n/// - column-reverse: same as row-reverse top to bottom\n@mixin flex-direction($direction: row) {\n flex-direction: $direction;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n/// Hide an element by default, only displaying it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for($size) {\n $size: map-get($breakpoints, $size);\n // Max value is 0.2px under the next breakpoint (0.02 / 16 = 0.00125).\n // Use a precision under 1px to support browser zoom, but not to low to avoid rounding.\n // See https://github.com/zurb/foundation-sites/issues/11313\n $size: -zf-bp-to-em($size) - .00125;\n\n @include breakpoint($size down) {\n display: none !important;\n }\n}\n\n/// Hide an element by default, only displaying it within a certain breakpoint.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin show-for-only($size) {\n $lower-bound-size: map-get($breakpoints, $size);\n $upper-bound-size: -zf-map-next($breakpoints, $size);\n\n // more often than not this will be correct, just one time round the loop it won't so set in scope here\n $lower-bound: -zf-bp-to-em($lower-bound-size) - .00125;\n // test actual lower-bound-size, if 0 set it to 0em\n @if strip-unit($lower-bound-size) == 0 {\n $lower-bound: -zf-bp-to-em($lower-bound-size);\n }\n\n @if $upper-bound-size == null {\n @media screen and (max-width: $lower-bound) {\n display: none !important;\n }\n }\n @else {\n $upper-bound: -zf-bp-to-em($upper-bound-size);\n\n @media screen and (max-width: $lower-bound), screen and (min-width: $upper-bound) {\n display: none !important;\n }\n }\n}\n\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for($size) {\n @include breakpoint($size) {\n display: none !important;\n }\n}\n\n/// Show an element by default, and hide it above a certain screen size.\n/// @param {Keyword} $size - Breakpoint to use. **Must be a breakpoint defined in `$breakpoints`.**\n@mixin hide-for-only($size) {\n @include breakpoint($size only) {\n display: none !important;\n }\n}\n\n@mixin foundation-visibility-classes {\n // Basic hiding classes\n .hide {\n display: none !important;\n }\n\n .invisible {\n visibility: hidden;\n }\n\n // Responsive visibility classes\n @each $size in $breakpoint-classes {\n @if $size != $-zf-zero-breakpoint {\n .hide-for-#{$size} {\n @include hide-for($size);\n }\n\n .show-for-#{$size} {\n @include show-for($size);\n }\n }\n\n .hide-for-#{$size}-only {\n @include hide-for-only($size);\n }\n\n .show-for-#{$size}-only {\n @include show-for-only($size);\n }\n }\n\n // Screen reader visibility classes\n // Need a \"hide-for-sr\" class? Add aria-hidden='true' to the element\n .show-for-sr,\n .show-on-focus {\n @include element-invisible;\n }\n\n // Only display the element when it's focused\n .show-on-focus {\n &:active,\n &:focus {\n @include element-invisible-off;\n }\n }\n\n // Landscape and portrait visibility\n .show-for-landscape,\n .hide-for-portrait {\n display: block !important;\n\n @include breakpoint(landscape) {\n display: block !important;\n }\n\n @include breakpoint(portrait) {\n display: none !important;\n }\n }\n\n .hide-for-landscape,\n .show-for-portrait {\n display: none !important;\n\n @include breakpoint(landscape) {\n display: none !important;\n }\n\n @include breakpoint(portrait) {\n display: block !important;\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n// Margin Grid classes\n@mixin xy-base-grid-classes {\n\n // Grid Container\n .grid-container {\n @include xy-grid-container;\n\n &.fluid {\n @include xy-grid-container(100%);\n }\n\n &.full {\n @include xy-grid-container(100%, 0);\n }\n }\n\n // Base grid styles\n .grid-x {\n @include xy-grid;\n }\n\n .cell {\n @include xy-cell-base();\n @include xy-cell-static($grid-columns, false, $gutter-type: padding);\n\n &.auto {\n @include xy-cell-base(auto);\n }\n\n &.shrink {\n @include xy-cell-base(shrink);\n }\n\n }\n .grid-x {\n > .auto {\n @include xy-cell-static(auto, false);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Auto width\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues & PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n .grid-x {\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false);\n }\n }\n\n %-xy-cell-base-shrink-horizontal-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n .grid-x > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static(shrink, false);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n .grid-x > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-horizontal-#{$-zf-size};\n @include xy-cell-static($i, false, $gutter-type: padding);\n }\n }\n }\n\n // Reset width when using `.grid-margin-x` not on `.grid-x`\n .grid-margin-x:not(.grid-x) > .cell {\n width: auto;\n }\n\n // Reset height when using `.grid-margin-y` not on `.grid-y`\n .grid-margin-y:not(.grid-y) > .cell {\n height: auto;\n }\n}\n\n@mixin -xy-breakpoint-cell-classes($class-breakpoint, $gutter-breakpoint, $vertical) {\n $prefix: if($class-breakpoint == $-zf-zero-breakpoint, '', '#{$class-breakpoint}-');\n > .#{$prefix}auto {\n @include xy-cell-static(auto, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n > .#{$prefix}shrink {\n @include xy-cell-static(shrink, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n $classname: if($vertical, '.#{$class-breakpoint}-#{$i}', '.#{$class-breakpoint}-#{$i}');\n\n > #{$classname} {\n @include xy-cell-static($i, false, $breakpoint: $gutter-breakpoint, $vertical: $vertical);\n }\n }\n}\n\n// Margin Grid classes\n@mixin xy-margin-grid-classes(\n $gutter-position: left right,\n $vertical: false,\n $wrapping-selector: '.grid-margin-x'\n){\n #{$wrapping-selector} {\n @include xy-gutters($negative: true, $gutter-position: $gutter-position);\n\n // Base cell styles\n > .cell {\n @include xy-cell-static($vertical: $vertical);\n }\n\n // base styles need to all be before the auto and shrink styles\n @include -zf-each-breakpoint() {\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size) and $-zf-size != $-zf-zero-breakpoint) {\n > .cell {\n @include xy-cell-static($breakpoint: $-zf-size, $vertical: $vertical);\n }\n }\n }\n\n @include -zf-each-breakpoint() {\n\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for all prior breakpoints.\n // As their gutter is defined with their width/height, even breakpoint without a new margin must be\n // generated to not having their width/height overrided by re-adjusted smaller breakpoints.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @include -xy-breakpoint-cell-classes($bp, $-zf-size, $vertical);\n }\n }\n\n @include -xy-breakpoint-cell-classes($-zf-size, $-zf-size, $vertical);\n }\n }\n}\n\n// Padding Grid classes\n@mixin xy-padding-grid-classes {\n .grid-padding-x {\n\n // Negative margin for nested grids\n .grid-padding-x {\n @include xy-gutters($negative: true);\n }\n\n // Negative margin for grids within `grid-container/grid-container.fluid`\n // This allows margin and padding grids to line up with eachother\n .grid-container:not(.full) > & {\n @include xy-gutters($negative: true);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding);\n }\n }\n}\n\n// Block Grid classes\n@mixin xy-block-grid-classes($margin-grid: true, $padding-grid: true) {\n @if $padding-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n .#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n }\n }\n }\n\n @if $margin-grid {\n @include -zf-each-breakpoint {\n @for $i from 1 through $xy-block-grid-max {\n // This is purely for responsive gutters - the margin grid has to go back and adjust widths (or heights)\n // for prior breakpoints based on the responsive gutter.\n @if(type-of($grid-margin-gutters) == 'map' and map-has-key($grid-margin-gutters, $-zf-size)) {\n @each $bp in -zf-breakpoints-less-than($-zf-size) {\n @if(map-has-key($grid-margin-gutters, $bp)) {\n .grid-margin-x.#{$bp}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n }\n @for $i from 1 through $xy-block-grid-max {\n .grid-margin-x.#{$-zf-size}-up-#{$i} {\n @include xy-grid-layout($n: $i, $selector: '.cell', $gutter-output: false, $gutter-type: margin, $breakpoint: $-zf-size);\n }\n }\n }\n }\n}\n\n// Collapse classes\n@mixin xy-collapse-grid-classes($margin-grid: true, $padding-grid: true) {\n @each $bp in $breakpoint-classes {\n @if $margin-grid {\n .#{$bp}-margin-collapse {\n @include xy-grid-collapse($gutter-type: margin, $min-breakpoint: $bp);\n }\n }\n\n @if $padding-grid {\n .#{$bp}-padding-collapse {\n @include xy-grid-collapse($gutter-type: padding, $min-breakpoint: $bp);\n }\n }\n }\n}\n\n// Offset classes\n@mixin xy-offset-cell-classes {\n @include -zf-each-breakpoint {\n @for $i from 1 through $grid-columns {\n // Offsets\n $o: $i - 1;\n\n .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $gutters: $grid-padding-gutters, $gutter-type: padding, $breakpoint: $-zf-size);\n }\n\n .grid-margin-x > .#{$-zf-size}-offset-#{$o} {\n @include xy-cell-offset($o, $breakpoint: $-zf-size);\n }\n }\n }\n}\n\n// Vertical Grid classes\n@mixin xy-vertical-grid-classes(\n $margin-grid: true,\n $padding-grid: true\n) {\n\n @include -zf-each-breakpoint() {\n @if not($-zf-size == small) {\n }\n }\n\n .grid-y {\n @include xy-grid(vertical, false);\n\n\n > .cell {\n @include xy-cell-reset();\n }\n\n > .auto {\n @include xy-cell-static(auto, false, $vertical: true);\n }\n\n > .shrink {\n @include xy-cell-static(shrink, false, $vertical: true);\n }\n\n\n @include -zf-each-breakpoint() {\n // This is a bit of a hack/workaround, see these issues and PRs for the backstory:\n // https://github.com/zurb/foundation-sites/issues/10244\n // https://github.com/zurb/foundation-sites/pull/10222 and\n // https://github.com/zurb/foundation-sites/pull/10164\n $str: \"> .#{$-zf-size}-shrink, > .#{$-zf-size}-full\";\n @for $i from 1 through $grid-columns {\n $str: $str + \", > .#{$-zf-size}-#{$i}\"\n }\n #{$str} {\n flex-basis: auto;\n }\n }\n\n @include -zf-each-breakpoint() {\n // Responsive \"auto\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-auto {\n @include xy-cell-base(auto);\n @include xy-cell-static(auto, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n %-xy-cell-base-shrink-vertical-#{$-zf-size} {\n @include xy-cell-base(shrink);\n }\n\n // Responsive \"shrink\" modifier\n @if not($-zf-size == small) {\n > .#{$-zf-size}-shrink {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static(shrink, false, $breakpoint: $-zf-size, $vertical: true);\n }\n }\n\n // Responsive width modifiers\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$-zf-size}-#{$i} {\n @extend %-xy-cell-base-shrink-vertical-#{$-zf-size};\n @include xy-cell-static($i, false, $vertical: true, $gutter-type: padding);\n }\n }\n\n }\n }\n\n @if $padding-grid {\n .grid-padding-y {\n // Negative margin for nested grids\n .grid-padding-y {\n @include xy-gutters($negative: true, $gutter-position: top bottom);\n }\n\n // Base cell styles\n > .cell {\n @include xy-gutters($gutters: $grid-padding-gutters, $gutter-type: padding, $gutter-position: top bottom);\n }\n }\n }\n\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n }\n\n}\n\n@mixin xy-frame-grid-classes($vertical-grid: true, $margin-grid: true) {\n // Framed grid styles\n .grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .cell-block {\n @include xy-cell-block();\n }\n\n .cell-block-y {\n @include xy-cell-block(true);\n }\n\n\n .cell-block-container {\n @include xy-cell-block-container();\n }\n\n\n @include -zf-each-breakpoint(false) {\n\n .#{$-zf-size}-grid-frame {\n @include xy-grid-frame;\n }\n\n .cell .#{$-zf-size}-grid-frame {\n width: 100%; // Same as include with $nested, but with less css\n }\n\n .#{$-zf-size}-cell-block {\n @include xy-cell-block();\n }\n\n .#{$-zf-size}-cell-block-container {\n @include xy-cell-block-container();\n }\n\n .#{$-zf-size}-cell-block-y {\n @include xy-cell-block(true);\n }\n }\n\n @if $vertical-grid {\n .grid-y {\n &.grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n @include -zf-each-breakpoint(false) {\n &.#{$-zf-size}-grid-frame {\n width: auto;\n @include xy-grid-frame(true);\n }\n\n }\n }\n .cell {\n .grid-y.grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n @include -zf-each-breakpoint(false) {\n .grid-y.#{$-zf-size}-grid-frame {\n height: 100%; // Same as include with $nested, but with less css\n }\n }\n }\n }\n @if $margin-grid {\n @include xy-margin-grid-classes(top bottom, true, '.grid-margin-y');\n .grid-frame.grid-margin-y {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $include-base: false);\n }\n @include -zf-each-breakpoint(false) {\n .grid-margin-y.#{$-zf-size}-grid-frame {\n @include xy-grid-frame(true, false, $grid-margin-gutters, $-zf-size, false);\n }\n }\n }\n}\n\n// Final classes\n@mixin foundation-xy-grid-classes(\n $base-grid: true,\n $margin-grid: true,\n $padding-grid: true,\n $block-grid: true,\n $collapse: true,\n $offset: true,\n $vertical-grid: true,\n $frame-grid: true\n) {\n\n // Base grid styles\n @if($base-grid) {\n @include xy-base-grid-classes();\n }\n\n // Margin grid\n @if($margin-grid) {\n @include xy-margin-grid-classes();\n }\n\n // Padding grid\n @if($padding-grid) {\n @include xy-padding-grid-classes();\n }\n\n // Block grid\n @if($block-grid) {\n @include xy-block-grid-classes($margin-grid, $padding-grid);\n }\n\n // Collapse gutters\n @if($collapse) {\n @include xy-collapse-grid-classes($margin-grid, $padding-grid);\n }\n\n // Offset gutters\n @if($offset) {\n @include xy-offset-cell-classes();\n }\n\n // Vertical grid\n @if($vertical-grid) {\n @include xy-vertical-grid-classes($margin-grid, $padding-grid);\n }\n\n @if ($frame-grid) {\n @include xy-frame-grid-classes($vertical-grid, $margin-grid)\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Create gutters for a cell/container.\n///\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts either margin or padding.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Boolean} $negative [false] - Whether to apply the gutter as a negative value. Commonly used for nested grids.\n@mixin xy-gutters(\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $negative: false\n) {\n $operator: if($negative, '-', '');\n\n // If we have declared negative gutters, force type to `margin.\n $gutter-type: if($negative, 'margin', $gutter-type);\n\n // Output our margin gutters.\n @if (type-of($gutters) == 'map') {\n @include -zf-breakpoint-value(auto, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n }\n @else if (type-of($gutters) == 'number') {\n $gutter: rem-calc($gutters) / 2;\n\n // Loop through each gutter position\n @each $value in $gutter-position {\n #{$gutter-type}-#{$value}: unquote(\"#{$operator}#{$gutter}\");\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Creates a max width container, designed to house your grid content.\n///\n/// @param {Number} $width [$grid-container] - a width to limit the container to.\n/// @param {Number} $padding [$grid-container-padding] - paddings of the container.\n@mixin xy-grid-container(\n $width: $grid-container,\n $padding: $grid-container-padding\n) {\n @include xy-gutters($gutters: $padding, $gutter-type: padding);\n\n max-width: $width;\n margin-left: auto;\n margin-right: auto;\n}\n\n/// Creates a container for your flex cells.\n///\n/// @param {Keyword} $direction [horizontal] - Either horizontal or vertical direction of cells within.\n/// @param {Boolean} $wrap [true] - If the cells within should wrap or not.\n@mixin xy-grid(\n $direction: horizontal,\n $wrap: true\n) {\n $direction: if($direction == 'horizontal', row, column);\n $wrap: if($wrap, wrap, nowrap);\n\n display: flex;\n flex-flow: $direction $wrap;\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Calculate the percentage size of a cell.\n///\n/// @param {Number|List} $size [$grid-columns] - Size to make the cell. You can pass a value in multiple formats, such as `6`, `50%`, `1 of 2` or `1/3`.\n@function xy-cell-size(\n $size: $grid-columns\n) {\n // Parsing percents, decimals, n of n and number counts\n @if type-of($size) == 'number' {\n @if unit($size) == '%' {\n $size: $size;\n }\n @else if $size < 1 {\n $size: percentage($size);\n }\n @else {\n $size: percentage($size / $grid-columns);\n }\n }\n\n // Parsing \"n of n\" or \"n/n\" expressions\n @else if type-of($size) == 'list' {\n @if length($size) != 3 {\n @error 'Wrong syntax for xy-cell-size(). Use the format \"n of n\" or \"n/n\".';\n }\n @else {\n $size: percentage(nth($size, 1) / nth($size, 3));\n }\n }\n // Anything else is incorrect\n @else {\n @error 'Wrong syntax for xy-cell-size(). Use a number, decimal, percentage, or \"n of n\" / \"n/n\".';\n }\n\n @return $size;\n}\n\n/// Sets base flex properties for cells.\n///\n/// @param {Keyword} $size [full] - The size of your cell. Accepts `full`, `auto`, `shrink` or `grow`.\n@mixin xy-cell-base($size: full) {\n @if($size == 'full') {\n // This is the base style, all others inherit from it\n flex: 0 0 auto;\n min-height: 0px;\n min-width: 0px;\n }\n @else if ($size == 'auto') {\n flex: 1 1 0px; // sass-lint:disable-line zero-unit\n }\n @else if ($size == 'shrink') {\n flex: 0 0 auto;\n }\n @else if ($size == 'grow') {\n flex: 1 0 auto;\n }\n}\n\n/// Resets a cells width (or height if vertical is true) as well as strips its gutters.\n///\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-reset($vertical: true) {\n $direction: if($vertical == true, width, height);\n #{$direction}: auto;\n max-#{$direction}: none;\n}\n\n// Sets our cell widths or heights depending on gutter type.\n@mixin -xy-cell-properties($size, $margin-gutter, $vertical) {\n $direction: if($vertical == true, height, width);\n @if($size == 'full') {\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n @else if ($size == 'auto') {\n #{$direction}: auto;\n $val: if($margin-gutter == 0, 100%, calc(100% - #{rem-calc($margin-gutter)}));\n }\n @else if ($size == 'shrink') {\n #{$direction}: auto;\n }\n @else {\n $val: if($margin-gutter == 0, #{xy-cell-size($size)}, calc(#{xy-cell-size($size)} - #{rem-calc($margin-gutter)}));\n #{$direction}: $val;\n }\n}\n\n/// Creates a cell for your grid.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $bp-is-fallback: false;\n\n @if($breakpoint == null) {\n // If `$bp-size` is available then use this, otherwise revert to the smallest bp.\n @if(variable-exists(-zf-size) and type-of($-zf-size) != 'number') and $-zf-size != null {\n $breakpoint: $-zf-size;\n }\n @else {\n $breakpoint: $-zf-zero-breakpoint;\n $bp-is-fallback: true;\n }\n }\n\n // Get the gutter for the given breakpoint/value.\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n // If the breakpoint is a fallback, use a fallback gutter as well\n @if ($bp-is-fallback == true and $gutter == null) {\n $gutter: 0;\n }\n\n @if($gutter != null) {\n // Base flex properties\n @include xy-cell-base($size);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n @if $gutter-output {\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n }\n @else {\n @warn 'xy-cell: no gutters were found in `$gutters` for \"$breakpoint: #{$breakpoint}\", cell was not generated`'\n }\n}\n\n/// Creates a single breakpoint sized grid. Used to generate our grid classes.\n///\n/// @param {Keyword|Number} $size [full] - The size of your cell. Can be `full` (default) for 100% width, `auto` to use up available space and `shrink` to use up only required space.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from. If using with the `breakpoint()` mixin this will be set automatically unless manually entered.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-cell-static(\n $size: full,\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n $gutter-position: if($vertical == true, top bottom, left right);\n\n @if($gutter-type == 'margin') {\n @include -xy-cell-properties($size, $gutter, $vertical);\n }\n @else {\n @include -xy-cell-properties($size, 0, $vertical);\n }\n\n // If we want to output the gutters\n @if($gutter-output) {\n // TODO: Figure out if we need to pass breakpoint in here too.\n @include xy-gutters($gutter, $gutter-type, $gutter-position);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Sizes child elements so that `$n` number of items appear on each row.\n///\n/// @param {Number} $n - Number of elements to display per row.\n/// @param {String} $selector ['.cell'] - Selector(s) to use for child elements.\n/// @param {Boolean} $gutter-output [true] - Whether or not to output gutters\n/// @param {Number|Map} $gutters [$grid-margin-gutters] - Map or single value for gutters.\n/// @param {Keyword} $gutter-type [margin] - Type of gutter to output. Accepts `margin` or `padding`.\n/// @param {List} $gutter-position [right left] - The position to apply gutters to. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {String} $breakpoint [null] - The breakpoint to use for the cell generation.\n/// @param {Boolean} $vertical [false] - Set to true to output vertical (height) styles rather than widths.\n@mixin xy-grid-layout(\n $n,\n $selector: '.cell',\n $gutter-output: true,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $gutter-position: right left,\n $breakpoint: null,\n $vertical: false\n) {\n $size: percentage(1/$n);\n\n & > #{$selector} {\n @include xy-cell($size, $gutter-output, $gutters, $gutter-type, $gutter-position, $breakpoint, $vertical);\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Collapses the grid a cells within it.\n///\n/// @param {String} $selector [.cell] - The child element to remove the gutter from.\n/// @param {Keyword} $gutter-type [margin] - The type of gutter to remove.\n/// @param {List} $gutter-position [right left] - The positions to remove gutters from. Accepts `top`, `bottom`, `left`, `right` in any combination.\n/// @param {Keyword} $min-breakpoint [$-zf-zero-breakpoint] - Minimum breakpoint in `$breakpoint-classes` for which to collapse the gutter.\n@mixin xy-grid-collapse(\n $selector: '.cell',\n $gutter-type: margin,\n $gutter-position: right left,\n $min-breakpoint: $-zf-zero-breakpoint\n) {\n // First, lets negate any margins on the top level\n @if ($gutter-type == 'margin') {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n }\n }\n\n $excluded-bps: -zf-breakpoints-less-than($min-breakpoint);\n\n // Output new widths to not include gutters\n @each $bp in $breakpoint-classes {\n @if(sl-contain($excluded-bps, $bp)) {\n @include breakpoint($min-breakpoint) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n } @else {\n @include breakpoint($bp) {\n @for $i from 1 through $grid-columns {\n // Sizing (percentage)\n > .#{$bp}-#{$i} {\n @include xy-cell-static($i, $gutter-output: false, $gutter-type: padding);\n }\n }\n }\n }\n }\n }\n @else {\n\n @include breakpoint($min-breakpoint) {\n @each $value in $gutter-position {\n margin-#{$value}: 0;\n }\n\n > #{$selector} {\n @each $value in $gutter-position {\n padding-#{$value}: 0;\n }\n }\n }\n }\n}\n","// Foundation for Sites by ZURB\n// foundation.zurb.com\n// Licensed under MIT Open Source\n\n////\n/// @group xy-grid\n////\n\n/// Offsets a column to the right/bottom by `$n` columns.\n///\n/// @param {Number|List} $n - Size to offset by. You can pass in any value accepted by the `zf-cell()` mixin, such as `6`, `50%`, or `1 of 2`.\n/// @param {Number|Map} $gutters [$grid-margin-gutters] Map of gutters or single value to use for responsive gutters.\n/// @param {Keyword} $gutter-type [margin] The type of gutter to use. Can be `margin` or `padding`\n/// @param {Number|Array|Keyword} $breakpoint [$-zf-zero-breakpoint] - Single value, breakpoint name, or list of breakpoint names to use for `$gutters`. See `-zf-breakpoint-value()`.\n/// @param {Boolean} $vertical [false] Sets the direction of the offset. If set to true will apply margin-top instead.\n@mixin xy-cell-offset(\n $n,\n $gutters: $grid-margin-gutters,\n $gutter-type: margin,\n $breakpoint: $-zf-zero-breakpoint,\n $vertical: false\n) {\n $direction: if($vertical, 'top', $global-left);\n\n @include -zf-breakpoint-value($breakpoint, $gutters) {\n $gutter: rem-calc($-zf-bp-value) / 2;\n $gutter-margin: if($gutter-type == 'margin', $gutter, 0);\n $size: if($gutter-margin == 0, #{xy-cell-size($n)}, calc(#{xy-cell-size($n)} + #{$gutter-margin}));\n\n margin-#{$direction}: #{$size};\n }\n}\n","/// Modifies a grid to give it \"frame\" behavior (no overflow, no wrap, stretch behavior)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n/// @param {Boolean} $nested [false] - Is grid nested or not. If nested is true this sets the frame to 100% height, otherwise will be 100vh.\n/// @param {Number|Map} $gutters [null] - Map or single value for gutters.\n/// @param {String} $breakpoint [null] - The name of the breakpoint size in your gutters map to get the size from.\n/// @param {Boolean} $include-base [true] - Include the base styles that don't vary per breakpoint.\n@mixin xy-grid-frame(\n $vertical: false,\n $nested: false,\n $gutters: null,\n $breakpoint: null,\n $include-base: true\n) {\n\n @if $include-base {\n overflow: hidden;\n position: relative;\n flex-wrap: nowrap;\n align-items: stretch;\n }\n\n @if $breakpoint == null and type-of($gutters) == 'map' {\n @include -zf-each-breakpoint() {\n @include xy-grid-frame($vertical, $nested, $gutters, $-zf-size, false);\n }\n } @else {\n // Get our gutters if applicable\n $gutter: -zf-get-bp-val($gutters, $breakpoint);\n\n // If we have a gutter, add it to the width/height\n @if $gutter {\n @if $vertical == true {\n $unit: if($nested == true, 100%, 100vh);\n $gutter: rem-calc($gutter);\n height: calc(#{$unit} + #{$gutter});\n } @else {\n $unit: if($nested == true, 100%, 100vw);\n $gutter: rem-calc($gutter);\n width: calc(#{$unit} + #{$gutter});\n }\n }\n @else {\n @if $vertical == true {\n height: if($nested == true, 100%, 100vh);\n } @else {\n width: if($nested == true, 100%, 100vw);\n }\n }\n }\n}\n\n/// Modifies a cell to give it \"block\" behavior (overflow auto, inertial scrolling)\n///\n/// @param {Boolean} $vertical [false] - Is grid vertical or horizontal. Should match grid.\n@mixin xy-cell-block(\n $vertical: false\n) {\n $property: if($vertical == true, 'overflow-y', 'overflow-x');\n\n @if $vertical == true {\n overflow-y: auto;\n max-height: 100%;\n min-height: 100%;\n } @else {\n overflow-x: auto;\n max-width: 100%;\n }\n\n -webkit-overflow-scrolling: touch;\n -ms-overflow-style: -ms-autohiding-scrollbar;\n}\n\n/// Container for inside a grid frame containing multiple blocks. Typically used\n/// as a modifier for a `.cell` to allow the cell to pass along flex sizing\n/// constraints / from parents to children.\n@mixin xy-cell-block-container() {\n display: flex;\n flex-direction: column;\n max-height: 100%;\n\n > .grid-x {\n max-height: 100%;\n flex-wrap: nowrap;\n }\n}\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Overrides and styles for form inputs\n// Should hopefully be removed as all styles are moved to individual components\n\ninput,\nselect,\n.Select-control {\n &:hover {\n background-color: $n150;\n }\n}\n\nselect {\n &:hover {\n &:focus {\n background-color: $n150;\n }\n }\n}\n\ninput,\ntextarea,\nselect {\n &:-ms-input-placeholder { // sass-lint:disable-line no-vendor-prefixes\n color: $n400;\n }\n\n &:disabled{\n &,\n &:hover {\n cursor: not-allowed;\n background-color: $n200;\n }\n }\n}\n\ninput.is-invalid-input:focus {\n border-color: $r300;\n}\n\n.input-group {\n > :last-child {\n border-left: 0;\n border-radius: 0 $input-radius $input-radius 0;\n }\n}\n\n.input-group-label {\n &.disabled {\n .icon {\n color: $n400;\n }\n }\n}\n\n.form-error {\n font-weight: 600;\n}\n\n.select2 {\n margin: 0 0 1rem;\n\n .select2-selection {\n border: 1px solid $n400;\n height: 2.4375rem;\n\n &:focus {\n outline: 1px solid black;\n outline-offset: 2px;\n transition: border-color 0.3s ease-in-out, background-color 0.3s ease;\n }\n\n &:hover {\n background-color: $n200;\n }\n }\n\n .selection {\n .select2-selection__rendered {\n line-height: 1.5;\n padding: 8px 24px 8px 8px;\n color: $n700;\n }\n\n .select2-selection__arrow {\n height: 24px;\n margin-top: 7px;\n margin-right: 2px;\n\n b {\n border-color: $n700 transparent transparent transparent;\n }\n }\n }\n}\n\n.select2-dropdown {\n .select2-results__option {\n color: $n600;\n\n &.select2-results__option[aria-selected=true] {\n background-color: $n200;\n color: $n700;\n }\n\n &.select2-results__option--highlighted[aria-selected] {\n background-color: $i100;\n color: $n700;\n }\n }\n}\n","@import '../../variables.scss';\n\n$pill-styles: (\n primary: (\n background-color: $i100,\n text-color: $i600,\n border-color: $i400\n ),\n secondary: (\n background-color: $b100,\n text-color: $b600,\n border-color: $b400\n ),\n success: (\n background-color: $g100,\n text-color: $g600,\n border-color: $g400\n ),\n warning: (\n background-color: $o100,\n text-color: $o600,\n border-color: $o400\n ),\n alert: (\n background-color: $r100,\n text-color: $r600,\n border-color: $r300\n ),\n neutral: (\n background-color: $n250,\n text-color: $n800,\n border-color: $n400\n ),\n highlight: (\n background-color: $c100,\n text-color: $c600,\n border-color: $c400\n ),\n dark: (\n background-color: $n700,\n text-color: $n200,\n border-color: $n100\n )\n);\n\n@mixin pill-color(\n $text-color,\n $background-color,\n $border-color\n) {\n background: $background-color;\n border: 1px solid $border-color;\n color: $text-color;\n}\n\n// --------------\n// Legacy global pill (label) class for non-javascript support\n// --------------\n// sass-lint:disable placeholder-in-extend\n.label {\n border-radius: 32px;\n display: inline-block;\n font-size: $fz-xsmall;\n font-weight: $fw-semi-bold;\n line-height: 14px;\n padding: 4px 8px;\n white-space: nowrap;\n\n @each $color, $value in $pill-styles {\n &.#{$color} {\n @include pill-color(\n map-get($value, text-color),\n map-get($value, background-color),\n map-get($value, border-color)\n );\n }\n }\n\n &.medium {\n font-size: $fz-small;\n line-height: 16px;\n }\n\n &.large {\n font-size: $fz-body;\n line-height: 18px;\n padding: 4px 12px;\n }\n\n // Neutral by default\n @extend .neutral;\n\n // Domain specific colours; unfortunately have to be kept for now\n &.leave {\n @extend .warning;\n }\n\n &.overdue {\n @extend .alert;\n }\n\n &.draft {\n @extend .neutral;\n }\n\n &.abandoned {\n @extend .primary;\n }\n}\n// sass-lint:enable placeholder-in-extend\n\n\n","@import '~foundation-sites/scss/foundation';\n@import '../../variables';\n\n// Old version of avatar entity; kept here for now to show off in the style guide\n// Should be removed once we're satisfied we can port to avatar entity in future\n.person-tag {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n padding: 2px;\n\n .grid-x {\n flex-wrap: nowrap;\n width: 100%;\n }\n\n .person-label {\n align-items: center;\n display: flex;\n }\n\n .avatar-container {\n align-self: start;\n display: flex;\n position: relative;\n\n .avatar-icon {\n position: absolute;\n right: 0;\n text-align: right;\n top: 27px;\n\n .icon {\n font-size: 14px;\n }\n }\n }\n\n .display-name {\n align-self: center;\n color: $n700;\n overflow: hidden;\n padding-left: 10px;\n\n .position-title {\n color: $n600;\n font-size: .8125rem;\n line-height: 1.3;\n margin-top: 2px;\n }\n }\n\n .person-tag-description {\n color: $n600;\n font-size: .75rem;\n font-weight: 600;\n }\n\n &.cursor-auto {\n cursor: auto;\n }\n\n &.cursor-pointer {\n cursor: pointer;\n }\n\n .has-tip {\n display: inherit;\n }\n\n .header-component {\n font-size: .9375rem;\n font-weight: normal;\n\n .overdue-count {\n @include breakpoint(small down) {\n order: 2;\n }\n }\n }\n\n .tag-icon {\n i {\n font-size: 2rem;\n margin-right: 10px;\n }\n }\n}\n\n.avatar-container {\n display: inline-block;\n position: relative;\n}\n\n.profile-picture-badge,\n.initials-badge {\n border: 1px solid $n400;\n border-radius: 50%;\n color: $i400;\n display: inline-block;\n font-size: 1rem;\n font-weight: 600;\n height: 40px;\n line-height: 38px;\n overflow: hidden;\n text-align: center;\n width: 40px;\n user-select: none;\n vertical-align: middle;\n\n .extended-leave-circle {\n background-color: $o400;\n bottom: -.1rem;\n border: 2px solid $n100;\n border-radius: 50%;\n right: -.3rem;\n padding: 5.5px;\n position: absolute;\n }\n\n img {\n vertical-align: initial;\n width: 100%;\n }\n\n &.badge-small {\n font-size: 0.8rem;\n height: 30px;\n line-height: 28px;\n width: 30px;\n\n .extended-leave-circle {\n padding: 5px;\n }\n }\n\n &.badge-large {\n font-size: 1.5rem;\n height: 72px;\n line-height: 70px;\n width: 72px;\n\n .extended-leave-circle {\n bottom: .1rem;\n right: .1rem;\n padding: 6.5px;\n }\n }\n\n &.badge-xlarge {\n font-size: 2.5rem;\n height: 120px;\n line-height: 118px;\n width: 120px;\n\n .extended-leave-circle {\n bottom: .25rem;\n right: .75rem;\n padding: 7px;\n }\n }\n}\n\n.profile-picture-badge {\n background-color: transparent;\n}\n\n.initials-badge {\n background-color: $n200;\n text-transform: uppercase;\n}\n","@import '../../variables';\n\n.table-container {\n overflow-x: auto;\n}\n\ntable {\n border: 0;\n border-collapse: collapse;\n border-spacing: 0;\n\n thead,\n tbody {\n border: 0;\n }\n\n thead {\n background: $n200;\n border-bottom: 2px solid $n400;\n\n th {\n font-weight: 600;\n }\n }\n\n tbody {\n tr {\n border: 0;\n border-bottom: 1px solid $n300;\n }\n }\n\n .button-group {\n margin-bottom: 0;\n }\n}\n\n\ntr {\n &.highlight {\n // As styled by foundation's callout\n background-color: $o100;\n }\n\n &.alert {\n background-color: $r100;\n }\n}\n\nth,\ntd {\n &.fit {\n white-space: nowrap;\n width: 1%;\n }\n\n &.collapse-all {\n word-break: break-all;\n word-wrap: break-word;\n }\n}\n\ntd {\n .button {\n margin: auto;\n }\n\n &.contains-inputs {\n input,\n select {\n margin: 0;\n }\n\n .input-group {\n margin: 0;\n }\n }\n}\n\n.table-full-width {\n margin-left: auto;\n margin-right: auto;\n max-width: initial;\n width: 100%;\n\n tr td.fit {\n white-space: nowrap;\n width: 1%;\n\n .button-group {\n .button {\n float: none;\n }\n }\n }\n}\n","@import '../../variables';\n\nh1, .h1 {\n font-size: 2rem;\n font-weight: 600;\n line-height: 3.5rem;\n}\n\nh6 {\n letter-spacing: 1px;\n text-transform: uppercase;\n}\n\n.display-text-1 {\n font-size: 4.125rem;\n font-weight: 300;\n}\n\n.display-text-2 {\n font-size: 3.25rem;\n font-weight: 400;\n}\n\n.display-text-3 {\n font-size: 2.5625em;\n font-weight: 400;\n}\n\n.subheader {\n color: $n600;\n}\n\n.title {\n color: $n600;\n font-size: 1.4375rem;\n margin-bottom: .4rem;\n}\n\n%section-header {\n color: $n800;\n font-size: 1.125em;\n font-weight: 600;\n}\n\n.section-header {\n @extend %section-header\n}\n\np.page-subheader {\n color: $n600;\n font-size: .9375rem;\n}\n"],"sourceRoot":""}