// Formir variables:

// Buttons
$button: button !default;
$buttons: buttons !default;
$button-focus: focus !default;
$button-active: active !default;
$button-hover: hover !default;
$button-disabled: disabled !default;
$button-circle: circle !default;
$button-inverse: inverse !default;
$button-as-link: as-link !default;
$button-inactive: inactive !default;
$button-ellipsis: ellipsis !default;
$button-block: block !default;
$button-border-contrast: border-contrast !default;
$button-transparent: transparent !default;

$button-group: button-group !default;
$button-group-horizontal: button-group-horizontal !default;
$button-reverse: reverse !default;
$button-gradient: gradient !default;

// Helpers
//// Visible
$display-none: display-none !default;
$hide: hide !default;
$display-block: display-block !default;
$show: show !default;
$display-inline-block: display-inline-block !default;
$display-inline: display-inline !default;
$display-table: display-table !default;
$display-table-cell: display-table-cell !default;
$display-flex: display-flex !default;
$display-inline-flex: display-inline-flex !default;
$hidden: hidden !default;
$visible: visible !default;
$text-hide: text-hide !default;
$none-events: none-events !default;

$print-hide: print-hide !default;
$print-show: print-show !default;
$not-screen-hide: not-screenhide !default;
$not-screen-show: not-screenshow !default;
$braille-hide: braille-hide !default;
$braille-show: braille-show !default;
$speech-hide: speech-hide !default;
$speech-show: speech-show !default;
$tv-hide: tv-hide !default;
$tv-show: tv-show !default;

$right: right !default;
$left: left !default;
$size: size !default;

//// Dimensions

$width: width !default;
$height: height !default;

$width-geo: width-geo !default;
$height-geo: height-geo !default;

$margin: margin !default;
$margin-top: margin-top !default;
$margin-bottom: margin-bottom !default;
$margin-left: margin-left !default;
$margin-right: margin-right !default;
$margin-horizontal: margin-horizontal !default;
$margin-vertical: margin-vertical !default;

$padding: padding !default;
$padding-top: padding-top !default;
$padding-bottom: padding-bottom !default;
$padding-left: padding-left !default;
$padding-right: padding-right !default;
$padding-horizontal: padding-horizontal !default;
$padding-vertical: padding-vertical !default;

$active: active !default;
$disabled: disabled !default;
$opacity: opacity !default;

//// Align
$text-center: text-center !default;
$text-right: text-right !default;
$text-left: text-left !default;
$text-justify: text-justify !default;

$float-right: float-right !default;
$float-left: float-left !default;

$horizontal-center: horizontal-center !default;

//// Toggle
$toggle: toggle !default;
$toggle-label: toggle-label !default;
$toggle-show: toggle-show !default;
$toggle-block: toggle-block !default;
$toggle-show: toggle-show !default;
$toggle-flex: toggle-flex !default;
$toggle-inline: toggle-inline !default;
$toggle-inline-block: toggle-inline-block !default;
$toggle-none: toggle-none !default;
$toggle-hide: toggle-hide !default;

$mobile-toggle: mobile-toggle !default;
$mobile-toggle-label: mobile-toggle-label !default;
$mobile-toggle-hide: mobile-toggle-hide !default;
$mobile-toggle-show: mobile-toggle-show !default;

// Responsive dimension
$m: m !default;
$mp: mp !default;
$t: t !default;
$tp: tp !default;
$d: d !default;

$under: under !default;

// Grid system
$grid: grid !default;
$cell: cell !default;

$row: row !default;
$column: column !default; // set cell as column
$column-force: column-force !default; // force set all child cell as column
$column-wrap: column-wrap !default; // set row and cell as column - stay width

$reverse: reverse !default; // reverse order
$release: release !default;
$keep-flex: keep-flex !default;

$gutter: gutter !default; // horizontal space between cell
$gutter-margin: gutter-margin !default;
$space: space !default; // vertical space between cell
$space-margin: space-margin !default;

