// Formir variables:

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

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

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

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

$right: right;
$left: left;
$size: size;

//// Dimensions

$width: width;
$height: height;

$width-geo: width-geo;
$height-geo: height-geo;

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

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

$active: active;
$disabled: disabled;
$opacity: opacity;

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

$float-right: float-right;
$float-left: float-left;

$horizontal-center: horizontal-center;

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

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

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

$under: under;

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

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

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

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

$start-before: start-before;
$end-before: end-before;

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

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

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

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


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

//// Items
$items: items;

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


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

// Dropdown

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

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

$grid-form: grid-form;

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

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

$input-valid: valid;
$input-invalid: invalid;

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

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

$select-arrow: select-arrow;

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

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

$flex: flex;

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

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

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

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


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

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

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

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

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

$center-vertically: center-vertically;
$horizontally: horizontally;

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

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

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

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

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

$menu-mobile: menu-mobile;

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


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

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

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

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

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

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

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


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