{"id":36538751,"url":"https://github.com/wide/styles-helpers","last_synced_at":"2026-01-12T05:31:20.169Z","repository":{"id":49213747,"uuid":"268535831","full_name":"wide/styles-helpers","owner":"wide","description":"SCSS Helpers Collection.","archived":false,"fork":false,"pushed_at":"2021-06-23T09:47:24.000Z","size":54,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-09-24T23:33:51.953Z","etag":null,"topics":["modulus","styles"],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wide.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-01T13:51:46.000Z","updated_at":"2021-06-23T09:46:05.000Z","dependencies_parsed_at":"2022-08-19T01:11:51.883Z","dependency_job_id":null,"html_url":"https://github.com/wide/styles-helpers","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/wide/styles-helpers","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-helpers","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-helpers/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-helpers/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-helpers/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wide","download_url":"https://codeload.github.com/wide/styles-helpers/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wide%2Fstyles-helpers/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28335203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-12T00:36:25.062Z","status":"online","status_checked_at":"2026-01-12T02:00:08.677Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["modulus","styles"],"created_at":"2026-01-12T05:31:15.813Z","updated_at":"2026-01-12T05:31:20.162Z","avatar_url":"https://github.com/wide.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SCSS Helpers Collection\n\n## Install\n\n```\nnpm install @wide/styles-helpers --save\n```\n\n## Note\n\nPlease, note that more you add helper mixins, more your CSS compiled file will be heavy.  \n\nSo add helpers you really need.\n\n## Usage\n\n- [a11y](#a11y)\n- [alignment](#alignment)\n- [clearfix](#clearfix)\n- [container](#container)\n- [crop](#crop)\n- [display](#display)\n- [embed](#embed)\n- [flexbox](#flexbox)\n- [float](#float)\n- [font](#font)\n- [overflow](#overflow)\n- [position](#position)\n- [stretched-link](#stretched-link)\n- [text](#text)\n- [visibility](#visibility)\n\n\u003cbr /\u003e\n\u003cbr/\u003e\n\n## a11y\n\n- [Mixins](#a11y-mixins)\n  - [`a11y-aria()`](#a11y-aria)\n  - [`a11y-sr()`](#a11y-sr)\n  - [`a11y()`](#a11y-a11y)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"a11y-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"a11y-aria\"\u003e\u003c/a\u003e`a11y-aria()`\n\nARIA roles display visual cursor hints.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.a11y-aria;\n```\n\n##### Output\n```css\n[aria-busy=true] {\n    cursor: progress;\n}\n[aria-controls] {\n    cursor: pointer;\n}\n[aria-disabled] {\n    cursor: default;\n}\n```\n\n#### \u003ca name=\"a11y-sr\"\u003e\u003c/a\u003e`a11y-sr()`\n\nScreen readers.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n{\n    @include helpers.a11y-sr();\n}\n```\n\n##### Output\n```css\n.a11y-sr-only {\n    border: 0 !important;\n    clip: rect(0 0 0 0) !important;\n    height: 1px !important;\n    margin: 0 !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    white-space: nowrap !important;\n    width: 1px !important;\n}\n.a11y-sr-focus:not(:focus) {\n    border: 0 !important;\n    clip: rect(0 0 0 0) !important;\n    height: 1px !important;\n    margin: 0 !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    white-space: nowrap !important;\n    width: 1px !important;\n}\n```\n\n#### \u003ca name=\"a11y-a11y\"\u003e\u003c/a\u003e`a11y()`\n\nCombine both [`a11y-aria`](#a11y-aria) and [`a11y-sr`](#a11y-sr) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n{\n    @include helpers.a11y();\n}\n```\n\n##### Output\n```css\n[aria-busy=true] {\n    cursor: progress;\n}\n[aria-controls] {\n    cursor: pointer;\n}\n[aria-disabled] {\n    cursor: default;\n}\n\n.a11y-sr-only {\n    border: 0 !important;\n    clip: rect(0 0 0 0) !important;\n    height: 1px !important;\n    margin: 0 !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    white-space: nowrap !important;\n    width: 1px !important;\n}\n.a11y-sr-focus:not(:focus) {\n    border: 0 !important;\n    clip: rect(0 0 0 0) !important;\n    height: 1px !important;\n    margin: 0 !important;\n    overflow: hidden !important;\n    padding: 0 !important;\n    position: absolute !important;\n    white-space: nowrap !important;\n    width: 1px !important;\n}\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## alignment\n\n- [Variables](#alignment-variables)\n  - [`$aligns`](#alignment-variables-aligns)\n  - [`$aligns-important`](#alignment-variables-aligns-important)\n- [Mixins](#alignment-mixins)\n  - [`alignment-helper()`](#alignment-helper)\n  - [`alignment-helper-with-bp()`](#alignment-helper-with-bp)\n  - [`alignment()`](#alignment-alignment)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"alignment-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"alignment-variables-aligns\"\u003e\u003c/a\u003e`$aligns`\nDefine all alignment values to support.\n\n```scss\n$aligns: (\n    baseline,\n    bottom,\n    middle,\n    top,\n    text-top,\n    text-bottom\n) !default;\n```\n\n#### \u003ca name=\"alignment-variables-aligns-important\"\u003e\u003c/a\u003e`$aligns-important`\nSet the important property on each rules.\n\n```scss\n$aligns-important: true;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"alignment-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"alignment-helper\"\u003e\u003c/a\u003e`alignment-helper()`\n\nSet all alignments classes from the [`$aligns`](#alignment-variables-aligns) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.alignment-helper;\n```\n\n##### Output\n```css\n.align-baseline {\n    vertical-align: baseline !important;\n}\n\n.align-bottom {\n    vertical-align: bottom !important;\n}\n\n.align-middle {\n    vertical-align: middle !important;\n}\n\n.align-top {\n    vertical-align: top !important;\n}\n\n.align-text-top {\n    vertical-align: text-top !important;\n}\n\n.align-text-bottom {\n    vertical-align: text-bottom !important;\n}\n\n.align-vcenter {\n    font-size: 0;\n}\n.align-vcenter::before {\n    content: \"\";\n    display: inline-block;\n    height: 100%;\n    vertical-align: middle;\n}\n.align-vcenter \u003e * {\n    display: inline-block;\n    font-size: 1rem;\n    vertical-align: middle;\n}\n```\n\n#### \u003ca name=\"alignment-helper-with-bp\"\u003e\u003c/a\u003e`alignment-helper-with-bp()`\n\nSet all alignments classes from the [`$aligns`](#alignment-variables-aligns) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.alignment-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .align-baseline\\@xs-only {\n        vertical-align: baseline !important;\n    }\n\n    .align-bottom\\@xs-only {\n        vertical-align: bottom !important;\n    }\n\n    .align-middle\\@xs-only {\n        vertical-align: middle !important;\n    }\n\n    .align-top\\@xs-only {\n        vertical-align: top !important;\n    }\n\n    .align-text-top\\@xs-only {\n        vertical-align: text-top !important;\n    }\n\n    .align-text-bottom\\@xs-only {\n        vertical-align: text-bottom !important;\n    }\n\n    .align-vcenter\\@xs-only {\n        font-size: 0;\n    }\n    .align-vcenter\\@xs-only::before {\n        content: \"\";\n        display: inline-block;\n        height: 100%;\n        vertical-align: middle;\n    }\n    .align-vcenter\\@xs-only \u003e * {\n        display: inline-block;\n        font-size: 1rem;\n        vertical-align: middle;\n    }\n}\n@media (min-width: 36em) {\n /*\n  * .align-baseline\\@sm\n  * .align-bottom\\@sm\n  * .align-middle\\@sm\n  * .align-top\\@sm\n  * .align-text-top\\@sm\n  * .align-text-bottom\\@sm\n  * .align-vcenter\\@sm\n  * .align-vcenter\\@sm::before\n  * .align-vcenter\\@sm \u003e *\n  */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n /*\n  * .align-baseline\\@sm-only\n  * .align-bottom\\@sm-only\n  * .align-middle\\@sm-only\n  * .align-top\\@sm-only\n  * .align-text-top\\@sm-only\n  * .align-text-bottom\\@sm-only\n  * .align-vcenter\\@sm-only\n  * .align-vcenter\\@sm-only::before\n  * .align-vcenter\\@sm-only \u003e *\n  */\n}\n@media (min-width: 48em) {\n /*\n  * .align-baseline\\@md\n  * .align-bottom\\@md\n  * .align-middle\\@md\n  * .align-top\\@md\n  * .align-text-top\\@md\n  * .align-text-bottom\\@md\n  * .align-vcenter\\@md\n  * .align-vcenter\\@md::before\n  * .align-vcenter\\@md \u003e *\n  */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n /*\n  * .align-baseline\\@md-only\n  * .align-bottom\\@md-only\n  * .align-middle\\@md-only\n  * .align-top\\@md-only\n  * .align-text-top\\@md-only\n  * .align-text-bottom\\@md-only\n  * .align-vcenter\\@md-only\n  * .align-vcenter\\@md-only::before\n  * .align-vcenter\\@md-only \u003e *\n  */\n}\n@media (min-width: 64em) {\n /*\n  * .align-baseline\\@lg\n  * .align-bottom\\@lg\n  * .align-middle\\@lg\n  * .align-top\\@lg\n  * .align-text-top\\@lg\n  * .align-text-bottom\\@lg\n  * .align-vcenter\\@lg\n  * .align-vcenter\\@lg::before\n  * .align-vcenter\\@lg \u003e *\n  */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n /*\n  * .align-baseline\\@lg-only\n  * .align-bottom\\@lg-only\n  * .align-middle\\@lg-only\n  * .align-top\\@lg-only\n  * .align-text-top\\@lg-only\n  * .align-text-bottom\\@lg-only\n  * .align-vcenter\\@lg-only\n  * .align-vcenter\\@lg-only::before\n  * .align-vcenter\\@lg-only \u003e *\n  */\n}\n@media (min-width: 75em) {\n /*\n  * .align-baseline\\@xl\n  * .align-bottom\\@xl\n  * .align-middle\\@xl\n  * .align-top\\@xl\n  * .align-text-top\\@xl\n  * .align-text-bottom\\@xl\n  * .align-vcenter\\@xl\n  * .align-vcenter\\@xl::before\n  * .align-vcenter\\@xl \u003e *\n  */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n /*\n  * .align-baseline\\@xl-only\n  * .align-bottom\\@xl-only\n  * .align-middle\\@xl-only\n  * .align-top\\@xl-only\n  * .align-text-top\\@xl-only\n  * .align-text-bottom\\@xl-only\n  * .align-vcenter\\@xl-only\n  * .align-vcenter\\@xl-only::before\n  * .align-vcenter\\@xl-only \u003e *\n  */\n}\n@media (min-width: 100em) {\n /*\n  * .align-baseline\\@xxl\n  * .align-bottom\\@xxl\n  * .align-middle\\@xxl\n  * .align-top\\@xxl\n  * .align-text-top\\@xxl\n  * .align-text-bottom\\@xxl\n  * .align-vcenter\\@xxl\n  * .align-vcenter\\@xxl::before\n  * .align-vcenter\\@xxl \u003e *\n  */\n}\n@media (min-width: 100em) {\n /*\n  * .align-baseline\\@xxl-only\n  * .align-bottom\\@xxl-only\n  * .align-middle\\@xxl-only\n  * .align-top\\@xxl-only\n  * .align-text-top\\@xxl-only\n  * .align-text-bottom\\@xxl-only\n  * .align-vcenter\\@xxl-only\n  * .align-vcenter\\@xxl-only::before\n  * .align-vcenter\\@xxl-only \u003e *\n  */\n}\n```\n\n#### \u003ca name=\"alignment-alignment\"\u003e\u003c/a\u003e`alignment()`\n\nHelper `alignment` entry point  \nCombine both [`alignment-helper`](#alignment-helper) and [`alignment-helper-with-bp`](#alignment-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.alignment;\n// @include helpers.alignment(false);\n```\n\n###### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `alignment-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`alignment-helper`](#alignment-helper) and [`alignment-helper-with-bp`](#alignment-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## clearfix\n\n- [Mixins](#clearfix-mixins)\n  - [`clearfix()`](#clearfix-clearfix)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"clearfix-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"clearfix-clearfix\"\u003e\u003c/a\u003e`clearfix()`\n\nDefine a `.clearfix` class.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.clearfix;\n```\n\n##### Output\n```css\n.clearfix::after {\n    clear: both;\n    content: \"\";\n    display: block;\n}\n```\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## crop\n\n- [Mixins](#crop-mixins)\n  - [`crop-helper()`](#crop-helper)\n  - [`crop-helper-with-bp()`](#crop-helper-with-bp)\n  - [`crop()`](#crop-crop)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"crop-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"crop-helper\"\u003e\u003c/a\u003e`crop-helper()`\n\nProvide a cropping container in order to display media (usually images) cropped to certain ratios.  \n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.crop-helper;\n```\n\n##### Output\n```css\n.crop {\n    display: block;\n    position: relative;\n    overflow: hidden;\n}\n.crop.-r1\\:1 {\n    padding-bottom: 100%;\n}\n.crop.-r2\\:1 {\n    padding-bottom: 50%;\n}\n.crop.-r3\\:2 {\n    padding-bottom: 66.6666666667%;\n}\n.crop.-r4\\:3 {\n    padding-bottom: 75%;\n}\n.crop.-r5\\:3 {\n    padding-bottom: 60%;\n}\n.crop.-r5\\:4 {\n    padding-bottom: 80%;\n}\n.crop.-r6\\:5 {\n    padding-bottom: 83.3333333333%;\n}\n.crop.-r7\\:3 {\n    padding-bottom: 42.8571428571%;\n}\n.crop.-r11\\:8 {\n    padding-bottom: 72.7272727273%;\n}\n.crop.-r16\\:9 {\n    padding-bottom: 56.25%;\n}\n.crop.-r16\\:10 {\n    padding-bottom: 62.5%;\n}\n.crop_content,\n.crop \u003e iframe,\n.crop \u003e embed,\n.crop \u003e object,\n.crop \u003e video,\n.crop \u003e picture,\n.crop \u003e img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    max-width: none;\n}\n.crop_content.-right,\n.crop \u003e iframe.-right,\n.crop \u003e embed.-right,\n.crop \u003e object.-right,\n.crop \u003e video.-right,\n.crop \u003e picture.-right,\n.crop \u003e img.-right {\n    right: 0;\n    left: auto;\n}\n.crop_content.-bottom,\n.crop \u003e iframe.-bottom,\n.crop \u003e embed.-bottom,\n.crop \u003e object.-bottom,\n.crop \u003e video.-bottom,\n.crop \u003e picture.-bottom,\n.crop \u003e img.-bottom {\n    top: auto;\n    bottom: 0;\n}\n.crop_content.-center,\n.crop \u003e iframe.-center,\n.crop \u003e embed.-center,\n.crop \u003e object.-center,\n.crop \u003e video.-center,\n.crop \u003e picture.-center,\n.crop \u003e img.-center {\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n}\n```\n\n#### \u003ca name=\"crop-helper-with-bp\"\u003e\u003c/a\u003e`crop-helper-with-bp()`\n\nProvide a cropping container in order to display media (usually images) cropped to certain ratios with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.crop-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .crop.-r1\\:1\\@xs-only {\n        padding-bottom: 100%;\n    }\n    .crop.-r2\\:1\\@xs-only {\n        padding-bottom: 50%;\n    }\n    .crop.-r3\\:2\\@xs-only {\n        padding-bottom: 66.6666666667%;\n    }\n    .crop.-r4\\:3\\@xs-only {\n        padding-bottom: 75%;\n    }\n    .crop.-r5\\:3\\@xs-only {\n        padding-bottom: 60%;\n    }\n    .crop.-r5\\:4\\@xs-only {\n        padding-bottom: 80%;\n    }\n    .crop.-r6\\:5\\@xs-only {\n        padding-bottom: 83.3333333333%;\n    }\n    .crop.-r7\\:3\\@xs-only {\n        padding-bottom: 42.8571428571%;\n    }\n    .crop.-r11\\:8\\@xs-only {\n        padding-bottom: 72.7272727273%;\n    }\n    .crop.-r16\\:9\\@xs-only {\n        padding-bottom: 56.25%;\n    }\n    .crop.-r16\\:10\\@xs-only {\n        padding-bottom: 62.5%;\n    }\n}\n@media (min-width: 36em) {\n /*\n  * .crop.-r1\\:1\\@sm\n  * .crop.-r2\\:1\\@sm\n  * .crop.-r3\\:2\\@sm\n  * .crop.-r4\\:3\\@sm\n  * .crop.-r5\\:3\\@sm\n  * .crop.-r5\\:4\\@sm\n  * .crop.-r6\\:5\\@sm\n  * .crop.-r7\\:3\\@sm\n  * .crop.-r11\\:8\\@sm\n  * .crop.-r16\\:9\\@sm\n  * .crop.-r16\\:10\\@sm\n  */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n /*\n  * .crop.-r1\\:1\\@sm-only\n  * .crop.-r2\\:1\\@sm-only\n  * .crop.-r3\\:2\\@sm-only\n  * .crop.-r4\\:3\\@sm-only\n  * .crop.-r5\\:3\\@sm-only\n  * .crop.-r5\\:4\\@sm-only\n  * .crop.-r6\\:5\\@sm-only\n  * .crop.-r7\\:3\\@sm-only\n  * .crop.-r11\\:8\\@sm-only\n  * .crop.-r16\\:9\\@sm-only\n  * .crop.-r16\\:10\\@sm-only\n  */\n}\n@media (min-width: 48em) {\n /*\n  * .crop.-r1\\:1\\@md\n  * .crop.-r2\\:1\\@md\n  * .crop.-r3\\:2\\@md\n  * .crop.-r4\\:3\\@md\n  * .crop.-r5\\:3\\@md\n  * .crop.-r5\\:4\\@md\n  * .crop.-r6\\:5\\@md\n  * .crop.-r7\\:3\\@md\n  * .crop.-r11\\:8\\@md\n  * .crop.-r16\\:9\\@md\n  * .crop.-r16\\:10\\@md\n  */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n /*\n  * .crop.-r1\\:1\\@md-only\n  * .crop.-r2\\:1\\@md-only\n  * .crop.-r3\\:2\\@md-only\n  * .crop.-r4\\:3\\@md-only\n  * .crop.-r5\\:3\\@md-only\n  * .crop.-r5\\:4\\@md-only\n  * .crop.-r6\\:5\\@md-only\n  * .crop.-r7\\:3\\@md-only\n  * .crop.-r11\\:8\\@md-only\n  * .crop.-r16\\:9\\@md-only\n  * .crop.-r16\\:10\\@md-only\n  */\n}\n@media (min-width: 64em) {\n /*\n  * .crop.-r1\\:1\\@lg\n  * .crop.-r2\\:1\\@lg\n  * .crop.-r3\\:2\\@lg\n  * .crop.-r4\\:3\\@lg\n  * .crop.-r5\\:3\\@lg\n  * .crop.-r5\\:4\\@lg\n  * .crop.-r6\\:5\\@lg\n  * .crop.-r7\\:3\\@lg\n  * .crop.-r11\\:8\\@lg\n  * .crop.-r16\\:9\\@lg\n  * .crop.-r16\\:10\\@lg\n  */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n /*\n  * .crop.-r1\\:1\\@lg-only\n  * .crop.-r2\\:1\\@lg-only\n  * .crop.-r3\\:2\\@lg-only\n  * .crop.-r4\\:3\\@lg-only\n  * .crop.-r5\\:3\\@lg-only\n  * .crop.-r5\\:4\\@lg-only\n  * .crop.-r6\\:5\\@lg-only\n  * .crop.-r7\\:3\\@lg-only\n  * .crop.-r11\\:8\\@lg-only\n  * .crop.-r16\\:9\\@lg-only\n  * .crop.-r16\\:10\\@lg-only\n  */\n}\n@media (min-width: 75em) {\n /*\n  * .crop.-r1\\:1\\@xl\n  * .crop.-r2\\:1\\@xl\n  * .crop.-r3\\:2\\@xl\n  * .crop.-r4\\:3\\@xl\n  * .crop.-r5\\:3\\@xl\n  * .crop.-r5\\:4\\@xl\n  * .crop.-r6\\:5\\@xl\n  * .crop.-r7\\:3\\@xl\n  * .crop.-r11\\:8\\@xl\n  * .crop.-r16\\:9\\@xl\n  * .crop.-r16\\:10\\@xl\n  */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n /*\n  * .crop.-r1\\:1\\@xl-only\n  * .crop.-r2\\:1\\@xl-only\n  * .crop.-r3\\:2\\@xl-only\n  * .crop.-r4\\:3\\@xl-only\n  * .crop.-r5\\:3\\@xl-only\n  * .crop.-r5\\:4\\@xl-only\n  * .crop.-r6\\:5\\@xl-only\n  * .crop.-r7\\:3\\@xl-only\n  * .crop.-r11\\:8\\@xl-only\n  * .crop.-r16\\:9\\@xl-only\n  * .crop.-r16\\:10\\@xl-only\n  */\n}\n@media (min-width: 100em) {\n /*\n  * .crop.-r1\\:1\\@xxl\n  * .crop.-r2\\:1\\@xxl\n  * .crop.-r3\\:2\\@xxl\n  * .crop.-r4\\:3\\@xxl\n  * .crop.-r5\\:3\\@xxl\n  * .crop.-r5\\:4\\@xxl\n  * .crop.-r6\\:5\\@xxl\n  * .crop.-r7\\:3\\@xxl\n  * .crop.-r11\\:8\\@xxl\n  * .crop.-r16\\:9\\@xxl\n  * .crop.-r16\\:10\\@xxl\n  */\n}\n@media (min-width: 100em) {\n /*\n  * .crop.-r1\\:1\\@xxl-only\n  * .crop.-r2\\:1\\@xxl-only\n  * .crop.-r3\\:2\\@xxl-only\n  * .crop.-r4\\:3\\@xxl-only\n  * .crop.-r5\\:3\\@xxl-only\n  * .crop.-r5\\:4\\@xxl-only\n  * .crop.-r6\\:5\\@xxl-only\n  * .crop.-r7\\:3\\@xxl-only\n  * .crop.-r11\\:8\\@xxl-only\n  * .crop.-r16\\:9\\@xxl-only\n  * .crop.-r16\\:10\\@xxl-only\n  */\n}\n```\n\n#### \u003ca name=\"crop-crop\"\u003e\u003c/a\u003e`crop()`\n\nHelper `crop` entry point.  \nCombine both [`crop-helper`](#crop-helper) and [`crop-helper-with-bp`](#crop-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.crop;\n// @include helpers.crop(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `crop-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`crop-helper`](#crop-helper) and [`crop-helper-with-bp`](#crop-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## display\n\n- [Variables](#display-variables)\n  - [`$displays`](#display-variables-displays)\n  - [`$displays-important`](#display-variables-displays-important)\n  - [`$displays-prefix`](#display-variables-displays-prefix)\n- [Mixins](#display-mixins)\n  - [`display-helper()`](#display-helper)\n  - [`display-helper-with-bp()`](#display-helper-with-bp)\n  - [`display-print-helper()`](#display-print-helper)\n  - [`display-screen-helper()`](#display-screen-helper)\n  - [`display()`](#display-display)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"display-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"display-variables-displays\"\u003e\u003c/a\u003e`$displays`\nDefine all display values to support.\n\n```scss\n$displays: (\n    block,\n    flex,\n    inline,\n    inline-block,\n    inline-flex,\n    list-item,\n    none,\n    table,\n    table-cell,\n    table-row\n) !default;\n```\n\n#### \u003ca name=\"display-variables-displays-important\"\u003e\u003c/a\u003e`$displays-important`\nSet the important property on each rules.\n\n```scss\n$displays-important: true;\n```\n\n#### \u003ca name=\"display-variables-displays-prefix\"\u003e\u003c/a\u003e`$displays-prefix`\nDefine the prefix of all display classes.\n\n```scss\n$displays-prefix: 'd-';\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"display-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"display-helper\"\u003e\u003c/a\u003e`display-helper()`\n\nSet all display classes from the [`$displays`](#display-variables-displays) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.display-helper;\n```\n\n##### Output\n```css\n.d-block {\n    display: block !important;\n}\n\n.d-flex {\n    display: flex !important;\n}\n\n.d-inline {\n    display: inline !important;\n}\n\n.d-inline-block {\n    display: inline-block !important;\n}\n\n.d-inline-flex {\n    display: inline-flex !important;\n}\n\n.d-list-item {\n  display: list-item !important;\n}\n\n.d-none {\n    display: none !important;\n}\n\n.d-table {\n    display: table !important;\n}\n\n.d-table-cell {\n    display: table-cell !important;\n}\n\n.d-table-row {\n    display: table-row !important;\n}\n```\n\n#### \u003ca name=\"display-helper-with-bp\"\u003e\u003c/a\u003e`display-helper-with-bp()`\n\nSet all display classes from the [`$displays`](#display-variables-displays) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.display-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .d-block\\@xs-only {\n        display: block !important;\n    }\n\n    .d-flex\\@xs-only {\n        display: flex !important;\n    }\n\n    .d-inline\\@xs-only {\n        display: inline !important;\n    }\n\n    .d-inline-block\\@xs-only {\n        display: inline-block !important;\n    }\n\n    .d-inline-flex\\@xs-only {\n        display: inline-flex !important;\n    }\n\n    .d-list-item\\@xs-only {\n        display: list-item !important;\n    }\n\n    .d-none\\@xs-only {\n        display: none !important;\n    }\n\n    .d-table\\@xs-only {\n        display: table !important;\n    }\n\n    .d-table-cell\\@xs-only {\n        display: table-cell !important;\n    }\n\n    .d-table-row\\@xs-only {\n        display: table-row !important;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .d-block\\@sm\n     * .d-flex\\@sm\n     * .d-inline\\@sm\n     * .d-inline-block\\@sm\n     * .d-inline-flex\\@sm\n     * .d-list-item\\@sm\n     * .d-none\\@sm\n     * .d-table\\@sm\n     * .d-table-cell\\@sm\n     * .d-table-row\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .d-block\\@sm-only\n     * .d-flex\\@sm-only\n     * .d-inline\\@sm-only\n     * .d-inline-block\\@sm-only\n     * .d-inline-flex\\@sm-only\n     * .d-list-item\\@sm-only\n     * .d-none\\@sm-only\n     * .d-table\\@sm-only\n     * .d-table-cell\\@sm-only\n     * .d-table-row\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .d-block\\@md\n     * .d-flex\\@md\n     * .d-inline\\@md\n     * .d-inline-block\\@md\n     * .d-inline-flex\\@md\n     * .d-list-item\\@md\n     * .d-none\\@md\n     * .d-table\\@md\n     * .d-table-cell\\@md\n     * .d-table-row\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .d-block\\@md-only\n     * .d-flex\\@md-only\n     * .d-inline\\@md-only\n     * .d-inline-block\\@md-only\n     * .d-inline-flex\\@md-only\n     * .d-list-item\\@md-only\n     * .d-none\\@md-only\n     * .d-table\\@md-only\n     * .d-table-cell\\@md-only\n     * .d-table-row\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .d-block\\@lg\n     * .d-flex\\@lg\n     * .d-inline\\@lg\n     * .d-inline-block\\@lg\n     * .d-inline-flex\\@lg\n     * .d-list-item\\@lg\n     * .d-none\\@lg\n     * .d-table\\@lg\n     * .d-table-cell\\@lg\n     * .d-table-row\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .d-block\\@lg-only\n     * .d-flex\\@lg-only\n     * .d-inline\\@lg-only\n     * .d-inline-block\\@lg-only\n     * .d-inline-flex\\@lg-only\n     * .d-list-item\\@lg-only\n     * .d-none\\@lg-only\n     * .d-table\\@lg-only\n     * .d-table-cell\\@lg-only\n     * .d-table-row\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .d-block\\@xl\n     * .d-flex\\@xl\n     * .d-inline\\@xl\n     * .d-inline-block\\@xl\n     * .d-inline-flex\\@xl\n     * .d-list-item\\@xl\n     * .d-none\\@xl\n     * .d-table\\@xl\n     * .d-table-cell\\@xl\n     * .d-table-row\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .d-block\\@xl-only\n     * .d-flex\\@xl-only\n     * .d-inline\\@xl-only\n     * .d-inline-block\\@xl-only\n     * .d-inline-flex\\@xl-only\n     * .d-list-item\\@xl-only\n     * .d-none\\@xl-only\n     * .d-table\\@xl-only\n     * .d-table-cell\\@xl-only\n     * .d-table-row\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .d-block\\@xxl\n     * .d-flex\\@xxl\n     * .d-inline\\@xxl\n     * .d-inline-block\\@xxl\n     * .d-inline-flex\\@xxl\n     * .d-list-item\\@xxl\n     * .d-none\\@xxl\n     * .d-table@xxl\n     * .font-weight-bolder\\@xxl\n     * .font-weight-bolder\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .d-block\\@xxl-only\n     * .d-flex\\@xxl-only\n     * .d-inline\\@xxl-only\n     * .d-inline-block\\@xxl-only\n     * .d-inline-flex\\@xxl-only\n     * .d-list-item\\@xxl-only\n     * .d-none\\@xxl-only\n     * .d-table@xxl-only\n     * .font-weight-bolder\\@xxl-only\n     * .font-weight-bolder\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"display-print-helper\"\u003e\u003c/a\u003e`display-print-helper()`\n\nSet all display classes from the [`$displays`](#display-variables-displays) variable with print media query.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.display-print-helper;\n```\n\n##### Output\n```css\n@media print {\n    /*\n     * .d-block\n     * .d-flex\n     * .d-inline\n     * .d-inline-block\n     * .d-inline-flex\n     * .d-list-item\n     * .d-none\n     * .d-table\n     * .d-table-cell\n     * .d-table-row\n     */\n}\n```\n\n#### \u003ca name=\"display-screen-helper\"\u003e\u003c/a\u003e`display-screen-helper()`\n\nSet all display classes from the [`$displays`](#display-variables-displays) variable with screen media query.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.display-screen-helper;\n```\n\n##### Output\n```css\n@media screen {\n    /*\n     * .d-block\n     * .d-flex\n     * .d-inline\n     * .d-inline-block\n     * .d-inline-flex\n     * .d-list-item\n     * .d-none\n     * .d-table\n     * .d-table-cell\n     * .d-table-row\n     */\n}\n```\n\n#### \u003ca name=\"display-display\"\u003e\u003c/a\u003e`display()`\n\nHelper `display` entry point.  \nCombine both [`display-helper`](#display-helper) and [`display-helper-with-bp`](#display-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.display;\n// @include helpers.display(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `display-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`display-helper`](#display-helper) and [`display-helper-with-bp`](#display-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## embed\n\n- [Mixins](#embed-mixins)\n  - [`embed-helper()`](#embed-helper)\n  - [`embed-helper-with-bp()`](#embed-helper-with-bp)\n  - [`embed()`](#embed-embed)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"embed-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"embed-helper\"\u003e\u003c/a\u003e`embed-helper()`\n\nCreate ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.embed-helper;\n```\n\n##### Output\n```css\n.embed {\n    display: block;\n    position: relative;\n    overflow: hidden;\n}\n.embed.-r1\\:1::before {\n    padding-bottom: 100%;\n}\n.embed.-r2\\:1::before {\n    padding-bottom: 50%;\n}\n.embed.-r3\\:2::before {\n    padding-bottom: 66.6666666667%;\n}\n.embed.-r4\\:3::before {\n    padding-bottom: 75%;\n}\n.embed.-r5\\:3::before {\n    padding-bottom: 60%;\n}\n.embed.-r5\\:4::before {\n    padding-bottom: 80%;\n}\n.embed.-r6\\:5::before {\n    padding-bottom: 83.3333333333%;\n}\n.embed.-r7\\:3::before {\n    padding-bottom: 42.8571428571%;\n}\n.embed.-r11\\:8::before {\n    padding-bottom: 72.7272727273%;\n}\n.embed.-r16\\:9::before {\n    padding-bottom: 56.25%;\n}\n.embed.-r16\\:10::before {\n    padding-bottom: 62.5%;\n}\n.embed::before {\n    content: \"\";\n    display: block;\n    width: 100%;\n    padding-bottom: 100%;\n}\n.embed_content,\n.embed \u003e iframe,\n.embed \u003e embed,\n.embed \u003e object,\n.embed \u003e video,\n.embed \u003e picture,\n.embed \u003e img {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: 0;\n}\n```\n\n#### \u003ca name=\"embed-helper-with-bp\"\u003e\u003c/a\u003e`embed-helper-with-bp()`\n\nCreate ratio-bound content blocks, to keep media (e.g. images, videos) in their correct aspect ratios with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.embed-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .embed.-r1\\:1\\@xs-only::before {\n        padding-bottom: 100%;\n    }\n    .embed.-r2\\:1\\@xs-only::before {\n        padding-bottom: 50%;\n    }\n    .embed.-r3\\:2\\@xs-only::before {\n        padding-bottom: 66.6666666667%;\n    }\n    .embed.-r4\\:3\\@xs-only::before {\n        padding-bottom: 75%;\n    }\n    .embed.-r5\\:3\\@xs-only::before {\n        padding-bottom: 60%;\n    }\n    .embed.-r5\\:4\\@xs-only::before {\n        padding-bottom: 80%;\n    }\n    .embed.-r6\\:5\\@xs-only::before {\n        padding-bottom: 83.3333333333%;\n    }\n    .embed.-r7\\:3\\@xs-only::before {\n        padding-bottom: 42.8571428571%;\n    }\n    .embed.-r11\\:8\\@xs-only::before {\n        padding-bottom: 72.7272727273%;\n    }\n    .embed.-r16\\:9\\@xs-only::before {\n        padding-bottom: 56.25%;\n    }\n    .embed.-r16\\:10\\@xs-only::before {\n        padding-bottom: 62.5%;\n    }\n}\n@media (min-width: 36em) {\n /*\n  * .embed.-r1\\:1\\@sm::before\n  * .embed.-r2\\:1\\@sm::before\n  * .embed.-r3\\:2\\@sm::before\n  * .embed.-r4\\:3\\@sm::before\n  * .embed.-r5\\:3\\@sm::before\n  * .embed.-r5\\:4\\@sm::before\n  * .embed.-r6\\:5\\@sm::before\n  * .embed.-r7\\:3\\@sm::before\n  * .embed.-r11\\:8\\@sm::before\n  * .embed.-r16\\:9\\@sm::before\n  * .embed.-r16\\:10\\@sm::before\n  */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n /*\n  * .embed.-r1\\:1\\@sm-only::before\n  * .embed.-r2\\:1\\@sm-only::before\n  * .embed.-r3\\:2\\@sm-only::before\n  * .embed.-r4\\:3\\@sm-only::before\n  * .embed.-r5\\:3\\@sm-only::before\n  * .embed.-r5\\:4\\@sm-only::before\n  * .embed.-r6\\:5\\@sm-only::before\n  * .embed.-r7\\:3\\@sm-only::before\n  * .embed.-r11\\:8\\@sm-only::before\n  * .embed.-r16\\:9\\@sm-only::before\n  * .embed.-r16\\:10\\@sm-only::before\n  */\n}\n@media (min-width: 48em) {\n /*\n  * .embed.-r1\\:1\\@md::before\n  * .embed.-r2\\:1\\@md::before\n  * .embed.-r3\\:2\\@md::before\n  * .embed.-r4\\:3\\@md::before\n  * .embed.-r5\\:3\\@md::before\n  * .embed.-r5\\:4\\@md::before\n  * .embed.-r6\\:5\\@md::before\n  * .embed.-r7\\:3\\@md::before\n  * .embed.-r11\\:8\\@md::before\n  * .embed.-r16\\:9\\@md::before\n  * .embed.-r16\\:10\\@md::before\n  */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n /*\n  * .embed.-r1\\:1\\@md-only::before\n  * .embed.-r2\\:1\\@md-only::before\n  * .embed.-r3\\:2\\@md-only::before\n  * .embed.-r4\\:3\\@md-only::before\n  * .embed.-r5\\:3\\@md-only::before\n  * .embed.-r5\\:4\\@md-only::before\n  * .embed.-r6\\:5\\@md-only::before\n  * .embed.-r7\\:3\\@md-only::before\n  * .embed.-r11\\:8\\@md-only::before\n  * .embed.-r16\\:9\\@md-only::before\n  * .embed.-r16\\:10\\@md-only::before\n  */\n}\n@media (min-width: 64em) {\n /*\n  * .embed.-r1\\:1\\@lg::before\n  * .embed.-r2\\:1\\@lg::before\n  * .embed.-r3\\:2\\@lg::before\n  * .embed.-r4\\:3\\@lg::before\n  * .embed.-r5\\:3\\@lg::before\n  * .embed.-r5\\:4\\@lg::before\n  * .embed.-r6\\:5\\@lg::before\n  * .embed.-r7\\:3\\@lg::before\n  * .embed.-r11\\:8\\@lg::before\n  * .embed.-r16\\:9\\@lg::before\n  * .embed.-r16\\:10\\@lg::before\n  */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n /*\n  * .embed.-r1\\:1\\@lg-only::before\n  * .embed.-r2\\:1\\@lg-only::before\n  * .embed.-r3\\:2\\@lg-only::before\n  * .embed.-r4\\:3\\@lg-only::before\n  * .embed.-r5\\:3\\@lg-only::before\n  * .embed.-r5\\:4\\@lg-only::before\n  * .embed.-r6\\:5\\@lg-only::before\n  * .embed.-r7\\:3\\@lg-only::before\n  * .embed.-r11\\:8\\@lg-only::before\n  * .embed.-r16\\:9\\@lg-only::before\n  * .embed.-r16\\:10\\@lg-only::before\n  */\n}\n@media (min-width: 75em) {\n /*\n  * .embed.-r1\\:1\\@xl::before\n  * .embed.-r2\\:1\\@xl::before\n  * .embed.-r3\\:2\\@xl::before\n  * .embed.-r4\\:3\\@xl::before\n  * .embed.-r5\\:3\\@xl::before\n  * .embed.-r5\\:4\\@xl::before\n  * .embed.-r6\\:5\\@xl::before\n  * .embed.-r7\\:3\\@xl::before\n  * .embed.-r11\\:8\\@xl::before\n  * .embed.-r16\\:9\\@xl::before\n  * .embed.-r16\\:10\\@xl::before\n  */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n /*\n  * .embed.-r1\\:1\\@xl-only::before\n  * .embed.-r2\\:1\\@xl-only::before\n  * .embed.-r3\\:2\\@xl-only::before\n  * .embed.-r4\\:3\\@xl-only::before\n  * .embed.-r5\\:3\\@xl-only::before\n  * .embed.-r5\\:4\\@xl-only::before\n  * .embed.-r6\\:5\\@xl-only::before\n  * .embed.-r7\\:3\\@xl-only::before\n  * .embed.-r11\\:8\\@xl-only::before\n  * .embed.-r16\\:9\\@xl-only::before\n  * .embed.-r16\\:10\\@xl-only::before\n  */\n}\n@media (min-width: 100em) {\n /*\n  * .embed.-r1\\:1\\@xxl::before\n  * .embed.-r2\\:1\\@xxl::before\n  * .embed.-r3\\:2\\@xxl::before\n  * .embed.-r4\\:3\\@xxl::before\n  * .embed.-r5\\:3\\@xxl::before\n  * .embed.-r5\\:4\\@xxl::before\n  * .embed.-r6\\:5\\@xxl::before\n  * .embed.-r7\\:3\\@xxl::before\n  * .embed.-r11\\:8\\@xxl::before\n  * .embed.-r16\\:9\\@xxl::before\n  * .embed.-r16\\:10\\@xxl::before\n  */\n}\n@media (min-width: 100em) {\n /*\n  * .embed.-r1\\:1\\@xxl-only::before\n  * .embed.-r2\\:1\\@xxl-only::before\n  * .embed.-r3\\:2\\@xxl-only::before\n  * .embed.-r4\\:3\\@xxl-only::before\n  * .embed.-r5\\:3\\@xxl-only::before\n  * .embed.-r5\\:4\\@xxl-only::before\n  * .embed.-r6\\:5\\@xxl-only::before\n  * .embed.-r7\\:3\\@xxl-only::before\n  * .embed.-r11\\:8\\@xxl-only::before\n  * .embed.-r16\\:9\\@xxl-only::before\n  * .embed.-r16\\:10\\@xxl-only::before\n  */\n}\n```\n\n#### \u003ca name=\"embed-embed\"\u003e\u003c/a\u003e`embed()`\n\nHelper `embed` entry point.  \nCombine both [`embed-helper`](#embed-helper) and [`embed-helper-with-bp`](#embed-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.embed;\n// @include helpers.embed(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `embed-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`embed-helper`](#embed-helper) and [`embed-helper-with-bp`](#embed-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## flexbox\n\n- [Variables](#flexbox-variables)\n  - [`$flexboxes`](#flexbox-variables-flexboxes)\n  - [`$flexboxes-properties-class-override`](#flexbox-variables-flexboxes-properties-class-override)\n  - [`$flexboxes-values-class-override`](#flexbox-variables-flexboxes-values-class-override)\n  - [`$flexboxes-factors`](#flexbox-variables-flexboxes-factors)\n  - [`$flexboxes-factors-max-loop`](#flexbox-variables-flexboxes-factors-max-loop)\n  - [`$flexboxes-important`](#flexbox-variables-important)\n- [Mixins](#flexbox-mixins)\n  - [`flexbox-helper()`](#flexbox-helper)\n  - [`flexbox-helper-with-bp()`](#flexbox-helper-with-bp)\n  - [`flexbox-factor-helper()`](#flexbox-factor-helper)\n  - [`flexbox-factor-helper-with-bp()`](#flexbox-factor-helper-with-bp)\n  - [`flexbox()`](#flexbox-flexbox)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"flexbox-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"flexbox-variables-flexboxes\"\u003e\u003c/a\u003e`$flexboxes`\nDefine all flexbox values to support.\n\n```scss\n$flexboxes: (\n    'flex-direction': (\n        row,\n        row-reverse,\n        column,\n        column-reverse\n    ),\n    'flex-wrap': (\n        wrap,\n        nowrap,\n        wrap-reverse\n    ),\n    'justify-content': (\n        flex-start,\n        flex-end,\n        center,\n        space-between,\n        space-around\n    ),\n    'align-content': (\n        flex-start,\n        flex-end,\n        center,\n        space-between,\n        space-around,\n        stretch\n    ),\n    'align-items': (\n        flex-start,\n        flex-end,\n        center,\n        baseline,\n        stretch\n    ),\n    'align-self': (\n        flex-start,\n        flex-end,\n        center,\n        baseline,\n        stretch\n    )\n) !default;\n```\n\n#### \u003ca name=\"flexbox-variables-flexboxes-properties-class-override\"\u003e\u003c/a\u003e`$flexboxes-properties-class-override`\nFlexbox properties list for override class name.\n\n```scss\n$flexboxes-properties-class-override: (\n    // 'flex-direction': '',\n    // 'flex-wrap': '',\n    // 'justify-content': '',\n    // 'align-content': '',\n    // 'align-items': '',\n    // 'align-self': ''\n) !default;\n```\n\nIf you want to custom flexbox properties class name, just uncomment and set the value.  \nFor example, set `flex-direction` as `flex-d` will render:\n\n```css\n.flex-d-row {\n  flex-direction: row !important;\n}\n```\n\n#### \u003ca name=\"flexbox-variables-flexboxes-values-class-override\"\u003e\u003c/a\u003e`$flexboxes-values-class-override`\nFlexbox values list for override class name.\n\n```scss\n$flexboxes-values-class-override: (\n    // 'row': '',\n    // 'row-reverse': '',\n    // 'column': '',\n    // 'column-reverse': '',\n    // 'wrap': '',\n    // 'nowrap': '',\n    // 'wrap-reverse': '',\n    'flex-start': 'start',\n    'flex-end': 'end',\n    // 'center': '',\n    // 'space-between': '',\n    // 'space-around': '',\n    // 'stretch': '',\n    // 'baseline': ''\n) !default;\n```\n\nIf you want to custom flexbox values class name, just uncomment and set the value.  \nBy default, `flex-start` is set as `start`. Which will render:\n\n```css\n.justify-content-start {\n    justify-content: flex-start !important;\n}\n\n/*\n * and not anymore\n *\n * .justify-content-flex-start { ... }\n *\n */\n```\n\n#### \u003ca name=\"flexbox-variables-flexboxes-factors\"\u003e\u003c/a\u003e`$flexboxes-factors`\nFlexbox factor properties to loop.  \n\n\u003e Note that the properties need to support only numeric value !\n\n```scss\n$flexboxes-factors: (\n    'flex-grow',\n    'flex-shrink',\n    'order'\n) !default;\n```\n\n#### \u003ca name=\"flexbox-variables-flexboxes-factors-max-loop\"\u003e\u003c/a\u003e`$flexboxes-factors-max-loop`\nFlexbox factor max loop.\n\n```scss\n$flexboxes-factors-max-loop: 12 !default;\n```\n\n#### \u003ca name=\"flexbox-variables-important\"\u003e\u003c/a\u003e`$flexboxes-important`\nSet the important property on each rules.\n\n```scss\n$flexboxes-important: true;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"flexbox-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"flexbox-helper\"\u003e\u003c/a\u003e`flexbox-helper()`\n\nSet all flexbox classes from the [`$flexboxes`](flexbox-variables-flexboxes) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.flexbox-helper;\n```\n\n##### Output\n```css\n.flex-direction-row {\n    flex-direction: row !important;\n}\n\n.flex-direction-row-reverse {\n    flex-direction: row-reverse !important;\n}\n\n.flex-direction-column {\n    flex-direction: column !important;\n}\n\n.flex-direction-column-reverse {\n    flex-direction: column-reverse !important;\n}\n\n.flex-wrap-wrap {\n    flex-wrap: wrap !important;\n}\n\n.flex-wrap-nowrap {\n    flex-wrap: nowrap !important;\n}\n\n.flex-wrap-wrap-reverse {\n    flex-wrap: wrap-reverse !important;\n}\n\n.justify-content-start {\n    justify-content: flex-start !important;\n}\n\n.justify-content-end {\n    justify-content: flex-end !important;\n}\n\n.justify-content-center {\n    justify-content: center !important;\n}\n\n.justify-content-space-between {\n    justify-content: space-between !important;\n}\n\n.justify-content-space-around {\n    justify-content: space-around !important;\n}\n\n.align-content-start {\n    align-content: flex-start !important;\n}\n\n.align-content-end {\n    align-content: flex-end !important;\n}\n\n.align-content-center {\n    align-content: center !important;\n}\n\n.align-content-space-between {\n    align-content: space-between !important;\n}\n\n.align-content-space-around {\n    align-content: space-around !important;\n}\n\n.align-content-stretch {\n    align-content: stretch !important;\n}\n\n.align-items-start {\n    align-items: flex-start !important;\n}\n\n.align-items-end {\n    align-items: flex-end !important;\n}\n\n.align-items-center {\n    align-items: center !important;\n}\n\n.align-items-baseline {\n    align-items: baseline !important;\n}\n\n.align-items-stretch {\n    align-items: stretch !important;\n}\n\n.align-self-start {\n    align-self: flex-start !important;\n}\n\n.align-self-end {\n    align-self: flex-end !important;\n}\n\n.align-self-center {\n    align-self: center !important;\n}\n\n.align-self-baseline {\n    align-self: baseline !important;\n}\n\n.align-self-stretch {\n    align-self: stretch !important;\n}\n```\n\n#### \u003ca name=\"flexbox-helper-with-bp\"\u003e\u003c/a\u003e`flexbox-helper-with-bp()`\n\nSet all flexbox classes from the [`$flexboxes`](flexbox-variables-flexboxes) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.flexbox-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .flex-direction-row\\@xs-only {\n        flex-direction: row !important;\n    }\n\n    .flex-direction-row-reverse\\@xs-only {\n        flex-direction: row-reverse !important;\n    }\n\n    .flex-direction-column\\@xs-only {\n        flex-direction: column !important;\n    }\n\n    .flex-direction-column-reverse\\@xs-only {\n        flex-direction: column-reverse !important;\n    }\n\n    .flex-wrap-wrap\\@xs-only {\n        flex-wrap: wrap !important;\n    }\n\n    .flex-wrap-nowrap\\@xs-only {\n        flex-wrap: nowrap !important;\n    }\n\n    .flex-wrap-wrap-reverse\\@xs-only {\n        flex-wrap: wrap-reverse !important;\n    }\n\n    .justify-content-start\\@xs-only {\n        justify-content: flex-start !important;\n    }\n\n    .justify-content-end\\@xs-only {\n        justify-content: flex-end !important;\n    }\n\n    .justify-content-center\\@xs-only {\n        justify-content: center !important;\n    }\n\n    .justify-content-space-between\\@xs-only {\n        justify-content: space-between !important;\n    }\n\n    .justify-content-space-around\\@xs-only {\n        justify-content: space-around !important;\n    }\n\n    .align-content-start\\@xs-only {\n        align-content: flex-start !important;\n    }\n\n    .align-content-end\\@xs-only {\n        align-content: flex-end !important;\n    }\n\n    .align-content-center\\@xs-only {\n        align-content: center !important;\n    }\n\n    .align-content-space-between\\@xs-only {\n        align-content: space-between !important;\n    }\n\n    .align-content-space-around\\@xs-only {\n        align-content: space-around !important;\n    }\n\n    .align-content-stretch\\@xs-only {\n        align-content: stretch !important;\n    }\n\n    .align-items-start\\@xs-only {\n        align-items: flex-start !important;\n    }\n\n    .align-items-end\\@xs-only {\n        align-items: flex-end !important;\n    }\n\n    .align-items-center\\@xs-only {\n        align-items: center !important;\n    }\n\n    .align-items-baseline\\@xs-only {\n        align-items: baseline !important;\n    }\n\n    .align-items-stretch\\@xs-only {\n        align-items: stretch !important;\n    }\n\n    .align-self-start\\@xs-only {\n        align-self: flex-start !important;\n    }\n\n    .align-self-end\\@xs-only {\n        align-self: flex-end !important;\n    }\n\n    .align-self-center\\@xs-only {\n        align-self: center !important;\n    }\n\n    .align-self-baseline\\@xs-only {\n        align-self: baseline !important;\n    }\n\n    .align-self-stretch\\@xs-only {\n        align-self: stretch !important;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .flex-direction-row\\@sm\n     * .flex-direction-row-reverse\\@sm\n     * .flex-direction-column\\@sm\n     * .flex-direction-column-reverse\\@sm\n     * .flex-wrap-wrap\\@sm\n     * .flex-wrap-nowrap\\@sm\n     * .flex-wrap-wrap-reverse\\@sm\n     * .justify-content-start\\@sm\n     * .justify-content-end\\@sm\n     * .justify-content-center\\@sm\n     * .justify-content-space-between\\@sm\n     * .justify-content-space-around\\@sm\n     * .align-content-start\\@sm\n     * .align-content-end\\@sm\n     * .align-content-center\\@sm\n     * .align-content-space-between\\@sm\n     * .align-content-space-around\\@sm\n     * .align-content-stretch\\@sm\n     * .align-items-start\\@sm\n     * .align-items-end\\@sm\n     * .align-items-center\\@sm\n     * .align-items-baseline\\@sm\n     * .align-items-stretch\\@sm\n     * .align-self-start\\@sm\n     * .align-self-end\\@sm\n     * .align-self-center\\@sm\n     * .align-self-baseline\\@sm\n     * .align-self-stretch\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .flex-direction-row\\@sm-only\n     * .flex-direction-row-reverse\\@sm-only\n     * .flex-direction-column\\@sm-only\n     * .flex-direction-column-reverse\\@sm-only\n     * .flex-wrap-wrap\\@sm-only\n     * .flex-wrap-nowrap\\@sm-only\n     * .flex-wrap-wrap-reverse\\@sm-only\n     * .justify-content-start\\@sm-only\n     * .justify-content-end\\@sm-only\n     * .justify-content-center\\@sm-only\n     * .justify-content-space-between\\@sm-only\n     * .justify-content-space-around\\@sm-only\n     * .align-content-start\\@sm-only\n     * .align-content-end\\@sm-only\n     * .align-content-center\\@sm-only\n     * .align-content-space-between\\@sm-only\n     * .align-content-space-around\\@sm-only\n     * .align-content-stretch\\@sm-only\n     * .align-items-start\\@sm-only\n     * .align-items-end\\@sm-only\n     * .align-items-center\\@sm-only\n     * .align-items-baseline\\@sm-only\n     * .align-items-stretch\\@sm-only\n     * .align-self-start\\@sm-only\n     * .align-self-end\\@sm-only\n     * .align-self-center\\@sm-only\n     * .align-self-baseline\\@sm-only\n     * .align-self-stretch\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .flex-direction-row\\@md\n     * .flex-direction-row-reverse\\@md\n     * .flex-direction-column\\@md\n     * .flex-direction-column-reverse\\@md\n     * .flex-wrap-wrap\\@md\n     * .flex-wrap-nowrap\\@md\n     * .flex-wrap-wrap-reverse\\@md\n     * .justify-content-start\\@md\n     * .justify-content-end\\@md\n     * .justify-content-center\\@md\n     * .justify-content-space-between\\@md\n     * .justify-content-space-around\\@md\n     * .align-content-start\\@md\n     * .align-content-end\\@md\n     * .align-content-center\\@md\n     * .align-content-space-between\\@md\n     * .align-content-space-around\\@md\n     * .align-content-stretch\\@md\n     * .align-items-start\\@md\n     * .align-items-end\\@md\n     * .align-items-center\\@md\n     * .align-items-baseline\\@md\n     * .align-items-stretch\\@md\n     * .align-self-start\\@md\n     * .align-self-end\\@md\n     * .align-self-center\\@md\n     * .align-self-baseline\\@md\n     * .align-self-stretch\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .flex-direction-row\\@md-only\n     * .flex-direction-row-reverse\\@md-only\n     * .flex-direction-column\\@md-only\n     * .flex-direction-column-reverse\\@md-only\n     * .flex-wrap-wrap\\@md-only\n     * .flex-wrap-nowrap\\@md-only\n     * .flex-wrap-wrap-reverse\\@md-only\n     * .justify-content-start\\@md-only\n     * .justify-content-end\\@md-only\n     * .justify-content-center\\@md-only\n     * .justify-content-space-between\\@md-only\n     * .justify-content-space-around\\@md-only\n     * .align-content-start\\@md-only\n     * .align-content-end\\@md-only\n     * .align-content-center\\@md-only\n     * .align-content-space-between\\@md-only\n     * .align-content-space-around\\@md-only\n     * .align-content-stretch\\@md-only\n     * .align-items-start\\@md-only\n     * .align-items-end\\@md-only\n     * .align-items-center\\@md-only\n     * .align-items-baseline\\@md-only\n     * .align-items-stretch\\@md-only\n     * .align-self-start\\@md-only\n     * .align-self-end\\@md-only\n     * .align-self-center\\@md-only\n     * .align-self-baseline\\@md-only\n     * .align-self-stretch\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .flex-direction-row\\@lg\n     * .flex-direction-row-reverse\\@lg\n     * .flex-direction-column\\@lg\n     * .flex-direction-column-reverse\\@lg\n     * .flex-wrap-wrap\\@lg\n     * .flex-wrap-nowrap\\@lg\n     * .flex-wrap-wrap-reverse\\@lg\n     * .justify-content-start\\@lg\n     * .justify-content-end\\@lg\n     * .justify-content-center\\@lg\n     * .justify-content-space-between\\@lg\n     * .justify-content-space-around\\@lg\n     * .align-content-start\\@lg\n     * .align-content-end\\@lg\n     * .align-content-center\\@lg\n     * .align-content-space-between\\@lg\n     * .align-content-space-around\\@lg\n     * .align-content-stretch\\@lg\n     * .align-items-start\\@lg\n     * .align-items-end\\@lg\n     * .align-items-center\\@lg\n     * .align-items-baseline\\@lg\n     * .align-items-stretch\\@lg\n     * .align-self-start\\@lg\n     * .align-self-end\\@lg\n     * .align-self-center\\@lg\n     * .align-self-baseline\\@lg\n     * .align-self-stretch\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .flex-direction-row\\@lg-only\n     * .flex-direction-row-reverse\\@lg-only\n     * .flex-direction-column\\@lg-only\n     * .flex-direction-column-reverse\\@lg-only\n     * .flex-wrap-wrap\\@lg-only\n     * .flex-wrap-nowrap\\@lg-only\n     * .flex-wrap-wrap-reverse\\@lg-only\n     * .justify-content-start\\@lg-only\n     * .justify-content-end\\@lg-only\n     * .justify-content-center\\@lg-only\n     * .justify-content-space-between\\@lg-only\n     * .justify-content-space-around\\@lg-only\n     * .align-content-start\\@lg-only\n     * .align-content-end\\@lg-only\n     * .align-content-center\\@lg-only\n     * .align-content-space-between\\@lg-only\n     * .align-content-space-around\\@lg-only\n     * .align-content-stretch\\@lg-only\n     * .align-items-start\\@lg-only\n     * .align-items-end\\@lg-only\n     * .align-items-center\\@lg-only\n     * .align-items-baseline\\@lg-only\n     * .align-items-stretch\\@lg-only\n     * .align-self-start\\@lg-only\n     * .align-self-end\\@lg-only\n     * .align-self-center\\@lg-only\n     * .align-self-baseline\\@lg-only\n     * .align-self-stretch\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .flex-direction-row\\@xl\n     * .flex-direction-row-reverse\\@xl\n     * .flex-direction-column\\@xl\n     * .flex-direction-column-reverse\\@xl\n     * .flex-wrap-wrap\\@xl\n     * .flex-wrap-nowrap\\@xl\n     * .flex-wrap-wrap-reverse\\@xl\n     * .justify-content-start\\@xl\n     * .justify-content-end\\@xl\n     * .justify-content-center\\@xl\n     * .justify-content-space-between\\@xl\n     * .justify-content-space-around\\@xl\n     * .align-content-start\\@xl\n     * .align-content-end\\@xl\n     * .align-content-center\\@xl\n     * .align-content-space-between\\@xl\n     * .align-content-space-around\\@xl\n     * .align-content-stretch\\@xl\n     * .align-items-start\\@xl\n     * .align-items-end\\@xl\n     * .align-items-center\\@xl\n     * .align-items-baseline\\@xl\n     * .align-items-stretch\\@xl\n     * .align-self-start\\@xl\n     * .align-self-end\\@xl\n     * .align-self-center\\@xl\n     * .align-self-baseline\\@xl\n     * .align-self-stretch\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .flex-direction-row\\@xl-only\n     * .flex-direction-row-reverse\\@xl-only\n     * .flex-direction-column\\@xl-only\n     * .flex-direction-column-reverse\\@xl-only\n     * .flex-wrap-wrap\\@xl-only\n     * .flex-wrap-nowrap\\@xl-only\n     * .flex-wrap-wrap-reverse\\@xl-only\n     * .justify-content-start\\@xl-only\n     * .justify-content-end\\@xl-only\n     * .justify-content-center\\@xl-only\n     * .justify-content-space-between\\@xl-only\n     * .justify-content-space-around\\@xl-only\n     * .align-content-start\\@xl-only\n     * .align-content-end\\@xl-only\n     * .align-content-center\\@xl-only\n     * .align-content-space-between\\@xl-only\n     * .align-content-space-around\\@xl-only\n     * .align-content-stretch\\@xl-only\n     * .align-items-start\\@xl-only\n     * .align-items-end\\@xl-only\n     * .align-items-center\\@xl-only\n     * .align-items-baseline\\@xl-only\n     * .align-items-stretch\\@xl-only\n     * .align-self-start\\@xl-only\n     * .align-self-end\\@xl-only\n     * .align-self-center\\@xl-only\n     * .align-self-baseline\\@xl-only\n     * .align-self-stretch\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .flex-direction-row\\@xxl\n     * .flex-direction-row-reverse\\@xxl\n     * .flex-direction-column\\@xxl\n     * .flex-direction-column-reverse\\@xxl\n     * .flex-wrap-wrap\\@xxl\n     * .flex-wrap-nowrap\\@xxl\n     * .flex-wrap-wrap-reverse\\@xxl\n     * .justify-content-start\\@xxl\n     * .justify-content-end\\@xxl\n     * .justify-content-center\\@xxl\n     * .justify-content-space-between\\@xxl\n     * .justify-content-space-around\\@xxl\n     * .align-content-start\\@xxl\n     * .align-content-end\\@xxl\n     * .align-content-center\\@xxl\n     * .align-content-space-between\\@xxl\n     * .align-content-space-around\\@xxl\n     * .align-content-stretch\\@xxl\n     * .align-items-start\\@xxl\n     * .align-items-end\\@xxl\n     * .align-items-center\\@xxl\n     * .align-items-baseline\\@xxl\n     * .align-items-stretch\\@xxl\n     * .align-self-start\\@xxl\n     * .align-self-end\\@xxl\n     * .align-self-center\\@xxl\n     * .align-self-baseline\\@xxl\n     * .align-self-stretch\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .flex-direction-row\\@xxl-only\n     * .flex-direction-row-reverse\\@xxl-only\n     * .flex-direction-column\\@xxl-only\n     * .flex-direction-column-reverse\\@xxl-only\n     * .flex-wrap-wrap\\@xxl-only\n     * .flex-wrap-nowrap\\@xxl-only\n     * .flex-wrap-wrap-reverse\\@xxl-only\n     * .justify-content-start\\@xxl-only\n     * .justify-content-end\\@xxl-only\n     * .justify-content-center\\@xxl-only\n     * .justify-content-space-between\\@xxl-only\n     * .justify-content-space-around\\@xxl-only\n     * .align-content-start\\@xxl-only\n     * .align-content-end\\@xxl-only\n     * .align-content-center\\@xxl-only\n     * .align-content-space-between\\@xxl-only\n     * .align-content-space-around\\@xxl-only\n     * .align-content-stretch\\@xxl-only\n     * .align-items-start\\@xxl-only\n     * .align-items-end\\@xxl-only\n     * .align-items-center\\@xxl-only\n     * .align-items-baseline\\@xxl-only\n     * .align-items-stretch\\@xxl-only\n     * .align-self-start\\@xxl-only\n     * .align-self-end\\@xxl-only\n     * .align-self-center\\@xxl-only\n     * .align-self-baseline\\@xxl-only\n     * .align-self-stretch\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"flexbox-factor-helper\"\u003e\u003c/a\u003e`flexbox-factor-helper()`\n\nLoop with [`$flexboxes-factors-max-loop`](flexbox-variables-flexboxes-factors-max-loop) variable to set all flexbox factor classes from the [`$flexboxes-factors`](flexbox-variables-flexboxes-factors) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.flexbox-factor-helper;\n```\n\n##### Output\n```css\n.flex-grow-0 {\n    flex-grow: 0 !important;\n}\n.flex-grow-1 {\n    flex-grow: 1 !important;\n}\n/*\n * and so on until the value set to `$flexboxes-factors-max-loop`\n */\n\n.flex-shrink-0 {\n    flex-shrink: 0 !important;\n}\n.flex-shrink-1 {\n    flex-shrink: 1 !important;\n}\n/*\n * and so on until the value set to `$flexboxes-factors-max-loop`\n */\n\n.order-0 {\n    order: 0 !important;\n}\n.order-1 {\n    order: 1 !important;\n}\n/*\n * and so on until the value set to `$flexboxes-factors-max-loop`\n */\n```\n\n#### \u003ca name=\"flexbox-factor-helper-with-bp\"\u003e\u003c/a\u003e`flexbox-factor-helper-with-bp()`\n\nLoop with [`$flexboxes-factors-max-loop`](flexbox-variables-flexboxes-factors-max-loop) variable to set all flexbox factor classes from the [`$flexboxes-factors`](flexbox-variables-flexboxes-factors) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.flexbox-factor-helper;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .flex-grow-0\\@xs-only {\n        flex-grow: 0 !important;\n    }\n    .flex-grow-1\\@xs-only {\n        flex-grow: 1 !important;\n    }\n    /*\n    * and so on until the value set to `$flexboxes-factors-max-loop`\n    */\n\n    .flex-shrink-0\\@xs-only {\n        flex-shrink: 0 !important;\n    }\n    .flex-shrink-1\\@xs-only {\n        flex-shrink: 1 !important;\n    }\n    /*\n    * and so on until the value set to `$flexboxes-factors-max-loop`\n    */\n\n    .order-0\\@xs-only {\n        order: 0 !important;\n    }\n    .order-1\\@xs-only {\n        order: 1 !important;\n    }\n    /*\n    * and so on until the value set to `$flexboxes-factors-max-loop`\n    */\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .flex-grow-0\\@sm\n     * .flex-grow-1\\@sm\n     * ...\n     * .flex-shrink-0\\@sm\n     * .flex-shrink-1\\@sm\n     * ...\n     * .order-0\\@sm\n     * .order-1\\@sm\n     * ...\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .flex-grow-0\\@sm-only\n     * .flex-grow-1\\@sm-only\n     * ...\n     * .flex-shrink-0\\@sm-only\n     * .flex-shrink-1\\@sm-only\n     * ...\n     * .order-0\\@sm-only\n     * .order-1\\@sm-only\n     * ...\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .flex-grow-0\\@md\n     * .flex-grow-1\\@md\n     * ...\n     * .flex-shrink-0\\@md\n     * .flex-shrink-1\\@md\n     * ...\n     * .order-0\\@md\n     * .order-1\\@md\n     * ...\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .flex-grow-0\\@md-only\n     * .flex-grow-1\\@md-only\n     * ...\n     * .flex-shrink-0\\@md-only\n     * .flex-shrink-1\\@md-only\n     * ...\n     * .order-0\\@md-only\n     * .order-1\\@md-only\n     * ...\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .flex-grow-0\\@lg\n     * .flex-grow-1\\@lg\n     * ...\n     * .flex-shrink-0\\@lg\n     * .flex-shrink-1\\@lg\n     * ...\n     * .order-0\\@lg\n     * .order-1\\@lg\n     * ...\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .flex-grow-0\\@lg-only\n     * .flex-grow-1\\@lg-only\n     * ...\n     * .flex-shrink-0\\@lg-only\n     * .flex-shrink-1\\@lg-only\n     * ...\n     * .order-0\\@lg-only\n     * .order-1\\@lg-only\n     * ...\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .flex-grow-0\\@xl\n     * .flex-grow-1\\@xl\n     * ...\n     * .flex-shrink-0\\@xl\n     * .flex-shrink-1\\@xl\n     * ...\n     * .order-0\\@xl\n     * .order-1\\@xl\n     * ...\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .flex-grow-0\\@xl-only\n     * .flex-grow-1\\@xl-only\n     * ...\n     * .flex-shrink-0\\@xl-only\n     * .flex-shrink-1\\@xl-only\n     * ...\n     * .order-0\\@xl-only\n     * .order-1\\@xl-only\n     * ...\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .flex-grow-0\\@xxl\n     * .flex-grow-1\\@xxl\n     * ...\n     * .flex-shrink-0\\@xxl\n     * .flex-shrink-1\\@xxl\n     * ...\n     * .order-0\\@xxl\n     * .order-1\\@xxl\n     * ...\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .flex-grow-0\\@xxl-only\n     * .flex-grow-1\\@xxl-only\n     * ...\n     * .flex-shrink-0\\@xxl-only\n     * .flex-shrink-1\\@xxl-only\n     * ...\n     * .order-0\\@xxl-only\n     * .order-1\\@xxl-only\n     * ...\n     */\n}\n```\n\n#### \u003ca name=\"flexbox-flexbox\"\u003e\u003c/a\u003e`flexbox()`\n\nHelper `flexbox` entry point.  \nCombine [`flexbox-helper`](#flexbox-helper), [`flexbox-helper-with-bp`](#flexbox-helper-with-bp), [`flexbox-factor`](#flexbox-factor) and [`flexbox-factor-with-bp`](#flexbox-factor-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.flexbox;\n// @include helpers.flexbox(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `flexbox-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`flexbox-helper`](#flexbox-helper), [`flexbox-helper-with-bp`](#flexbox-helper-with-bp), [`flexbox-factor`](#flexbox-factor) and [`flexbox-factor-with-bp`](#flexbox-factor-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## float\n\n- [Variables](#float-variables)\n  - [`$floats`](#float-variables-floats)\n- [Mixins](#float-mixins)\n  - [`float-helper()`](#float-helper)\n  - [`float-helper-with-bp()`](#float-helper-with-bp)\n  - [`float()`](#float-float)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"float-variables\"\u003e\u003c/a\u003eVariables\n\nThis variable could be customized depending on what you need in your `variables.scss` file.  \nHere is the default value.\n\n#### \u003ca name=\"float-variables-floats\"\u003e\u003c/a\u003e`$floats`\nDefine all float values to support.\n\n```scss\n$floats: (\n    right,\n    left,\n    none\n) !default;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"float-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"float-helper\"\u003e\u003c/a\u003e`float-helper()`\n\nSet all float classes from the [`$floats`](#float-variables-floats) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.float-helper;\n```\n\n##### Output\n```css\n.float-right {\n    float: right !important;\n}\n\n.float-left {\n    float: left !important;\n}\n\n.float-none {\n    float: none !important;\n}\n```\n\n#### \u003ca name=\"float-helper-with-bp\"\u003e\u003c/a\u003e`float-helper-with-bp()`\n\nSet all float classes from the [`$floats`](#float-variables-floats) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.float-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .float-right\\@xs-only {\n        float: right !important;\n    }\n\n    .float-left\\@xs-only {\n        float: left !important;\n    }\n\n    .float-none\\@xs-only {\n        float: none !important;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .float-right\\@sm\n     * .float-left\\@sm\n     * .float-none\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .float-right\\@sm-only\n     * .float-left\\@sm-only\n     * .float-none\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .float-right\\@md\n     * .float-left\\@md\n     * .float-none\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .float-right\\@md-only\n     * .float-left\\@md-only\n     * .float-none\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .float-right\\@lg\n     * .float-left\\@lg\n     * .float-none\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .float-right\\@lg-only\n     * .float-left\\@lg-only\n     * .float-none\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .float-right\\@xl\n     * .float-left\\@xl\n     * .float-none\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .float-right\\@xl-only\n     * .float-left\\@xl-only\n     * .float-none\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .float-right\\@xxl\n     * .float-left\\@xxl\n     * .float-none\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .float-right\\@xxl-only\n     * .float-left\\@xxl-only\n     * .float-none\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"float-float\"\u003e\u003c/a\u003e`float()`\n\nHelper `float` entry point.  \nCombine both [`float-helper`](#float-helper) and [`float-helper-with-bp`](#float-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.float;\n// @include helpers.float(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `float-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`float-helper()`](#float-helper) and [`float-helper-with-bp()`](#float-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## font\n\n- [Variables](#font-variables)\n  - [`$fonts-style`](#font-variables-fonts-style)\n  - [`$fonts-weight`](#font-variables-fonts-weight)\n  - [`$fonts-important`](#font-variables-fonts-important)\n- [Mixins](#font-mixins)\n  - [`font-style-helper()`](#font-style-helper)\n  - [`font-weight-helper()`](#font-weight-helper)\n  - [`font-helper-with-bp()`](#font-helper-with-bp)\n  - [`font()`](#font-font)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"font-variables\"\u003e\u003c/a\u003eVariables\n\nThose variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"font-variables-fonts-style\"\u003e\u003c/a\u003e`$fonts-style`\nDefine all font-style values to support.\n\n```scss\n$fonts-style: (\n    italic: 'italic'\n) !default;\n```\n\n#### \u003ca name=\"font-variables-fonts-weight\"\u003e\u003c/a\u003e`$fonts-weight`\nDefine all font-weight values to support.\n\n```scss\n$fonts-weight: (\n    lighter: 100,\n    light: 200,\n    normal: 300,\n    bold: 600,\n    bolder: 800\n) !default;\n```\n\n#### \u003ca name=\"font-variables-fonts-important\"\u003e\u003c/a\u003e`$fonts-important`\nSet the important property on each rules.\n\n```scss\n$fonts-important: true;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"font-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"font-style-helper\"\u003e\u003c/a\u003e`font-style-helper()`\n\nSet all font style classes from the [`$fonts-style`](#font-variables-fonts-style) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.font-style-helper;\n```\n\n##### Output\n```css\n.font-weight-italic {\n    font-style: \"italic\" !important;\n}\n```\n\n#### \u003ca name=\"font-weight-helper\"\u003e\u003c/a\u003e`font-weight-helper()`\n\nSet all font weight classes from the [`$fonts-weight`](#font-variables-fonts-weight) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.font-weight-helper;\n```\n\n##### Output\n```css\n.font-weight-lighter {\n    font-weight: 100 !important;\n}\n\n.font-weight-light {\n    font-weight: 200 !important;\n}\n\n.font-weight-normal {\n    font-weight: 300 !important;\n}\n\n.font-weight-bold {\n    font-weight: 600 !important;\n}\n\n.font-weight-bolder {\n    font-weight: 800 !important;\n}\n```\n\n#### \u003ca name=\"font-helper-with-bp\"\u003e\u003c/a\u003e`font-helper-with-bp()`\n\nSet all font style classes from the [`$fonts-style`](#font-variables-fonts-style) variable and all font weight classes from the [`$fonts-weight`](#font-variables-fonts-weight) variable with breakpoints media queries.\n\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.font-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .font-weight-italic\\@xs-only {\n        font-style: \"italic\" !important;\n    }\n\n    .font-weight-lighter\\@xs-only {\n        font-weight: 100 !important;\n    }\n\n    .font-weight-light\\@xs-only {\n        font-weight: 200 !important;\n    }\n\n    .font-weight-normal\\@xs-only {\n        font-weight: 300 !important;\n    }\n\n    .font-weight-bold\\@xs-only {\n        font-weight: 600 !important;\n    }\n\n    .font-weight-bolder\\@xs-only {\n        font-weight: 800 !important;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .font-weight-italic\\@sm\n     * .font-weight-lighter\\@sm\n     * .font-weight-light\\@sm\n     * .font-weight-normal\\@sm\n     * .font-weight-bold\\@sm\n     * .font-weight-bolder\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .font-weight-italic\\@sm-only\n     * .font-weight-lighter\\@sm-only\n     * .font-weight-light\\@sm-only\n     * .font-weight-light\\@sm-only\n     * .font-weight-bold\\@sm-only\n     * .font-weight-bolder\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .font-weight-italic\\@md\n     * .font-weight-lighter\\@md\n     * .font-weight-light\\@md\n     * .font-weight-normal\\@md\n     * .font-weight-bold\\@md\n     * .font-weight-bolder\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .font-weight-italic\\@md-only\n     * .font-weight-lighter\\@md-only\n     * .font-weight-light\\@md-only\n     * .font-weight-light\\@md-only\n     * .font-weight-bold\\@md-only\n     * .font-weight-bolder\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .font-weight-italic\\@lg\n     * .font-weight-lighter\\@lg\n     * .font-weight-light\\@lg\n     * .font-weight-normal\\@lg\n     * .font-weight-bold\\@lg\n     * .font-weight-bolder\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .font-weight-italic\\@lg-only\n     * .font-weight-lighter\\@lg-only\n     * .font-weight-light\\@lg-only\n     * .font-weight-light\\@lg-only\n     * .font-weight-bold\\@lg-only\n     * .font-weight-bolder\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .font-weight-italic\\@xl\n     * .font-weight-lighter\\@xl\n     * .font-weight-light\\@xl\n     * .font-weight-normal\\@xl\n     * .font-weight-bold\\@xl\n     * .font-weight-bolder\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .font-weight-italic\\@xl-only\n     * .font-weight-lighter\\@xl-only\n     * .font-weight-light\\@xl-only\n     * .font-weight-light\\@xl-only\n     * .font-weight-bold\\@xl-only\n     * .font-weight-bolder\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .font-weight-italic\\@xxl\n     * .font-weight-lighter\\@xxl\n     * .font-weight-light\\@xxl\n     * .font-weight-normal\\@xxl\n     * .font-weight-bold\\@xxl\n     * .font-weight-bolder\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .font-weight-italic\\@xxl-only\n     * .font-weight-lighter\\@xxl-only\n     * .font-weight-light\\@xxl-only\n     * .font-weight-light\\@xxl-only\n     * .font-weight-bold\\@xxl-only\n     * .font-weight-bolder\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"font-font\"\u003e\u003c/a\u003e`font()`\n\nHelper `font` entry point.  \nCombine [`font-style-helper`](#font-style-helper), [`font-weight-helper`](#font-weight-helper) and [`font-helper-with-bp`](#font-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.font;\n// @include helpers.font(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `font-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`font-style-helper`](#font-style-helper), [`font-weight-helper`](#font-weight-helper) and [`font-helper-with-bp`](#font-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## overflow\n\n- [Variables](#overflow-variables)\n  - [`$overflows`](#overflow-variables-overflows)\n- [Mixins](#overflow-mixins)\n  - [`overflow-helper()`](#overflow-helper)\n  - [`overflow-helper-with-bp()`](#overflow-helper-with-bp)\n  - [`overflow()`](#overflow-overflow)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"overflow-variables\"\u003e\u003c/a\u003eVariables\n\nThis variable could be customized depending on what you need in your `variables.scss` file.  \nHere is the default value.\n\n#### \u003ca name=\"overflow-variables-overflows\"\u003e\u003c/a\u003e`$overflows`\nDefine all position values to support.\n\n```scss\n$overflows: (\n    auto,\n    hidden\n) !default;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"overflow-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"overflow-helper\"\u003e\u003c/a\u003e`overflow-helper()`\n\nSet all float classes from the [`$overflows`](#overflow-variables-overflows) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.overflow-helper;\n```\n\n##### Output\n```css\n.overflow-auto {\n    overflow: auto !important;\n}\n\n.overflow-hidden {\n    overflow: hidden !important;\n}\n```\n\n#### \u003ca name=\"overflow-helper-with-bp\"\u003e\u003c/a\u003e`overflow-helper-with-bp()`\n\nSet all float classes from the [`$overflows`](#overflow-variables-overflows) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.overflow-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .overflow-auto\\@xs-only {\n        overflow: auto !important;\n    }\n\n    .overflow-hidden\\@xs-only {\n        overflow: hidden !important;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .overflow-auto\\@sm\n     * .overflow-hidden\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .overflow-auto\\@sm-only\n     * .overflow-hidden\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .overflow-auto\\@md\n     * .overflow-hidden\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .overflow-auto\\@md-only\n     * .overflow-hidden\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .overflow-auto\\@lg\n     * .overflow-hidden\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .overflow-auto\\@lg-only\n     * .overflow-hidden\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .overflow-auto\\@xl\n     * .overflow-hidden\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .overflow-auto\\@xl-only\n     * .overflow-hidden\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .overflow-auto\\@xxl\n     * .overflow-hidden\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .overflow-auto\\@xxl-only\n     * .overflow-hidden\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"overflow-overflow\"\u003e\u003c/a\u003e`overflow()`\n\nHelper `overflow` entry point.  \nCombine both [`overflow-helper`](#overflow-helper) and [`overflow-helper-with-bp`](#overflow-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.overflow;\n// @include helpers.overflow(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `overflow-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`overflow-helper()`](#overflow-helper) and [`overflow-helper-with-bp()`](#overflow-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## position\n\n- [Variables](#position-variables)\n  - [`$positions`](#position-variables-positions)\n- [Mixins](#position-mixins)\n  - [`position-helper()`](#position-helper)\n  - [`position-helper-with-bp()`](#position-helper-with-bp)\n  - [`position()`](#position-position)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"position-variables\"\u003e\u003c/a\u003eVariables\n\nThis variable could be customized depending on what you need in your `variables.scss` file.  \nHere is the default value.\n\n#### \u003ca name=\"position-variables-positions\"\u003e\u003c/a\u003e`$positions`\nDefine all position values to support.\n\n```scss\n$positions: (\n    absolute,\n    fixed,\n    initial,\n    inherit,\n    relative,\n    static\n) !default;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"position-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"position-helper\"\u003e\u003c/a\u003e`position-helper()`\n\nSet all position classes from the [`$positions`](#position-variables-positions) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.position-helper;\n```\n\n##### Output\n```css\n.position-absolute {\n    position: absolute !important;\n}\n\n.position-fixed {\n    position: fixed !important;\n}\n\n.position-initial {\n    position: initial !important;\n}\n\n.position-inherit {\n    position: inherit !important;\n}\n\n.position-relative {\n    position: relative !important;\n}\n\n.position-static {\n    position: static !important;\n}\n\n.fixed-top,\n.fixed-bottom {\n    left: 0;\n    position: fixed;\n    right: 0;\n}\n.fixed-top {\n    top: 0;\n}\n.fixed-bottom {\n    bottom: 0;\n}\n```\n\n#### \u003ca name=\"position-helper-with-bp\"\u003e\u003c/a\u003e`position-helper-with-bp()`\n\nSet all position classes from the [`$positions`](#position-variables-positions) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.position-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .position-absolute\\@xs-only {\n        position: absolute !important;\n    }\n\n    .position-fixed\\@xs-only {\n        position: fixed !important;\n    }\n\n    .position-initial\\@xs-only {\n        position: initial !important;\n    }\n\n    .position-inherit\\@xs-only {\n        position: inherit !important;\n    }\n\n    .position-relative\\@xs-only {\n        position: relative !important;\n    }\n\n    .position-static\\@xs-only {\n        position: static !important;\n    }\n\n    .fixed-top\\@xs-only,\n    .fixed-bottom\\@xs-only {\n        left: 0;\n        position: fixed;\n        right: 0;\n    }\n    .fixed-top\\@xs-only {\n        top: 0;\n    }\n    .fixed-bottom\\@xs-only {\n        bottom: 0;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .position-absolute\\@sm\n     * .position-fixed\\@sm\n     * .position-initial\\@sm\n     * .position-inherit\\@sm\n     * .position-relative\\@sm\n     * .position-static\\@sm\n     * .fixed-top\\@sm\n     * .fixed-bottom\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .position-absolute\\@sm-only\n     * .position-fixed\\@sm-only\n     * .position-initial\\@sm-only\n     * .position-inherit\\@sm-only\n     * .position-relative\\@sm-only\n     * .position-static\\@sm-only\n     * .fixed-top\\@sm-only\n     * .fixed-bottom\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .position-absolute\\@md\n     * .position-fixed\\@md\n     * .position-initial\\@md\n     * .position-inherit\\@md\n     * .position-relative\\@md\n     * .position-static\\@md\n     * .fixed-top\\@md\n     * .fixed-bottom\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .position-absolute\\@md-only\n     * .position-fixed\\@md-only\n     * .position-initial\\@md-only\n     * .position-inherit\\@md-only\n     * .position-relative\\@md-only\n     * .position-static\\@md-only\n     * .fixed-top\\@md-only\n     * .fixed-bottom\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .position-absolute\\@lg\n     * .position-fixed\\@lg\n     * .position-initial\\@lg\n     * .position-inherit\\@lg\n     * .position-relative\\@lg\n     * .position-static\\@lg\n     * .fixed-top\\@lg\n     * .fixed-bottom\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .position-absolute\\@lg-only\n     * .position-fixed\\@lg-only\n     * .position-initial\\@lg-only\n     * .position-inherit\\@lg-only\n     * .position-relative\\@lg-only\n     * .position-static\\@lg-only\n     * .fixed-top\\@lg-only\n     * .fixed-bottom\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .position-absolute\\@xl\n     * .position-fixed\\@xl\n     * .position-initial\\@xl\n     * .position-inherit\\@xl\n     * .position-relative\\@xl\n     * .position-static\\@xl\n     * .fixed-top\\@xl\n     * .fixed-bottom\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .position-absolute\\@xl-only\n     * .position-fixed\\@xl-only\n     * .position-initial\\@xl-only\n     * .position-inherit\\@xl-only\n     * .position-relative\\@xl-only\n     * .position-static\\@xl-only\n     * .fixed-top\\@xl-only\n     * .fixed-bottom\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .position-absolute\\@xxl\n     * .position-fixed\\@xxl\n     * .position-initial\\@xxl\n     * .position-inherit\\@xxl\n     * .position-relative\\@xxl\n     * .position-static\\@xxl\n     * .fixed-top\\@xxl\n     * .fixed-bottom\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .position-absolute\\@xxl-only\n     * .position-fixed\\@xxl-only\n     * .position-initial\\@xxl-only\n     * .position-inherit\\@xxl-only\n     * .position-relative\\@xxl-only\n     * .position-static\\@xxl-only\n     * .fixed-top\\@xxl-only\n     * .fixed-bottom\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"position-position\"\u003e\u003c/a\u003e`position()`\n\nHelper `position` entry point.  \nCombine both [`position-helper`](#position-helper) and [`position-helper-with-bp`](#position-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.position;\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `position-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`position-helper()`](#position-helper) and [`position-helper-with-bp()`](#position-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## stretched-link\n\n- [Variables](#stretched-link-variables)\n  - [`$zindex-stretched`](#stretched-link-variables-zindex-stretched)\n- [Mixins](#stretched-link-mixins)\n  - [`stretched-link-helper()`](#stretched-link-helper)\n  - [`stretched-link-helper-with-bp()`](#stretched-link-helper-with-bp)\n  - [`stretched-link()`](#stretched-link-stretched-link)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"stretched-link-variables\"\u003e\u003c/a\u003eVariables\n\nThis variable could be customized depending on what you need in your `variables.scss` file.  \nHere is the default value.\n\n#### \u003ca name=\"stretched-link-variables-zindex-stretched\"\u003e\u003c/a\u003e`$zindex-stretched`\nDefine the z-index value for the link.\n\n```scss\n$zindex-stretched: 1 !default;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"stretched-link-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"stretched-link-helper\"\u003e\u003c/a\u003e`stretched-link-helper()`\n\nSet stretched-link classes.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.stretched-link-helper;\n```\n\n##### Output\n```css\n.stretched-link::after {\n    bottom: 0;\n    content: \"\";\n    left: 0;\n    pointer-events: auto;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n}\n\n.stretched-link-b::before {\n    bottom: 0;\n    content: \"\";\n    left: 0;\n    pointer-events: auto;\n    position: absolute;\n    right: 0;\n    top: 0;\n    z-index: 1;\n}\n```\n\n#### \u003ca name=\"stretched-link-helper-with-bp\"\u003e\u003c/a\u003e`stretched-link-helper-with-bp()`\n\nSet stretched-link classes with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.stretched-link-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .stretched-link\\@xs-only::after {\n        bottom: 0;\n        content: \"\";\n        left: 0;\n        pointer-events: auto;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: 1;\n    }\n\n    .stretched-link-b\\@xs-only::before {\n        bottom: 0;\n        content: \"\";\n        left: 0;\n        pointer-events: auto;\n        position: absolute;\n        right: 0;\n        top: 0;\n        z-index: 1;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .stretched-link\\@sm\n     * .stretched-link-b\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .stretched-link\\@sm-only\n     * .stretched-link-b\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .stretched-link\\@md\n     * .stretched-link-b\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .stretched-link\\@md-only\n     * .stretched-link-b\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .stretched-link\\@lg\n     * .stretched-link-b\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .stretched-link\\@lg-only\n     * .stretched-link-b\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .stretched-link\\@xl\n     * .stretched-link-b\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .stretched-link\\@xl-only\n     * .stretched-link-b\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .stretched-link\\@xxl\n     * .stretched-link-b\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .stretched-link\\@xxl-only\n     * .stretched-link-b\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"stretched-link-stretched-link\"\u003e\u003c/a\u003e`stretched-link()`\n\nHelper `stretched-link` entry point.  \nCombine both [`stretched-link-helper`](#stretched-link-helper) and [`stretched-link-helper-with-bp`](#stretched-link-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.stretched-link;\n// @include helpers.stretched-link(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use of `stretched-link-helper-with-bp()` | `false` | `true` |\n\n\n##### Output\nSee [`stretched-link-helper()`](#stretched-link-helper) and [`stretched-link-helper-with-bp()`](#stretched-link-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## text\n\n- [Variables](#text-variables)\n  - [`$text-aligns`](#text-variables-text-aligns)\n  - [`$text-transforms`](#text-variables-text-transforms)\n  - [`$text-important`](#text-variables-text-important)\n- [Mixins](#text-mixins)\n  - [`text-aligns-helper()`](#text-aligns-helper)\n  - [`text-transforms-helper()`](#text-transforms-helper)\n  - [`text-miscs-helper()`](#text-miscs-helper)\n  - [`text-helper-with-bp()`](#text-helper-with-bp)\n  - [`text()`](#text-text)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"text-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"text-variables-text-aligns\"\u003e\u003c/a\u003e`$text-aligns`\nDefine all text align values to support.\n\n```scss\n$text-aligns: (\n    center,\n    justify,\n    left,\n    right\n) !default;\n```\n\n#### \u003ca name=\"text-variables-text-transforms\"\u003e\u003c/a\u003e`$text-transforms`\nDefine all text transform values to support.\n\n```scss\n$text-transforms: (\n    capitalize,\n    lowercase,\n    uppercase\n) !default;\n```\n\n#### \u003ca name=\"text-variables-text-important\"\u003e\u003c/a\u003e`$text-important`\nSet the important property on each rules.\n\n```scss\n$text-important: true;\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"text-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"text-aligns-helper\"\u003e\u003c/a\u003e`text-aligns-helper()`\n\nSet all text-align classes from the [`$text-aligns`](#text-variables-text-aligns) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n/*\n * $text-aligns variable defined in `variables.scss`\n */\n$text-aligns: (\n    center,\n    justify,\n    left,\n    right\n) !default;\n/* */\n\n@include helpers.text-aligns-helper;\n```\n\n##### Output\n```css\n.text-center {\n    text-align: center !important;\n}\n\n.text-justify {\n    text-align: justify !important;\n}\n\n.text-left {\n    text-align: left !important;\n}\n\n.text-right {\n    text-align: right !important;\n}\n```\n\n#### \u003ca name=\"text-transforms-helper\"\u003e\u003c/a\u003e`text-transforms-helper()`\n\nSet all text-transform classes from the [`$text-transforms`](#text-variables-text-transforms) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n/*\n * $text-transforms variable defined in `variables.scss`\n */\n$text-transforms: (\n    capitalize,\n    lowercase,\n    uppercase\n) !default;\n/* */\n\n@include helpers.text-transforms-helper;\n```\n\n##### Output\n```css\n.text-capitalize {\n    text-transform: capitalize !important;\n}\n\n.text-lowercase {\n    text-transform: lowercase !important;\n}\n\n.text-uppercase {\n    text-transform: uppercase !important;\n}\n```\n\n#### \u003ca name=\"text-miscs-helper\"\u003e\u003c/a\u003e`text-miscs-helper()`\n\nSet text-miscs classes.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.text-miscs-helper;\n```\n\n##### Output\n```css\n.text-decoration-none {\n    text-decoration: none !important;\n}\n.text-break {\n    overflow-wrap: break-word !important;\n    word-break: break-word !important;\n}\n.text-truncate {\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.text-wrap {\n    white-space: normal !important;\n}\n.text-nowrap {\n    white-space: nowrap !important;\n}\n.text-reset {\n    color: inherit !important;\n}\n```\n\n#### \u003ca name=\"text-helper-with-bp\"\u003e\u003c/a\u003e`text-helper-with-bp()`\n\nCombine [`text-aligns-helper`](#text-aligns-helper), [`text-transforms-helper`](#text-transforms-helper) and [`text-miscs-helper`](#text-miscs-helper) helpers in one helper with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.text-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .text-center\\@xs-only {\n        text-align: center !important;\n    }\n\n    .text-justify\\@xs-only {\n        text-align: justify !important;\n    }\n\n    .text-left\\@xs-only {\n        text-align: left !important;\n    }\n\n    .text-right\\@xs-only {\n        text-align: right !important;\n    }\n\n    .text-capitalize\\@xs-only {\n        text-transform: capitalize !important;\n    }\n\n    .text-lowercase\\@xs-only {\n        text-transform: lowercase !important;\n    }\n\n    .text-uppercase\\@xs-only {\n        text-transform: uppercase !important;\n    }\n\n    .text-decoration-none\\@xs-only {\n        text-decoration: none !important;\n    }\n    .text-break\\@xs-only {\n        overflow-wrap: break-word !important;\n        word-break: break-word !important;\n    }\n    .text-truncate\\@xs-only {\n        max-width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n    .text-wrap\\@xs-only {\n        white-space: normal !important;\n    }\n    .text-nowrap\\@xs-only {\n        white-space: nowrap !important;\n    }\n    .text-reset\\@xs-only {\n        color: inherit !important;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .text-center\\@sm\n     * .text-justify\\@sm\n     * .text-left\\@sm\n     * .text-right\\@sm\n     * .text-capitalize\\@sm\n     * .text-lowercase\\@sm\n     * .text-uppercase\\@sm\n     * .text-decoration-none\\@sm\n     * .text-break\\@sm\n     * .text-truncate\\@sm\n     * .text-wrap\\@sm\n     * .text-nowrap\\@sm\n     * .text-reset\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .text-center\\@sm-only\n     * .text-justify\\@sm-only\n     * .text-left\\@sm-only\n     * .text-lerightft\\@sm-only\n     * .text-capitalize\\@sm-only\n     * .text-lowercase\\@sm-only\n     * .text-uppercase\\@sm-only\n     * .text-decoration-none\\@sm-only\n     * .text-break\\@sm-only\n     * .text-truncate\\@sm-only\n     * .text-wrap\\@sm-only\n     * .text-nowrap\\@sm-only\n     * .text-reset\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .text-center\\@md\n     * .text-justify\\@md\n     * .text-left\\@md\n     * .text-right\\@md\n     * .text-capitalize\\@md\n     * .text-lowercase\\@md\n     * .text-uppercase\\@md\n     * .text-decoration-none\\@md\n     * .text-break\\@md\n     * .text-truncate\\@md\n     * .text-wrap\\@md\n     * .text-nowrap\\@md\n     * .text-reset\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .text-center\\@md-only\n     * .text-justify\\@md-only\n     * .text-left\\@md-only\n     * .text-right\\@md-only\n     * .text-capitalize\\@md-only\n     * .text-lowercase\\@md-only\n     * .text-uppercase\\@md-only\n     * .text-decoration-none\\@md-only\n     * .text-break\\@md-only\n     * .text-truncate\\@md-only\n     * .text-wrap\\@md-only\n     * .text-nowrap\\@md-only\n     * .text-reset\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .text-center\\@lg\n     * .text-justify\\@lg\n     * .text-left\\@lg\n     * .text-right\\@lg\n     * .text-capitalize\\@lg\n     * .text-lowercase\\@lg\n     * .text-uppercase\\@lg\n     * .text-decoration-none\\@lg\n     * .text-break\\@lg\n     * .text-truncate\\@lg\n     * .text-wrap\\@lg\n     * .text-nowrap\\@lg\n     * .text-reset\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .text-center\\@lg-only\n     * .text-justify\\@lg-only\n     * .text-left\\@lg-only\n     * .text-right\\@lg-only\n     * .text-capitalize\\@lg-only\n     * .text-lowercase\\@lg-only\n     * .text-uppercase\\@lg-only\n     * .text-decoration-none\\@lg-only\n     * .text-break\\@lg-only\n     * .text-truncate\\@lg-only\n     * .text-wrap\\@lg-only\n     * .text-nowrap\\@lg-only\n     * .text-reset\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .text-center\\@xl\n     * .text-justify\\@xl\n     * .text-left\\@xl\n     * .text-right\\@xl\n     * .text-capitalize\\@xl\n     * .text-lowercase\\@xl\n     * .text-uppercase\\@xl\n     * .text-decoration-none\\@xl\n     * .text-break\\@xl\n     * .text-truncate\\@xl\n     * .text-wrap\\@xl\n     * .text-nowrap\\@xl\n     * .text-reset\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .text-center\\@xl-only\n     * .text-justify\\@xl-only\n     * .text-left\\@xl-only\n     * .text-right\\@xl-only\n     * .text-capitalize\\@xl-only\n     * .text-lowercase\\@xl-only\n     * .text-uppercase\\@xl-only\n     * .text-decoration-none\\@xl-only\n     * .text-break\\@xl-only\n     * .text-truncate\\@xl-only\n     * .text-wrap\\@xl-only\n     * .text-nowrap\\@xl-only\n     * .text-reset\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .text-center\\@xxl\n     * .text-justify\\@xxl\n     * .text-left\\@xxl\n     * .text-right\\@xxl\n     * .text-capitalize\\@xxl\n     * .text-lowercase\\@xxl\n     * .text-uppercase\\@xxl\n     * .text-decoration-none\\@xxl\n     * .text-break\\@xxl\n     * .text-truncate\\@xxl\n     * .text-wrap\\@xxl\n     * .text-nowrap\\@xxl\n     * .text-reset\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .text-center\\@xxl-only\n     * .text-justify\\@xxl-only\n     * .text-left\\@xxl-only\n     * .text-right\\@xxl-only\n     * .text-capitalize\\@xxl-only\n     * .text-lowercase\\@xxl-only\n     * .text-uppercase\\@xxl-only\n     * .text-decoration-none\\@xxl-only\n     * .text-break\\@xxl-only\n     * .text-truncate\\@xxl-only\n     * .text-wrap\\@xxl-only\n     * .text-nowrap\\@xxl-only\n     * .text-reset\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"text-text\"\u003e\u003c/a\u003e`text()`\n\nHelper `text` entry point.   \nCombine [`text-aligns-helper`](#text-aligns-helper), [`text-transforms-helper`](#text-transforms-helper), [`text-miscs-helper`](#text-miscs-helper) and [`text-helper-with-bp`](#text-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.text;\n// @include helpers.text(false);\n```\n\n##### Output\nSee [`text-aligns-helper()`](#text-aligns-helper), [`text-transforms-helper()`](#text-transforms-helper), [`text-miscs-helper()`](#text-miscs-helper) and [`text-helper-with-bp()`](#text-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## visibility\n\n- [Variables](#visibility-variables)\n  - [`$visibilities`](#visibility-variables-visibilities)\n  - [`$visibilities-important`](#visibility-variables-visibilities-important)\n  - [`$visibilities-prefix`](#visibility-variables-visibilities-prefix)\n- [Mixins](#visibility-mixins)\n  - [`visibility-helper()`](#visibility-helper)\n  - [`visibility-helper-with-bp()`](#visibility-helper-with-bp)\n  - [`visibility-print-helper()`](#visibility-print-helper)\n  - [`visibility-screen-helper()`](#visibility-screen-helper)\n  - [`visibility()`](#visibility-visibility)\n\n\u003cbr /\u003e\n\n### \u003ca name=\"visibility-variables\"\u003e\u003c/a\u003eVariables\n\nAll those variables could be customized depending on what you need in your `variables.scss` file.  \nHere are the default values.\n\n#### \u003ca name=\"visibility-variables-visibilities\"\u003e\u003c/a\u003e`$visibilities`\nDefine all visibility values to support.\n\n```scss\n$visibilities: (\n    visible,\n    hidden\n) !default;\n```\n\n#### \u003ca name=\"visibility-variables-visibilities-important\"\u003e\u003c/a\u003e`$visibilities-important`\nSet the important property on each rules.\n\n```scss\n$visibilities-important: true;\n```\n\n#### \u003ca name=\"visibility-variables-visibilities-prefix\"\u003e\u003c/a\u003e`$visibilities-prefix`\nDefine the prefix of all visibility classes.\n\n```scss\n$visibilities-prefix: 'v-';\n```\n\n\u003cbr /\u003e\n\n### \u003ca name=\"visibility-mixins\"\u003e\u003c/a\u003eMixins\n\n#### \u003ca name=\"visibility-helper\"\u003e\u003c/a\u003e`visibility-helper()`\n\nSet all visibility classes from the [`$visibilities`](#visibility-variables-visibilities) variable.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.visibility-helper;\n```\n\n##### Output\n```css\n.v-visible {\n    visibility: visible !important;\n}\n\n.v-hidden {\n    visibility: hidden !important;\n}\n```\n\n#### \u003ca name=\"visibility-helper-with-bp\"\u003e\u003c/a\u003e`visibility-helper-with-bp()`\n\nSet all visibility classes from the [`$visibilities`](#visibility-variables-visibilities) variable with breakpoints media queries.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.visibility-helper-with-bp;\n```\n\n##### Output\n```css\n@media (min-width: 20.375em) and (max-width: 35.99875em) {\n    .v-visible\\@xs-only {\n        visibility: visible !important;\n    }\n\n    .v-hidden\\@xs-only {\n        visibility: hidden !important;\n    }\n}\n/* and so on */\n@media (min-width: 36em) {\n    /*\n     * .v-visible\\@sm\n     * .v-hidden\\@sm\n     */\n}\n@media (min-width: 36em) and (max-width: 47.99875em) {\n    /*\n     * .v-visible\\@sm-only\n     * .v-hidden\\@sm-only\n     */\n}\n@media (min-width: 48em) {\n    /*\n     * .v-visible\\@md\n     * .v-hidden\\@md\n     */\n}\n@media (min-width: 48em) and (max-width: 63.99875em) {\n    /*\n     * .v-visible\\@md-only\n     * .v-hidden\\@md-only\n     */\n}\n@media (min-width: 64em) {\n    /*\n     * .v-visible\\@lg\n     * .v-hidden\\@lg\n     */\n}\n@media (min-width: 64em) and (max-width: 74.99875em) {\n    /*\n     * .v-visible\\@lg-only\n     * .v-hidden\\@lg-only\n     */\n}\n@media (min-width: 75em) {\n    /*\n     * .v-visible\\@xl\n     * .v-hidden\\@xl\n     */\n}\n@media (min-width: 75em) and (max-width: 99.99875em) {\n    /*\n     * .v-visible\\@xl-only\n     * .v-hidden\\@xl-only\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .v-visible\\@xxl\n     * .v-hidden\\@xxl\n     */\n}\n@media (min-width: 100em) {\n    /*\n     * .v-visible\\@xxl-only\n     * .v-hidden\\@xxl-only\n     */\n}\n```\n\n#### \u003ca name=\"visibility-print-helper\"\u003e\u003c/a\u003e`visibility-print-helper()`\n\nSet all visibility classes from the [`$visibilities`](#visibility-variables-visibilities) variable in print media query.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.visibility-print-helper;\n```\n\n##### Output\n```css\n@media print {\n    /*\n     * .v-visible\n     * .v-hidden\n     */\n}\n```\n\n#### \u003ca name=\"visibility-screen-helper\"\u003e\u003c/a\u003e`visibility-screen-helper()`\n\nSet all visibility classes from the [`$visibilities`](#visibility-variables-visibilities) variable in screen media query.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.visibility-screen-helper;\n```\n\n##### Output\n```css\n@media screen {\n    /*\n     * .v-visible\n     * .v-hidden\n     */\n}\n```\n\n#### \u003ca name=\"visibility-visibility\"\u003e\u003c/a\u003e`visibility()`\n\nHelper `visibility` entry point.  \nCombine both [`visibility-helper`](#visibility-helper) and [`visibility-helper-with-bp`](#visibility-helper-with-bp) helpers in one helper.\n\n```scss\n@use '@wide/styles-helpers' as helpers;\n\n@include helpers.visibility;\n// @include helpers.visibility(false);\n```\n\n##### Parameters\n| Type | Description | Mandatory | Default |\n|---|---|---|---|\n| `Boolean` | Use `visibility-helper-with-bp()` | `false` | `true` |\n\n##### Output\nSee [`visibility-helper`](#visibility-helper) and [`visibility-helper-with-bp`](#visibility-helper-with-bp) outputs.\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Authors\n\n- **Aymeric Assier** - [github.com/myeti](https://github.com/myeti)\n- **Julien Martins Da Costa** - [github.com/jdacosta](https://github.com/jdacosta)\n\n\u003cbr /\u003e\n\n### Contributors\n\n- **Sébastien Robillard** - [github.com/robiseb](https://github.com/robiseb)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## Resources \n- [Locomotive boilerplate](https://github.com/locomotivemtl/locomotive-boilerplate)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## License\n\nThis project is licensed under the MIT License - see the [licence](licence) file for details","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fstyles-helpers","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwide%2Fstyles-helpers","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwide%2Fstyles-helpers/lists"}