$start-before: start-before !default;
$end-before: end-before !default;

$nowrap: nowrap !default; //prevent wrapping cell
$floating: floating !default; //set grid as float not flexbox

$justify-center: justify-center !default;
$justify-around: justify-around !default;
$justify-between: justify-between !default;
$justify-start: justify-start !default;
$justify-end: justify-end !default;

$vertical-center: vertical-center !default;
$vertical-start: vertical-start !default;
$vertical-end: vertical-end !default;

$vertical-items-center: vertical-items-center !default;
$vertical-items-stretch: vertical-items-stretch !default;
$vertical-items-start: vertical-items-start !default;
$vertical-items-end: vertical-items-end !default;


$offset: offset !default; //set offset on left from cell
$offset-left: offset-left !default; //set offset on left from cell
$offset-right: offset-right !default; //set offset on right from cell

//// Items
$items: items !default;

$items-center: items-center !default;
$items-stretch: items-stretch !default;
$items-start: items-start !default;
$items-end: items-end !default;


// Chart
$chart: chart !default;
$chart-value: value !default;
$chart-ring: ring !default;
$chart-control: chart-control !default;
$chart-value-colored: value-colored !default;

// Dropdown

$dropdown: dropdown !default;
$dropdown-content: dropdown-content !default;
$dropdown-focusable: focusable !default;
$dropdown-top: top !default;
$dropdown-left: left !default;
$dropdown-right: right !default;

// Forms:
$form: form !default;
$label: label !default;
$control: control !default;
$control-group: control-group !default; // in grid use cell classes
$hint: hint !default;
$fieldset: fieldset !default; // tag or class
$legend: legend !default; // class only

$grid-form: grid-form !default;

$form-validate: validate !default;
$form-input-touched: touched !default;

$input: input !default;
$inputs: inputs !default;
$input-inverse: inverse !default;
$input-transparent: transparent !default;
$input-hover: hover !default;
$input-focus: focus !default;

$input-valid: valid !default;
$input-invalid: invalid !default;

///// Addon
$addon-position: after !default;
$addon-left: left-addon !default;
$icon-left: left-icon !default;

///// Select
$select: select !default;
$select-content: select-content !default;
$select-hide-selected: hide-selected !default;
$select-hoverable: hoverable !default;
$select-placeholder: placeholder !default;
$select-active: active !default;
$select-disabled: disabled !default;
$select-readonly: readonly !default;
$select-count-selected: count-selected !default;
$select-all: select-all !default;

$select-arrow: select-arrow !default;

// Table
$table: table !default;
$inline-table: inline-table !default;
$tbody: tbody !default;
$thead: thead !default;
$tfoot: tfoot !default;
$th: th !default;
$tr: tr !default;
$td: td !default;
$col: col !default;
$colgroup: colgroup !default;

$table-scroll: table-scroll !default;
$table-mobile: table-mobile !default;
$table-fixed: table-fixed !default;
$table-ellipsis: table-ellipsis !default;
$table-td-ellipsis: td-ellipsis !default;
$table-header-sticky: header-sticky !default;
$table-body-sticky: body-sticky !default;
$table-footer-sticky: footer-sticky !default;
$table-borders-horizontal: borders-horizontal !default;
$table-borders-vertical: borders-vertical !default;
$table-borders: borders !default;
$table-borders-outside: borders-outside !default;
$table-hoverable-td: hoverable-td !default;
$table-hoverable-tr: hoverable-tr !default;
$table-hoverable-col: hoverable-col !default;
$table-zebra-odd: zebra-odd !default;
$table-zebra-even: zebra-even !default;
$table-on-hover: on-hover !default;
$table-un-hover: un-hover !default;
$table-number: number !default;
$table-bold: bold !default;
$actions: actions !default;
$expandable: expandable !default;
$expandable-toggler: expandable-toggler !default;
$expandable-trigger: expandable-trigger !default;
$toggle-show: toggle-show !default;
$toggle-hide: toggle-hide !default;

$flex: flex !default;

// Window
$window: window !default;
$window-content: window-content !default;
$window-header: window-header !default;
$window-footer: window-footer !default;

// Modal
$modal: modal !default;
$modal-wrapper: modal-wrapper !default;
$modal-window: modal-window !default;
$modal-footer: modal-footer !default;
$modal-header: modal-header !default;
$modal-content: modal-content !default;
$modal-close: modal-close !default;
$modal-backdrop: modal-backdrop !default;
$modal-animated: animated !default;
$modal-open: modal-open !default;
$modal-opened: modal-opened !default;
$modal-centered: centered !default;

$modal-window-s: modal-window-s !default;
$modal-window-l: modal-window-l !default;
$modal-window-xl: modal-window-xl !default;
$modal-window-fullscreen: modal-window-fullscreen !default;

// Tabs
$tabs: tabs !default;
$tab: tab !default;
$tab-navs: tab-navs !default;
$tab-pages: tab-pages !default;
$tab-navs: tab-navs !default;
$tab-labels: tab-labels !default;
$tab-addons: tab-addons !default;


// Accordion
$accordions: accordions !default;
$accordion: accordion !default;
$accordion-label: label !default;
$accordion-content: content !default;
$accordion-collapsible: accordion-collapsible !default;
$accordion-label-hide: label-hide !default;
$accordion-horizontal: horizontal !default;
$accordion-focusable: focusable !default;
$accordion-animated: animated !default;
$accordion-hoverable: hoverable !default;
$accordion-arrow: arrow !default;

// Tooltip
$tooltip: tooltip !default;
$has-tooltip: has-tooltip !default;
$tooltip-bottom: bottom !default;
$tooltip-bottom-right: bottom-right !default;
$tooltip-bottom-center: bottom-center !default;
$tooltip-top: top !default;
$tooltip-top-right: right !default;
$tooltip-center: center !default;
$tooltip-right: right !default;
$tooltip-right-middle: right-middle !default;
$tooltip-left-middle: left-middle !default;
$tooltip-right-top: right-top !default;
$tooltip-right-bottom: right-bottom !default;
$tooltip-left-top: left-top !default;
$tooltip-left-bottom: left-bottom !default;
$tooltip-hoverable: hoverable !default; // tooltip not hide when try hover on it (arrow will be not work with data-tooltip)
$tooltip-hovered: hovered !default; // simulate :hover state to active tooltip manually
$tooltip-absolute: absolute !default;
$tooltip-fixed: fixed !default;

// Popup
$popup: popup !default;
$has-popup: has-popup !default;
$popup-with-menu: with-menu !default;
$popup-bottom: bottom !default;
$popup-bottom-right: bottom-right !default;
$popup-bottom-center: bottom-center !default;
$popup-top: top !default;
$popup-top-right: right !default;
$popup-center: center !default;
$popup-right: right !default;
$popup-right-middle: right-middle !default;
$popup-left-middle: left-middle !default;
$popup-right-top: right-top !default;
$popup-right-bottom: right-bottom !default;
$popup-left-top: left-top !default;
$popup-left-bottom: left-bottom !default;
$popup-hoverable: hoverable !default;
$popup-active: active !default;
$popup-absolute: absolute !default;
$popup-fixed: fixed !default;
$popup-manual: manual !default;
$popup-header: popup-header !default;
$popup-footer: popup-footer !default;
$popup-content: popup-content !default;

// Side
$side: ".side" !default; // tag 'aside' or class or both
$side-top: top !default;
$side-bottom: bottom !default;
$side-left: left !default;
$side-right: right !default;
$side-collapse: side-collapse !default; // sidebar will be collapsed - set expand on ready (unchecked)
$side-expand: side-expand !default; // sidebar will be expand - set collapse on ready (unchecked)
$side-hide: side-hide !default; // sidebar will be hide - set expand on ready (unchecked)
$side-hide-expand: side-hide-expand !default; // sidebar will be expand - set hide on ready (unchecked)
$side-backdrop: side-backdrop !default;
$side-close: side-close !default;
$side-open: side-open !default; // element for open sidebar (label) when is collapse and not visible !default;
$side-animated: animated !default;
$side-hoverable: hoverable !default;
$side-hover-backdrop: hover-backdrop !default;
$side-focusable: focusable !default;
$side-focus-backdrop: focus-backdrop !default;
$side-cover: cover !default;
$side-uncover-hover: uncover-hover !default;
$side-uncover-focus: uncover-focus !default;
$side-overflow: overflow !default;
$side-absolute: absolute !default;
$side-relative: relative !default;
$side-static: static !default;
$side-float: float !default;
$side-full-height: side-full-height !default;
$side-expanded-hide: expanded-hide !default;
$side-expanded-show: expanded-show !default;
$side-collapsed-hide: collapsed-hide !default;
$side-collapsed-show: collapsed-show !default;

// Layout
$content-holder: content-holder !default;
$body-content: body-content !default;

$center-vertically: center-vertically !default;
$horizontally: horizontally !default;

//// Header
$header: ".header" !default; // tag 'header' or class or both
$header-content: header-content !default;
$header-fixed: fixed !default;

//// Footer
$footer: footer !default; // tag 'header' or class or both

// Description list
$dd: dd !default; // tag 'dd' or class or both
$dt: dt !default; // tag 'dt' or class or both
$dl: dl !default; // tag 'dl' or class or both

$dl-horizontally: horizontally !default;
$dl-horizontally-collapse: collapse !default;
$dl-title-colon: title-colon !default;
$dl-size: size !default;
$dl-space: space !default;

// Menu
$menu: ".menu" !default; // tag or class and tag
$menu-horizontal: horizontal !default;
$menu-wrap: wrap !default;
$menu-auto-width: auto-width !default;
$menu-inside: menu-inside !default;
$menu-item: ".item" !default; // tag or class and tag
$menu-item-anchor: ".anchor" !default; // tag 'a' or class and tag
$menu-inside-absolute: menu-absolute !default;
$menu-inside-fixed: menu-fixed !default;

$menu-mobile: menu-mobile !default;

// Icons
$icon: icon !default;
$icon-position: before !default; // before or after


// Typography
//// Heading
$h1: h1 !default;
$h2: h2 !default;
$h3: h3 !default;
$h4: h4 !default;
$h5: h5 !default;
$h6: h6 !default;
$h1-class: $h1 !default;
$h2-class: $h2 !default;
$h3-class: $h3 !default;
$h4-class: $h4 !default;
$h5-class: $h5 !default;
$h6-class: $h6 !default;
$h-actions: actions !default; // class of actions in heading
$h-mute: small !default; // class or tag alternative text

// Link
$link: ".link" !default; // tag or class and tag

//// Colors
$background-color: background !default;
$background-color-hoverable: hoverable !default;
$text-color: text !default;
$border-color: border !default;

//// List
$ul: ul !default;
$ol: ol !default;
$li: li !default;
$list-clear: clear !default;

//// Article
$article: article !default;
$article-p: p !default;

// Section
$section: section !default; // tag or class and tag
$section-full-height: full-height !default;

$section-header: section-header !default;
$section-footer: section-footer !default;
$section-content: section-content !default;
$section-expandable: section-expandable !default;
$with-padding: with-padding !default;
$with-table: with-table !default;
$with-tabs: with-tabs !default;
$with-border: with-border !default;
$overflow-hidden: overflow-hidden !default;
$overflow-auto: overflow-auto !default;
$overflow-scroll: overflow-scroll !default;


// Alerts
$alerts: alerts !default;
$alert: alert !default;
$alert-light: light !default;
$alert-trigger: alert-trigger !default;