{"data":{"allPreview":{"edges":[{"node":{"id":"16844ed2-0e74-5ce6-88bc-69355062c08c","path":"src/docs/Components/Dividers/previews/advanced","codes":{"js":"","html":"
\n
\n Divider horizontal (default)\n
\n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at\n quisquam excepturi dolores deleniti aliquid porro et asperiores, quam\n sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?\n

\n
\n\n
\n Divider vertical\n
\n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at\n quisquam excepturi dolores deleniti aliquid porro et asperiores, quam\n sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?\n

\n
\n\n
\n Divider horizontal - Custom width\n
\n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at\n quisquam excepturi dolores deleniti aliquid porro et asperiores, quam\n sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?\n

\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n.example {\n @include set-font-face('regular');\n\n display: block;\n padding: $mu150;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__element {\n display: block;\n margin: 0 auto;\n min-height: $mu250;\n position: relative;\n\n &--default {\n @include set-divider('bottom', 'default', '100%');\n }\n\n &--custom-width {\n @include set-divider('bottom', 'light', '50%');\n }\n\n &--vertical {\n @include set-divider('right', 'dark', '100%');\n\n max-width: 50%;\n padding: 0 $mu100;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__element {\n display: block;\n margin: 0 auto;\n min-height: 2.5rem;\n position: relative;\n}\n.example__element--default::after {\n background: #6f676c;\n content: \"\";\n display: block;\n margin: 0 auto;\n height: 1px;\n width: 100%;\n}\n.example__element--custom-width::after {\n background: #bab6bc;\n content: \"\";\n display: block;\n margin: 0 auto;\n height: 1px;\n width: 50%;\n}\n.example__element--vertical {\n max-width: 50%;\n padding: 0 1rem;\n}\n.example__element--vertical::after {\n background: #000000;\n content: \"\";\n display: block;\n width: 1px;\n height: 100%;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n right: 0;\n}"}}},{"node":{"id":"86520529-12d7-5d83-bbc5-64cb0dcd3fc4","path":"src/docs/Foundations/Typography/Colors/previews/font-colors","codes":{"js":"","html":"
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n
\n Font color\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n$font-colors: get-token('color', 'font');\n\n.example {\n @include set-font-face('semi-bold');\n @include set-font-scale('10', 's');\n\n padding: $mu100;\n\n &__container {\n padding-bottom: $mu100;\n\n &--reverted {\n background-color: $color-grey-900;\n }\n }\n\n &__font-color {\n @each $key, $value in $font-colors {\n &-#{$key} {\n @include set-color($key);\n\n &::after {\n content: '#{$key}';\n }\n }\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 2.5625rem;\n line-height: 1.1707317073;\n padding: 1rem;\n}\n.example__container {\n padding-bottom: 1rem;\n}\n.example__container--reverted {\n background-color: #222020;\n}\n.example__font-color-primary-01 {\n color: #78be20;\n}\n.example__font-color-primary-01::after {\n content: \"primary-01\";\n}\n.example__font-color-primary-02 {\n color: #007574;\n}\n.example__font-color-primary-02::after {\n content: \"primary-02\";\n}\n.example__font-color-darkest {\n color: #000000;\n}\n.example__font-color-darkest::after {\n content: \"darkest\";\n}\n.example__font-color-darker {\n color: #222020;\n}\n.example__font-color-darker::after {\n content: \"darker\";\n}\n.example__font-color-dark {\n color: #3c3738;\n}\n.example__font-color-dark::after {\n content: \"dark\";\n}\n.example__font-color-light {\n color: #6f676c;\n}\n.example__font-color-light::after {\n content: \"light\";\n}\n.example__font-color-lightest {\n color: #ffffff;\n}\n.example__font-color-lightest::after {\n content: \"lightest\";\n}\n.example__font-color-info {\n color: #2282a8;\n}\n.example__font-color-info::after {\n content: \"info\";\n}\n.example__font-color-success {\n color: #41a017;\n}\n.example__font-color-success::after {\n content: \"success\";\n}\n.example__font-color-warning {\n color: #c86f21;\n}\n.example__font-color-warning::after {\n content: \"warning\";\n}\n.example__font-color-danger {\n color: #b42a27;\n}\n.example__font-color-danger::after {\n content: \"danger\";\n}"}}},{"node":{"id":"31171f0f-c501-5f35-b689-774d3404de7b","path":"src/docs/Foundations/Layout/Responsive/previews/responsive","codes":{"js":"","html":"
\n","scss":"@import 'settings-tools/all-settings';\n\n$example-colors: (\n s: yellow,\n m: orange,\n l: red,\n xl: purple,\n xxl: mediumseagreen\n);\n\n$border-screen-width: get-border('m');\n$all-border-width: $border-screen-width*2;\n\n.example {\n width: calc(100% - #{$all-border-width});\n height: $mu1000;\n\n &--blue-border {\n @include modify-from-screens($major-screens) {\n border: solid $border-screen-width blue;\n }\n }\n\n &::after {\n font-family: sans-serif;\n text-transform: uppercase;\n display: block;\n text-align: center;\n font-size: $mu200;\n line-height: 1;\n padding-top: $mu400;\n }\n\n @each $key, $value in $screens {\n @include set-from-screen($key) {\n background-color: map-get($example-colors, $key);\n\n &::after {\n content: '#{$key} > #{$value}';\n }\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.example {\n width: calc(100% - 4px);\n height: 10rem;\n}\n.example--blue-border {\n border: solid 2px blue;\n}\n@media screen and (min-width: 680px) {\n .example--blue-border\\@from-m {\n border: solid 2px blue;\n }\n}\n@media screen and (min-width: 1024px) {\n .example--blue-border\\@from-l {\n border: solid 2px blue;\n }\n}\n@media screen and (min-width: 1280px) {\n .example--blue-border\\@from-xl {\n border: solid 2px blue;\n }\n}\n@media screen and (min-width: 1920px) {\n .example--blue-border\\@from-xxl {\n border: solid 2px blue;\n }\n}\n.example::after {\n font-family: sans-serif;\n text-transform: uppercase;\n display: block;\n text-align: center;\n font-size: 2rem;\n line-height: 1;\n padding-top: 4rem;\n}\n@media screen and (min-width: 0px) {\n .example {\n background-color: yellow;\n }\n .example::after {\n content: \"s > 0px\";\n }\n}\n@media screen and (min-width: 320px) {\n .example::after {\n content: \"s-medium > 320px\";\n }\n}\n@media screen and (min-width: 360px) {\n .example::after {\n content: \"s-large > 360px\";\n }\n}\n@media screen and (min-width: 390px) {\n .example::after {\n content: \"s-xlarge > 390px\";\n }\n}\n@media screen and (min-width: 680px) {\n .example {\n background-color: orange;\n }\n .example::after {\n content: \"m > 680px\";\n }\n}\n@media screen and (min-width: 769px) {\n .example::after {\n content: \"m-medium > 769px\";\n }\n}\n@media screen and (min-width: 1024px) {\n .example {\n background-color: red;\n }\n .example::after {\n content: \"l > 1024px\";\n }\n}\n@media screen and (min-width: 1100px) {\n .example::after {\n content: \"l-medium > 1100px\";\n }\n}\n@media screen and (min-width: 1280px) {\n .example {\n background-color: purple;\n }\n .example::after {\n content: \"xl > 1280px\";\n }\n}\n@media screen and (min-width: 1440px) {\n .example::after {\n content: \"xl-medium > 1440px\";\n }\n}\n@media screen and (min-width: 1680px) {\n .example::after {\n content: \"xl-large > 1680px\";\n }\n}\n@media screen and (min-width: 1920px) {\n .example {\n background-color: mediumseagreen;\n }\n .example::after {\n content: \"xxl > 1920px\";\n }\n}"}}},{"node":{"id":"d7766ec6-3616-5a65-bb26-5f8900bd4927","path":"src/docs/Foundations/Spacing/MagicUnit/previews/magic-unit","codes":{"js":"","html":"
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n$magic-units-sizes: (\n 0.25,\n 0.5,\n 0.75,\n 1,\n 1.25,\n 1.5,\n 1.75,\n 2,\n 2.5,\n 3,\n 3.5,\n 4,\n 5,\n 6,\n 7,\n 8,\n 9,\n 10,\n 12,\n 14,\n 16,\n 18,\n 20\n);\n\nbody {\n color: #333;\n font-family: sans-serif;\n}\n\n.exemple {\n position: relative;\n overflow: visible;\n min-height: magic-unit-rem(20);\n min-width: magic-unit-rem(20);\n padding: magic-unit-rem(2) 0;\n\n $iterator: 100;\n\n &__item {\n overflow: visible;\n box-shadow: inset 0 0 0 1px red;\n position: absolute;\n bottom: magic-unit-rem(2);\n left: magic-unit-rem(2);\n background-color: transparent;\n\n &:hover {\n background-color: red;\n }\n\n &::before {\n display: block;\n content: '';\n }\n\n &::after {\n content: '';\n display: none;\n position: absolute;\n left: magic-unit-rem(22);\n width: magic-unit-rem(20);\n bottom: magic-unit-rem(8);\n padding: magic-unit-rem(1);\n background-color: rgba(255, 255, 255, 0.6);\n white-space: pre;\n line-height: 2;\n }\n\n @each $key in $magic-units-sizes {\n $iterator: $iterator - 1;\n\n &--#{$key*100} {\n z-index: $iterator;\n\n &::before {\n width: magic-unit-rem($key);\n height: magic-unit-rem($key);\n }\n\n &:hover::after {\n display: block;\n content: 'multiplier value: #{$key} \\A rem value: #{magic-unit-rem($key)}\\A px value: #{magic-unit($key) * $local-rem-value}px \\A unitless sass function: magic-unit(#{$key}) \\A rem sass function: magic-unit-rem(#{$key})';\n }\n }\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\nbody {\n color: #333;\n font-family: sans-serif;\n}\n\n.exemple {\n position: relative;\n overflow: visible;\n min-height: 20rem;\n min-width: 20rem;\n padding: 2rem 0;\n}\n.exemple__item {\n overflow: visible;\n -webkit-box-shadow: inset 0 0 0 1px red;\n box-shadow: inset 0 0 0 1px red;\n position: absolute;\n bottom: 2rem;\n left: 2rem;\n background-color: transparent;\n}\n.exemple__item:hover {\n background-color: red;\n}\n.exemple__item::before {\n display: block;\n content: \"\";\n}\n.exemple__item::after {\n content: \"\";\n display: none;\n position: absolute;\n left: 22rem;\n width: 20rem;\n bottom: 8rem;\n padding: 1rem;\n background-color: rgba(255, 255, 255, 0.6);\n white-space: pre;\n line-height: 2;\n}\n.exemple__item--25 {\n z-index: 99;\n}\n.exemple__item--25::before {\n width: 0.25rem;\n height: 0.25rem;\n}\n.exemple__item--25:hover::after {\n display: block;\n content: \"multiplier value: 0.25 \\arem value: 0.25rem\\apx value: 4px \\aunitless sass function: magic-unit(0.25) \\arem sass function: magic-unit-rem(0.25)\";\n}\n.exemple__item--50 {\n z-index: 98;\n}\n.exemple__item--50::before {\n width: 0.5rem;\n height: 0.5rem;\n}\n.exemple__item--50:hover::after {\n display: block;\n content: \"multiplier value: 0.5 \\arem value: 0.5rem\\apx value: 8px \\aunitless sass function: magic-unit(0.5) \\arem sass function: magic-unit-rem(0.5)\";\n}\n.exemple__item--75 {\n z-index: 97;\n}\n.exemple__item--75::before {\n width: 0.75rem;\n height: 0.75rem;\n}\n.exemple__item--75:hover::after {\n display: block;\n content: \"multiplier value: 0.75 \\arem value: 0.75rem\\apx value: 12px \\aunitless sass function: magic-unit(0.75) \\arem sass function: magic-unit-rem(0.75)\";\n}\n.exemple__item--100 {\n z-index: 96;\n}\n.exemple__item--100::before {\n width: 1rem;\n height: 1rem;\n}\n.exemple__item--100:hover::after {\n display: block;\n content: \"multiplier value: 1 \\arem value: 1rem\\apx value: 16px \\aunitless sass function: magic-unit(1) \\arem sass function: magic-unit-rem(1)\";\n}\n.exemple__item--125 {\n z-index: 95;\n}\n.exemple__item--125::before {\n width: 1.25rem;\n height: 1.25rem;\n}\n.exemple__item--125:hover::after {\n display: block;\n content: \"multiplier value: 1.25 \\arem value: 1.25rem\\apx value: 20px \\aunitless sass function: magic-unit(1.25) \\arem sass function: magic-unit-rem(1.25)\";\n}\n.exemple__item--150 {\n z-index: 94;\n}\n.exemple__item--150::before {\n width: 1.5rem;\n height: 1.5rem;\n}\n.exemple__item--150:hover::after {\n display: block;\n content: \"multiplier value: 1.5 \\arem value: 1.5rem\\apx value: 24px \\aunitless sass function: magic-unit(1.5) \\arem sass function: magic-unit-rem(1.5)\";\n}\n.exemple__item--175 {\n z-index: 93;\n}\n.exemple__item--175::before {\n width: 1.75rem;\n height: 1.75rem;\n}\n.exemple__item--175:hover::after {\n display: block;\n content: \"multiplier value: 1.75 \\arem value: 1.75rem\\apx value: 28px \\aunitless sass function: magic-unit(1.75) \\arem sass function: magic-unit-rem(1.75)\";\n}\n.exemple__item--200 {\n z-index: 92;\n}\n.exemple__item--200::before {\n width: 2rem;\n height: 2rem;\n}\n.exemple__item--200:hover::after {\n display: block;\n content: \"multiplier value: 2 \\arem value: 2rem\\apx value: 32px \\aunitless sass function: magic-unit(2) \\arem sass function: magic-unit-rem(2)\";\n}\n.exemple__item--250 {\n z-index: 91;\n}\n.exemple__item--250::before {\n width: 2.5rem;\n height: 2.5rem;\n}\n.exemple__item--250:hover::after {\n display: block;\n content: \"multiplier value: 2.5 \\arem value: 2.5rem\\apx value: 40px \\aunitless sass function: magic-unit(2.5) \\arem sass function: magic-unit-rem(2.5)\";\n}\n.exemple__item--300 {\n z-index: 90;\n}\n.exemple__item--300::before {\n width: 3rem;\n height: 3rem;\n}\n.exemple__item--300:hover::after {\n display: block;\n content: \"multiplier value: 3 \\arem value: 3rem\\apx value: 48px \\aunitless sass function: magic-unit(3) \\arem sass function: magic-unit-rem(3)\";\n}\n.exemple__item--350 {\n z-index: 89;\n}\n.exemple__item--350::before {\n width: 3.5rem;\n height: 3.5rem;\n}\n.exemple__item--350:hover::after {\n display: block;\n content: \"multiplier value: 3.5 \\arem value: 3.5rem\\apx value: 56px \\aunitless sass function: magic-unit(3.5) \\arem sass function: magic-unit-rem(3.5)\";\n}\n.exemple__item--400 {\n z-index: 88;\n}\n.exemple__item--400::before {\n width: 4rem;\n height: 4rem;\n}\n.exemple__item--400:hover::after {\n display: block;\n content: \"multiplier value: 4 \\arem value: 4rem\\apx value: 64px \\aunitless sass function: magic-unit(4) \\arem sass function: magic-unit-rem(4)\";\n}\n.exemple__item--500 {\n z-index: 87;\n}\n.exemple__item--500::before {\n width: 5rem;\n height: 5rem;\n}\n.exemple__item--500:hover::after {\n display: block;\n content: \"multiplier value: 5 \\arem value: 5rem\\apx value: 80px \\aunitless sass function: magic-unit(5) \\arem sass function: magic-unit-rem(5)\";\n}\n.exemple__item--600 {\n z-index: 86;\n}\n.exemple__item--600::before {\n width: 6rem;\n height: 6rem;\n}\n.exemple__item--600:hover::after {\n display: block;\n content: \"multiplier value: 6 \\arem value: 6rem\\apx value: 96px \\aunitless sass function: magic-unit(6) \\arem sass function: magic-unit-rem(6)\";\n}\n.exemple__item--700 {\n z-index: 85;\n}\n.exemple__item--700::before {\n width: 7rem;\n height: 7rem;\n}\n.exemple__item--700:hover::after {\n display: block;\n content: \"multiplier value: 7 \\arem value: 7rem\\apx value: 112px \\aunitless sass function: magic-unit(7) \\arem sass function: magic-unit-rem(7)\";\n}\n.exemple__item--800 {\n z-index: 84;\n}\n.exemple__item--800::before {\n width: 8rem;\n height: 8rem;\n}\n.exemple__item--800:hover::after {\n display: block;\n content: \"multiplier value: 8 \\arem value: 8rem\\apx value: 128px \\aunitless sass function: magic-unit(8) \\arem sass function: magic-unit-rem(8)\";\n}\n.exemple__item--900 {\n z-index: 83;\n}\n.exemple__item--900::before {\n width: 9rem;\n height: 9rem;\n}\n.exemple__item--900:hover::after {\n display: block;\n content: \"multiplier value: 9 \\arem value: 9rem\\apx value: 144px \\aunitless sass function: magic-unit(9) \\arem sass function: magic-unit-rem(9)\";\n}\n.exemple__item--1000 {\n z-index: 82;\n}\n.exemple__item--1000::before {\n width: 10rem;\n height: 10rem;\n}\n.exemple__item--1000:hover::after {\n display: block;\n content: \"multiplier value: 10 \\arem value: 10rem\\apx value: 160px \\aunitless sass function: magic-unit(10) \\arem sass function: magic-unit-rem(10)\";\n}\n.exemple__item--1200 {\n z-index: 81;\n}\n.exemple__item--1200::before {\n width: 12rem;\n height: 12rem;\n}\n.exemple__item--1200:hover::after {\n display: block;\n content: \"multiplier value: 12 \\arem value: 12rem\\apx value: 192px \\aunitless sass function: magic-unit(12) \\arem sass function: magic-unit-rem(12)\";\n}\n.exemple__item--1400 {\n z-index: 80;\n}\n.exemple__item--1400::before {\n width: 14rem;\n height: 14rem;\n}\n.exemple__item--1400:hover::after {\n display: block;\n content: \"multiplier value: 14 \\arem value: 14rem\\apx value: 224px \\aunitless sass function: magic-unit(14) \\arem sass function: magic-unit-rem(14)\";\n}\n.exemple__item--1600 {\n z-index: 79;\n}\n.exemple__item--1600::before {\n width: 16rem;\n height: 16rem;\n}\n.exemple__item--1600:hover::after {\n display: block;\n content: \"multiplier value: 16 \\arem value: 16rem\\apx value: 256px \\aunitless sass function: magic-unit(16) \\arem sass function: magic-unit-rem(16)\";\n}\n.exemple__item--1800 {\n z-index: 78;\n}\n.exemple__item--1800::before {\n width: 18rem;\n height: 18rem;\n}\n.exemple__item--1800:hover::after {\n display: block;\n content: \"multiplier value: 18 \\arem value: 18rem\\apx value: 288px \\aunitless sass function: magic-unit(18) \\arem sass function: magic-unit-rem(18)\";\n}\n.exemple__item--2000 {\n z-index: 77;\n}\n.exemple__item--2000::before {\n width: 20rem;\n height: 20rem;\n}\n.exemple__item--2000:hover::after {\n display: block;\n content: \"multiplier value: 20 \\arem value: 20rem\\apx value: 320px \\aunitless sass function: magic-unit(20) \\arem sass function: magic-unit-rem(20)\";\n}"}}},{"node":{"id":"9fa8b645-ca81-525f-8921-6dd8064a65de","path":"src/docs/Foundations/Utilities/Images/previews/ratio-with-mixin","codes":{"js":"","html":"
\n
\n \n
\n
\n","scss":"@import \"settings-tools/_all-settings\";\n\n.example {\n display: block;\n padding: $mu150;\n}\n\n.example-element {\n @include set-ratio(\"16x9\");\n\n margin: 0 auto;\n max-width: 800px;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.example {\n display: block;\n padding: 1.5rem;\n}\n\n.example-element {\n position: relative;\n margin: 0 auto;\n max-width: 800px;\n}\n.example-element::before {\n content: \"\";\n display: block;\n width: 100%;\n padding-top: 56.25%;\n}\n.example-element > * {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}"}}},{"node":{"id":"729152f8-d7c3-573b-a9c1-27133e9d9580","path":"src/docs/Foundations/Typography/FontFamilies/previews/font-families","codes":{"js":"","html":"
\n
\n LeroyMerlin light\n
\n
\n LeroyMerlin light italic\n
\n
\n LeroyMerlin regular\n
\n
\n LeroyMerlin regular italic\n
\n
\n LeroyMerlin semi-bold\n
\n
\n LeroyMerlin semi-bold italic\n
\n
\n","scss":"// setup a local config to tell Mozaic where are your fonts:\n$local-config: (\n font-path: '/fonts',\n);\n\n@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n.example {\n padding: $mu100;\n\n &__font-face {\n @include set-font-scale('11');\n\n padding: $mu100 0;\n margin-bottom: -1px; // compensate for the border width\n border-bottom: 1px solid rgba($color-secondary-red-500, 0.5);\n\n &:first-child {\n margin-top: -1px; // compensate for the border width\n border-top: 1px solid rgba($color-secondary-red-500, 0.5);\n }\n\n @each $key, $value in $font-weights {\n &--#{$key} {\n @include set-font-face($key);\n }\n\n &--#{$key}-italic {\n @include set-font-face($key, 'italic');\n }\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.example {\n padding: 1rem;\n}\n.example__font-face {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n padding: 1rem 0;\n margin-bottom: -1px;\n border-bottom: 1px solid rgba(223, 56, 43, 0.5);\n}\n.example__font-face:first-child {\n margin-top: -1px;\n border-top: 1px solid rgba(223, 56, 43, 0.5);\n}\n.example__font-face--light {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 300;\n}\n.example__font-face--light-italic {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 300;\n font-style: italic;\n}\n.example__font-face--regular {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.example__font-face--regular-italic {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-style: italic;\n}\n.example__font-face--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.example__font-face--semi-bold-italic {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-style: italic;\n}"}}},{"node":{"id":"f7d2e164-de1b-524b-b6b4-d601f45e0483","path":"src/docs/Foundations/Typography/ScaleAndSizes/previews/font-line-heights","codes":{"js":"","html":"
\n
\n
\n line-height xs\n
\n
\n line-height xs  \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, nobis\n ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo ducimus dolor\n qui laborum voluptate.\n
\n
\n
\n
\n line-height s\n
\n
\n line-height s  \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, nobis\n ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo ducimus dolor\n qui laborum voluptate.\n
\n
\n
\n
\n line-height m\n
\n
\n line-height m  \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam, nobis\n ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo ducimus dolor\n qui laborum voluptate.\n
\n
\n
\n
\n line-height l\n
\n
\n line-height l    Lorem ipsum dolor sit amet consectetur adipisicing elit.\n Magnam, nobis ipsam illum nesciunt, quibusdam modi fugit eaque enim nemo\n ducimus dolor qui laborum voluptate.\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n$lines-heights: ('xs', 's', 'm', 'l');\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n padding: $mu100;\n\n @include set-font-face('regular');\n\n &__container {\n min-height: $mu700;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n }\n\n &__title-lh {\n flex: 0 0 48%;\n box-shadow:\n 0 1px 0 0 rgba($color-secondary-red-500, 0.5),\n 0 -1px 0 0 rgba($color-secondary-red-500, 0.5);\n\n @each $key in $lines-heights {\n &--#{$key} {\n @include set-font-scale('10', $key);\n }\n }\n }\n\n &__paragraph-lh {\n flex: 0 0 48%;\n color: $color-grey-700;\n box-shadow:\n 0 1px 0 0 rgba($color-secondary-red-500, 0.5),\n 0 -1px 0 0 rgba($color-secondary-red-500, 0.5);\n\n @each $key in $lines-heights {\n &--#{$key} {\n @include set-font-scale('05', $key);\n }\n }\n }\n\n &__paragraph-lh-name {\n font-weight: 600;\n color: $color-grey-999;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n padding: 1rem;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.example__container {\n min-height: 7rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.example__title-lh {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 48%;\n flex: 0 0 48%;\n -webkit-box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5), 0 -1px 0 0 rgba(223, 56, 43, 0.5);\n box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5), 0 -1px 0 0 rgba(223, 56, 43, 0.5);\n}\n.example__title-lh--xs {\n font-size: 2.5625rem;\n line-height: 0.9756097561;\n}\n.example__title-lh--s {\n font-size: 2.5625rem;\n line-height: 1.1707317073;\n}\n.example__title-lh--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n}\n.example__title-lh--l {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n}\n.example__paragraph-lh {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 48%;\n flex: 0 0 48%;\n color: #554f52;\n -webkit-box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5), 0 -1px 0 0 rgba(223, 56, 43, 0.5);\n box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5), 0 -1px 0 0 rgba(223, 56, 43, 0.5);\n}\n.example__paragraph-lh--xs {\n font-size: 1rem;\n line-height: 1;\n}\n.example__paragraph-lh--s {\n font-size: 1rem;\n line-height: 1.125;\n}\n.example__paragraph-lh--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.example__paragraph-lh--l {\n font-size: 1rem;\n line-height: 1.5;\n}\n.example__paragraph-lh-name {\n font-weight: 600;\n color: #000000;\n}"}}},{"node":{"id":"803eda64-a7ba-5f13-840b-08180520f0bb","path":"src/docs/Foundations/Typography/ScaleAndSizes/previews/font-scale","codes":{"js":"","html":"
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
Lorem ipsum
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n$font-sizes: get-token(size, font);\n\n.example {\n padding: $mu300;\n\n &__item {\n @include set-font-face('regular');\n\n box-shadow: 0 1px 0 0 rgba($color-secondary-red-500, 0.5);\n\n &:first-child() {\n box-shadow:\n 0 1px 0 0 rgba($color-secondary-red-500, 0.5),\n 0 -1px 0 0 rgba($color-secondary-red-500, 0.5);\n }\n\n @each $size, $value in $font-sizes {\n &--#{$size} {\n @include set-font-scale($size);\n\n &::before {\n content: '#{$size}';\n text-align: center;\n display: inline-block;\n width: $mu400;\n padding: 0 $mu100;\n margin-right: $mu100;\n background: rgba($color-grey-100, 0.5);\n }\n }\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.example {\n padding: 3rem;\n}\n.example__item {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5);\n box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5);\n}\n.example__item:first-child() {\n -webkit-box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5), 0 -1px 0 0 rgba(223, 56, 43, 0.5);\n box-shadow: 0 1px 0 0 rgba(223, 56, 43, 0.5), 0 -1px 0 0 rgba(223, 56, 43, 0.5);\n}\n.example__item--10 {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n}\n.example__item--10::before {\n content: \"10\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--11 {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n}\n.example__item--11::before {\n content: \"11\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--12 {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n}\n.example__item--12::before {\n content: \"12\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--01 {\n font-size: 0.6815rem;\n line-height: 1.4673514307;\n}\n.example__item--01::before {\n content: \"01\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--02 {\n font-size: 0.75rem;\n line-height: 1.5;\n}\n.example__item--02::before {\n content: \"02\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--03 {\n font-size: 0.8125rem;\n line-height: 1.5384615385;\n}\n.example__item--03::before {\n content: \"03\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--04 {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.example__item--04::before {\n content: \"04\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--05 {\n font-size: 1rem;\n line-height: 1.5;\n}\n.example__item--05::before {\n content: \"05\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--06 {\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.example__item--06::before {\n content: \"06\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--07 {\n font-size: 1.4375rem;\n line-height: 1.5652173913;\n}\n.example__item--07::before {\n content: \"07\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--08 {\n font-size: 1.75rem;\n line-height: 1.5714285714;\n}\n.example__item--08::before {\n content: \"08\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}\n.example__item--09 {\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.example__item--09::before {\n content: \"09\";\n text-align: center;\n display: inline-block;\n width: 4rem;\n padding: 0 1rem;\n margin-right: 1rem;\n background: rgba(238, 238, 240, 0.5);\n}"}}},{"node":{"id":"53425bc7-4bf8-595d-a899-3a0f66722d19","path":"src/docs/Components/Dividers/previews/default","codes":{"js":"","html":"
\n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at\n quisquam excepturi dolores deleniti aliquid porro et asperiores, quam\n sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?\n

\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.divider';\n\n.example {\n @include set-font-face('regular');\n\n display: block;\n padding: $mu150;\n\n &__element {\n display: block;\n margin: 0 auto;\n min-height: $mu250;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-divider {\n position: relative;\n}\n.mc-divider-top {\n border-top: 1px solid #6f676c;\n}\n.mc-divider-top--lightest {\n border-top-color: #ffffff;\n}\n.mc-divider-top--light {\n border-top-color: #bab6bc;\n}\n.mc-divider-top--dark {\n border-top-color: #000000;\n}\n.mc-divider-right {\n border-right: 1px solid #6f676c;\n}\n.mc-divider-right--lightest {\n border-right-color: #ffffff;\n}\n.mc-divider-right--light {\n border-right-color: #bab6bc;\n}\n.mc-divider-right--dark {\n border-right-color: #000000;\n}\n.mc-divider-bottom {\n border-bottom: 1px solid #6f676c;\n}\n.mc-divider-bottom--lightest {\n border-bottom-color: #ffffff;\n}\n.mc-divider-bottom--light {\n border-bottom-color: #bab6bc;\n}\n.mc-divider-bottom--dark {\n border-bottom-color: #000000;\n}\n.mc-divider-left {\n border-left: 1px solid #6f676c;\n}\n.mc-divider-left--lightest {\n border-left-color: #ffffff;\n}\n.mc-divider-left--light {\n border-left-color: #bab6bc;\n}\n.mc-divider-left--dark {\n border-left-color: #000000;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}\n.example__element {\n display: block;\n margin: 0 auto;\n min-height: 2.5rem;\n}"}}},{"node":{"id":"a17e7d2b-98ca-5441-b8db-719a64247975","path":"src/docs/Components/Dividers/previews/divider-dark","codes":{"js":"","html":"
\n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at\n quisquam excepturi dolores deleniti aliquid porro et asperiores, quam\n sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?\n

\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.divider';\n\n.example {\n @include set-font-face('regular');\n\n display: block;\n padding: $mu150;\n\n &__element {\n @include set-divider('bottom', 'dark', '100%');\n\n display: block;\n margin: 0 auto;\n min-height: $mu250;\n position: relative;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-divider {\n position: relative;\n}\n.mc-divider-top {\n border-top: 1px solid #6f676c;\n}\n.mc-divider-top--lightest {\n border-top-color: #ffffff;\n}\n.mc-divider-top--light {\n border-top-color: #bab6bc;\n}\n.mc-divider-top--dark {\n border-top-color: #000000;\n}\n.mc-divider-right {\n border-right: 1px solid #6f676c;\n}\n.mc-divider-right--lightest {\n border-right-color: #ffffff;\n}\n.mc-divider-right--light {\n border-right-color: #bab6bc;\n}\n.mc-divider-right--dark {\n border-right-color: #000000;\n}\n.mc-divider-bottom {\n border-bottom: 1px solid #6f676c;\n}\n.mc-divider-bottom--lightest {\n border-bottom-color: #ffffff;\n}\n.mc-divider-bottom--light {\n border-bottom-color: #bab6bc;\n}\n.mc-divider-bottom--dark {\n border-bottom-color: #000000;\n}\n.mc-divider-left {\n border-left: 1px solid #6f676c;\n}\n.mc-divider-left--lightest {\n border-left-color: #ffffff;\n}\n.mc-divider-left--light {\n border-left-color: #bab6bc;\n}\n.mc-divider-left--dark {\n border-left-color: #000000;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}\n.example__element {\n display: block;\n margin: 0 auto;\n min-height: 2.5rem;\n position: relative;\n}\n.example__element::after {\n background: #000000;\n content: \"\";\n display: block;\n margin: 0 auto;\n height: 1px;\n width: 100%;\n}"}}},{"node":{"id":"f7c90649-81d5-5dfd-b3b6-0477bab93619","path":"src/docs/Components/Dividers/previews/divider-light","codes":{"js":"","html":"
\n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at\n quisquam excepturi dolores deleniti aliquid porro et asperiores, quam\n sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?\n

\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.divider';\n\n.example {\n @include set-font-face('regular');\n\n display: block;\n padding: $mu150;\n\n &__element {\n @include set-divider('bottom', 'light', '100%');\n\n display: block;\n margin: 0 auto;\n min-height: $mu250;\n position: relative;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-divider {\n position: relative;\n}\n.mc-divider-top {\n border-top: 1px solid #6f676c;\n}\n.mc-divider-top--lightest {\n border-top-color: #ffffff;\n}\n.mc-divider-top--light {\n border-top-color: #bab6bc;\n}\n.mc-divider-top--dark {\n border-top-color: #000000;\n}\n.mc-divider-right {\n border-right: 1px solid #6f676c;\n}\n.mc-divider-right--lightest {\n border-right-color: #ffffff;\n}\n.mc-divider-right--light {\n border-right-color: #bab6bc;\n}\n.mc-divider-right--dark {\n border-right-color: #000000;\n}\n.mc-divider-bottom {\n border-bottom: 1px solid #6f676c;\n}\n.mc-divider-bottom--lightest {\n border-bottom-color: #ffffff;\n}\n.mc-divider-bottom--light {\n border-bottom-color: #bab6bc;\n}\n.mc-divider-bottom--dark {\n border-bottom-color: #000000;\n}\n.mc-divider-left {\n border-left: 1px solid #6f676c;\n}\n.mc-divider-left--lightest {\n border-left-color: #ffffff;\n}\n.mc-divider-left--light {\n border-left-color: #bab6bc;\n}\n.mc-divider-left--dark {\n border-left-color: #000000;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}\n.example__element {\n display: block;\n margin: 0 auto;\n min-height: 2.5rem;\n position: relative;\n}\n.example__element::after {\n background: #bab6bc;\n content: \"\";\n display: block;\n margin: 0 auto;\n height: 1px;\n width: 100%;\n}"}}},{"node":{"id":"432084fd-2a1f-5464-9295-026c6ae761d2","path":"src/docs/Components/Dividers/previews/divider-lightest","codes":{"js":"","html":"
\n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. In recusandae at\n quisquam excepturi dolores deleniti aliquid porro et asperiores, quam\n sequi provident quibusdam nesciunt fugit, a amet commodi, maxime unde?\n

\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.divider';\n\n.example {\n @include set-font-face('regular');\n\n background: $color-grey-900;\n color: $color-grey-000;\n display: block;\n padding: $mu150;\n\n &__element {\n @include set-divider('bottom', 'lightest', '100%');\n\n display: block;\n margin: 0 auto;\n min-height: $mu250;\n position: relative;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-divider {\n position: relative;\n}\n.mc-divider-top {\n border-top: 1px solid #6f676c;\n}\n.mc-divider-top--lightest {\n border-top-color: #ffffff;\n}\n.mc-divider-top--light {\n border-top-color: #bab6bc;\n}\n.mc-divider-top--dark {\n border-top-color: #000000;\n}\n.mc-divider-right {\n border-right: 1px solid #6f676c;\n}\n.mc-divider-right--lightest {\n border-right-color: #ffffff;\n}\n.mc-divider-right--light {\n border-right-color: #bab6bc;\n}\n.mc-divider-right--dark {\n border-right-color: #000000;\n}\n.mc-divider-bottom {\n border-bottom: 1px solid #6f676c;\n}\n.mc-divider-bottom--lightest {\n border-bottom-color: #ffffff;\n}\n.mc-divider-bottom--light {\n border-bottom-color: #bab6bc;\n}\n.mc-divider-bottom--dark {\n border-bottom-color: #000000;\n}\n.mc-divider-left {\n border-left: 1px solid #6f676c;\n}\n.mc-divider-left--lightest {\n border-left-color: #ffffff;\n}\n.mc-divider-left--light {\n border-left-color: #bab6bc;\n}\n.mc-divider-left--dark {\n border-left-color: #000000;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background: #222020;\n color: #ffffff;\n display: block;\n padding: 1.5rem;\n}\n.example__element {\n display: block;\n margin: 0 auto;\n min-height: 2.5rem;\n position: relative;\n}\n.example__element::after {\n background: #ffffff;\n content: \"\";\n display: block;\n margin: 0 auto;\n height: 1px;\n width: 100%;\n}"}}},{"node":{"id":"0c1453c1-d5a7-5e60-87e1-88871dba3574","path":"src/docs/Components/Dividers/previews/all-variations","codes":{"js":"","html":"
\n
\n Divider horizontal bottom\n
\n\n
\n
\n
\n

Divider Horizontal Bottom default

\n
\n
\n
\n
\n

Divider Horizontal Bottom dark

\n
\n
\n
\n
\n

Divider Horizontal Bottom light

\n
\n
\n
\n \n

Divider Horizontal Bottom lightest

\n
\n
\n
\n\n
\n Divider Horizontal Top\n
\n\n
\n
\n
\n

Divider Horizontal Top default

\n
\n
\n
\n
\n

Divider Horizontal Top dark

\n
\n
\n
\n
\n

Divider Horizontal Top light

\n
\n
\n
\n
\n

Divider Horizontal Top lightest

\n
\n
\n
\n\n
\n Divider Vertical Right\n
\n\n
\n
\n
\n

Divider Vertical Right default

\n
\n
\n
\n
\n

Divider Vertical Right dark

\n
\n
\n
\n
\n

Divider Vertical Right light

\n
\n
\n
\n
\n

Divider Vertical Right lightest

\n
\n
\n
\n\n
\n Divider Vertical Left\n
\n\n
\n
\n
\n

Divider Vertical Left default

\n
\n
\n
\n
\n

Divider Vertical Left dark

\n
\n
\n
\n
\n

Divider Vertical Left light

\n
\n
\n
\n
\n

Divider Vertical Left lightest

\n
\n
\n
\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.divider';\n\n.example {\n @include set-font-face('regular');\n\n text-align: center;\n margin: auto;\n width: 90%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n display: flex;\n justify-content: center;\n }\n\n &__col {\n flex: 0 1 33%;\n box-sizing: border-box;\n padding: $mu100;\n\n &--lightest {\n background: $color-grey-900;\n color: $color-grey-000;\n }\n }\n\n &__element {\n min-height: $mu250;\n\n strong {\n display: block;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-divider {\n position: relative;\n}\n.mc-divider-top {\n border-top: 1px solid #6f676c;\n}\n.mc-divider-top--lightest {\n border-top-color: #ffffff;\n}\n.mc-divider-top--light {\n border-top-color: #bab6bc;\n}\n.mc-divider-top--dark {\n border-top-color: #000000;\n}\n.mc-divider-right {\n border-right: 1px solid #6f676c;\n}\n.mc-divider-right--lightest {\n border-right-color: #ffffff;\n}\n.mc-divider-right--light {\n border-right-color: #bab6bc;\n}\n.mc-divider-right--dark {\n border-right-color: #000000;\n}\n.mc-divider-bottom {\n border-bottom: 1px solid #6f676c;\n}\n.mc-divider-bottom--lightest {\n border-bottom-color: #ffffff;\n}\n.mc-divider-bottom--light {\n border-bottom-color: #bab6bc;\n}\n.mc-divider-bottom--dark {\n border-bottom-color: #000000;\n}\n.mc-divider-left {\n border-left: 1px solid #6f676c;\n}\n.mc-divider-left--lightest {\n border-left-color: #ffffff;\n}\n.mc-divider-left--light {\n border-left-color: #bab6bc;\n}\n.mc-divider-left--dark {\n border-left-color: #000000;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n text-align: center;\n margin: auto;\n width: 90%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.example__col {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 33%;\n flex: 0 1 33%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 1rem;\n}\n.example__col--lightest {\n background: #222020;\n color: #ffffff;\n}\n.example__element {\n min-height: 2.5rem;\n}\n.example__element strong {\n display: block;\n}"}}},{"node":{"id":"159aa5b0-14bb-5297-a122-ba53c158b414","path":"src/docs/Components/Flags/previews/flag-default","codes":{"js":"","html":"
\r\n
\r\n Flag label\r\n
\r\n
\r\n","scss":"@import 'settings-tools/_all-settings';\r\n\r\n@include import-font-families();\r\n\r\n@import 'components/_c.flag';\r\n\r\n.example {\r\n margin: $mu100 auto;\r\n padding: 0 $mu150;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-flag {\n border: 1px solid transparent;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 0.5rem;\n margin: 0;\n vertical-align: middle;\n min-height: 1.375rem;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 0.875rem;\n line-height: 1.1428571429;\n color: #ffffff;\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-flag--solid-primary-02 {\n color: #ffffff;\n border-color: #035f64;\n background-color: #035f64;\n}\n.mc-flag--solid-dark {\n color: #ffffff;\n border-color: #000000;\n background-color: #000000;\n}\n.mc-flag--solid-light {\n color: #000000;\n border-color: #ffffff;\n background-color: #ffffff;\n}\n.mc-flag--solid-danger {\n color: #ffffff;\n border-color: #df382b;\n background-color: #df382b;\n}\n.mc-flag--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-flag--bordered-primary-02 {\n color: #035f64;\n border-color: #035f64;\n background-color: #ffffff;\n}\n.mc-flag--bordered-dark {\n color: #000000;\n border-color: #000000;\n background-color: #ffffff;\n}\n.mc-flag--bordered-light {\n color: #ffffff;\n border-color: #ffffff;\n background-color: #000000;\n}\n.mc-flag--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-flag--extend {\n -ms-flex-negative: 1;\n flex-shrink: 1;\n height: auto;\n}\n.example {\n margin: 1rem auto;\n padding: 0 1.5rem;\n}"}}},{"node":{"id":"a37105b3-2838-52d5-afad-035800af8051","path":"src/docs/Components/Flags/previews/flag-bordered","codes":{"js":"","html":"
\r\n
\r\n
\r\n Flag bordered\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag bordered primary 02\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag bordered dark\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag bordered light\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag bordered danger\r\n
\r\n
\r\n
\r\n","scss":"@import 'settings-tools/_all-settings';\r\n\r\n@include import-font-families();\r\n\r\n@import 'components/_c.flag';\r\n\r\n.example {\r\n align-items: flex-start;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n\r\n &__item {\r\n margin: $mu100;\r\n\r\n &--light {\r\n background: $color-grey-999;\r\n padding: $mu100;\r\n }\r\n }\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-flag {\n border: 1px solid transparent;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 0.5rem;\n margin: 0;\n vertical-align: middle;\n min-height: 1.375rem;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 0.875rem;\n line-height: 1.1428571429;\n color: #ffffff;\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-flag--solid-primary-02 {\n color: #ffffff;\n border-color: #035f64;\n background-color: #035f64;\n}\n.mc-flag--solid-dark {\n color: #ffffff;\n border-color: #000000;\n background-color: #000000;\n}\n.mc-flag--solid-light {\n color: #000000;\n border-color: #ffffff;\n background-color: #ffffff;\n}\n.mc-flag--solid-danger {\n color: #ffffff;\n border-color: #df382b;\n background-color: #df382b;\n}\n.mc-flag--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-flag--bordered-primary-02 {\n color: #035f64;\n border-color: #035f64;\n background-color: #ffffff;\n}\n.mc-flag--bordered-dark {\n color: #000000;\n border-color: #000000;\n background-color: #ffffff;\n}\n.mc-flag--bordered-light {\n color: #ffffff;\n border-color: #ffffff;\n background-color: #000000;\n}\n.mc-flag--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-flag--extend {\n -ms-flex-negative: 1;\n flex-shrink: 1;\n height: auto;\n}\n.example {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.example__item {\n margin: 1rem;\n}\n.example__item--light {\n background: #000000;\n padding: 1rem;\n}"}}},{"node":{"id":"52eb32a0-fa13-5c11-9f67-710082e66108","path":"src/docs/Components/Flags/previews/flag-solid","codes":{"js":"","html":"
\r\n
\r\n
\r\n Flag solid\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid primary 02\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid dark\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid light\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid danger\r\n
\r\n
\r\n
\r\n","scss":"@import 'settings-tools/_all-settings';\r\n\r\n@include import-font-families();\r\n\r\n@import 'components/_c.flag';\r\n\r\n.example {\r\n align-items: flex-start;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n\r\n &__item {\r\n margin: $mu100;\r\n\r\n &--light {\r\n background: $color-grey-999;\r\n padding: $mu100;\r\n }\r\n }\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-flag {\n border: 1px solid transparent;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 0.5rem;\n margin: 0;\n vertical-align: middle;\n min-height: 1.375rem;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 0.875rem;\n line-height: 1.1428571429;\n color: #ffffff;\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-flag--solid-primary-02 {\n color: #ffffff;\n border-color: #035f64;\n background-color: #035f64;\n}\n.mc-flag--solid-dark {\n color: #ffffff;\n border-color: #000000;\n background-color: #000000;\n}\n.mc-flag--solid-light {\n color: #000000;\n border-color: #ffffff;\n background-color: #ffffff;\n}\n.mc-flag--solid-danger {\n color: #ffffff;\n border-color: #df382b;\n background-color: #df382b;\n}\n.mc-flag--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-flag--bordered-primary-02 {\n color: #035f64;\n border-color: #035f64;\n background-color: #ffffff;\n}\n.mc-flag--bordered-dark {\n color: #000000;\n border-color: #000000;\n background-color: #ffffff;\n}\n.mc-flag--bordered-light {\n color: #ffffff;\n border-color: #ffffff;\n background-color: #000000;\n}\n.mc-flag--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-flag--extend {\n -ms-flex-negative: 1;\n flex-shrink: 1;\n height: auto;\n}\n.example {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.example__item {\n margin: 1rem;\n}\n.example__item--light {\n background: #000000;\n padding: 1rem;\n}"}}},{"node":{"id":"456bd0fd-124d-5a6b-ab7d-eb3f430b9361","path":"src/docs/Components/Flags/previews/flag-all","codes":{"js":"","html":"
\r\n
\r\n
\r\n Flag solid\r\n
\r\n\r\n
\r\n Flag bordered\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid primary 02\r\n
\r\n\r\n
\r\n Flag bordered primary 02\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid dark\r\n
\r\n\r\n
\r\n Flag bordered dark\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid light\r\n
\r\n\r\n
\r\n Flag bordered light\r\n
\r\n
\r\n\r\n
\r\n
\r\n Flag solid danger\r\n
\r\n\r\n
\r\n Flag bordered danger\r\n
\r\n
\r\n
\r\n","scss":"@import 'settings-tools/_all-settings';\r\n\r\n@include import-font-families();\r\n\r\n@import 'components/_c.flag';\r\n\r\n.example {\r\n align-items: flex-start;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n\r\n &__item {\r\n margin: $mu100;\r\n\r\n &--light {\r\n background: $color-grey-999;\r\n padding: $mu100;\r\n }\r\n }\r\n}\r\n\r\n.mc-flag:first-child {\r\n margin-right: $mu250;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-flag {\n border: 1px solid transparent;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 0.5rem;\n margin: 0;\n vertical-align: middle;\n min-height: 1.375rem;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 0.875rem;\n line-height: 1.1428571429;\n color: #ffffff;\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-flag--solid-primary-02 {\n color: #ffffff;\n border-color: #035f64;\n background-color: #035f64;\n}\n.mc-flag--solid-dark {\n color: #ffffff;\n border-color: #000000;\n background-color: #000000;\n}\n.mc-flag--solid-light {\n color: #000000;\n border-color: #ffffff;\n background-color: #ffffff;\n}\n.mc-flag--solid-danger {\n color: #ffffff;\n border-color: #df382b;\n background-color: #df382b;\n}\n.mc-flag--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-flag--bordered-primary-02 {\n color: #035f64;\n border-color: #035f64;\n background-color: #ffffff;\n}\n.mc-flag--bordered-dark {\n color: #000000;\n border-color: #000000;\n background-color: #ffffff;\n}\n.mc-flag--bordered-light {\n color: #ffffff;\n border-color: #ffffff;\n background-color: #000000;\n}\n.mc-flag--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-flag--extend {\n -ms-flex-negative: 1;\n flex-shrink: 1;\n height: auto;\n}\n.example {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.example__item {\n margin: 1rem;\n}\n.example__item--light {\n background: #000000;\n padding: 1rem;\n}\n\n.mc-flag:first-child {\n margin-right: 2.5rem;\n}"}}},{"node":{"id":"1f2df2e9-388b-5016-af9a-87f0d6d0641c","path":"src/docs/Components/Flags/previews/flag-basic","codes":{"js":"","html":"
\r\n
\r\n
\r\n Flag solid\r\n
\r\n\r\n
\r\n Flag bordered\r\n
\r\n
\r\n
\r\n","scss":"@import 'settings-tools/_all-settings';\r\n\r\n@include import-font-families();\r\n\r\n@import 'components/_c.flag';\r\n\r\n.example {\r\n align-items: flex-start;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-around;\r\n\r\n &__item {\r\n margin: $mu100;\r\n\r\n &--light {\r\n background: $color-grey-999;\r\n padding: $mu100;\r\n }\r\n }\r\n}\r\n\r\n.mc-flag:first-child {\r\n margin-right: $mu250;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-flag {\n border: 1px solid transparent;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0 0.5rem;\n margin: 0;\n vertical-align: middle;\n min-height: 1.375rem;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 0.875rem;\n line-height: 1.1428571429;\n color: #ffffff;\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-flag--solid-primary-02 {\n color: #ffffff;\n border-color: #035f64;\n background-color: #035f64;\n}\n.mc-flag--solid-dark {\n color: #ffffff;\n border-color: #000000;\n background-color: #000000;\n}\n.mc-flag--solid-light {\n color: #000000;\n border-color: #ffffff;\n background-color: #ffffff;\n}\n.mc-flag--solid-danger {\n color: #ffffff;\n border-color: #df382b;\n background-color: #df382b;\n}\n.mc-flag--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-flag--bordered-primary-02 {\n color: #035f64;\n border-color: #035f64;\n background-color: #ffffff;\n}\n.mc-flag--bordered-dark {\n color: #000000;\n border-color: #000000;\n background-color: #ffffff;\n}\n.mc-flag--bordered-light {\n color: #ffffff;\n border-color: #ffffff;\n background-color: #000000;\n}\n.mc-flag--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-flag--extend {\n -ms-flex-negative: 1;\n flex-shrink: 1;\n height: auto;\n}\n.example {\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.example__item {\n margin: 1rem;\n}\n.example__item--light {\n background: #000000;\n padding: 1rem;\n}\n\n.mc-flag:first-child {\n margin-right: 2.5rem;\n}"}}},{"node":{"id":"5896062b-6e20-58f5-9de9-91a26d8d10a9","path":"src/docs/Components/Form/Checkbox/previews/checkbox-item","codes":{"js":"","html":"\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: fit-content;\n\n &__item {\n @include set-flexy;\n\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n.example__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"28c10bad-3e74-5275-b079-403bd01ab197","path":"src/docs/Components/Form/Checkbox/previews/default-states","codes":{"js":"","html":"\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: fit-content;\n\n &__item {\n @include set-flexy;\n\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n.example__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"bb0fe7a8-95ea-56a4-bda0-0e49aed90ca1","path":"src/docs/Components/Form/Checkbox/previews/intro","codes":{"js":"","html":"\n\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: fit-content;\n\n &__item {\n @include set-flexy;\n\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: -webkit-fit-content;\n width: -moz-fit-content;\n width: fit-content;\n}\n.example__item {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"4186cd7d-6294-5343-959e-c4412f42d4bf","path":"src/docs/Components/Accordion/previews/disable","codes":{"js":"","html":"
\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n\n.example {\n margin: $mu125;\n min-height: $mu1000;\n}\n\np {\n margin: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.example {\n margin: 1.25rem;\n min-height: 10rem;\n}\n\np {\n margin: 0;\n}"}}},{"node":{"id":"036c617b-feb2-5cc4-830f-27cb2728f279","path":"src/docs/Components/Accordion/previews/no-padding","codes":{"js":"","html":"
\n
\n \n \n Accordion title\n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n
\n \n \n \n \n \n Accordion title\n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n
\n\n\n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n\n.example {\n margin: $mu125;\n min-height: $mu1000;\n}\n\np {\n margin: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.example {\n margin: 1.25rem;\n min-height: 10rem;\n}\n\np {\n margin: 0;\n}"}}},{"node":{"id":"a514f834-616a-555a-b0ba-13364ee21ca6","path":"src/docs/Components/Accordion/previews/open","codes":{"js":"","html":"
\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n\n.example {\n margin: $mu125;\n min-height: $mu1000;\n}\n\np {\n margin: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.example {\n margin: 1.25rem;\n min-height: 10rem;\n}\n\np {\n margin: 0;\n}"}}},{"node":{"id":"d8e9958f-fd49-523f-b02a-96e4e5d2aff1","path":"src/docs/Components/Accordion/previews/basic","codes":{"js":"","html":"
\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n\n.example {\n margin: $mu125;\n min-height: $mu1000;\n}\n\np {\n margin: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.example {\n margin: 1.25rem;\n min-height: 10rem;\n}\n\np {\n margin: 0;\n}"}}},{"node":{"id":"7f76c325-0f3b-50db-96d4-6950b818eb06","path":"src/docs/Components/Accordion/previews/states","codes":{"js":"","html":"
\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n\n.example {\n margin: $mu125;\n min-height: $mu1000;\n}\n\np {\n margin: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.example {\n margin: 1.25rem;\n min-height: 10rem;\n}\n\np {\n margin: 0;\n}"}}},{"node":{"id":"cb8af035-403d-5dca-a211-f8d7283556b9","path":"src/docs/Components/Accordion/previews/icon","codes":{"js":"","html":"
\n
\n \n \n \n \n \n Accordion title\n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

\n
\n
\n
\n\n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n\n.example {\n margin: $mu125;\n min-height: $mu1000;\n}\n\np {\n margin: 0;\n}\n\n.hidden {\n display: none;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.example {\n margin: 1.25rem;\n min-height: 10rem;\n}\n\np {\n margin: 0;\n}\n\n.hidden {\n display: none;\n}"}}},{"node":{"id":"65909769-836d-5348-a956-5eeae8badaea","path":"src/docs/Components/Accordion/previews/sizes","codes":{"js":"","html":"
\n
\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo\n sit amet pharetra.\n

\n
\n
\n
\n
\n
\n \n \n
\n

\n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo\n sit amet pharetra.\n

\n
\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n\n.example {\n margin: $mu125;\n min-height: 15.625rem;\n\n &__item {\n padding: $mu100;\n }\n}\n\np {\n margin: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.example {\n margin: 1.25rem;\n min-height: 15.625rem;\n}\n.example__item {\n padding: 1rem;\n}\n\np {\n margin: 0;\n}"}}},{"node":{"id":"8fc72b20-55b4-53b2-95e4-821f364b1887","path":"src/docs/Components/Form/FileUploader/previews/default","codes":{"js":"","html":"
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n\n.example {\n margin: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n margin: 1.5rem;\n}"}}},{"node":{"id":"cc1d66e7-a931-5710-a8e4-f037bc3afeb3","path":"src/docs/Components/Form/FileUploader/previews/uploaded-files-with-errors","codes":{"js":"","html":"
\n
\n \n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n\n.example {\n margin: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n margin: 1.5rem;\n}"}}},{"node":{"id":"e71a6b72-c2e0-5447-9897-b753a027e4e2","path":"src/docs/Components/Form/FileUploader/previews/uploaded-files","codes":{"js":"","html":"
\n
\n \n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n\n.example {\n margin: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n margin: 1.5rem;\n}"}}},{"node":{"id":"436b07b2-7633-5913-ad1c-bd197c83e33f","path":"src/docs/Components/Form/FileUploader/previews/with-attribute-accept","codes":{"js":"","html":"
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n\n.example {\n margin: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n margin: 1.5rem;\n}"}}},{"node":{"id":"4bab0ad1-762c-50bb-b3ea-fac45444e3be","path":"src/docs/Components/Form/FileUploader/previews/with-attribute-multiple","codes":{"js":"","html":"
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n\n.example {\n margin: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n margin: 1.5rem;\n}"}}},{"node":{"id":"3179a4e6-1ed9-5550-bb76-2744dd238e45","path":"src/docs/Components/Form/FileUploader/previews/all-states","codes":{"js":"","html":"
\n

Hover

\n
\n \n \n
\n
\n\n
\n

Focus

\n
\n \n \n
\n
\n\n
\n

Disabled

\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n\n.example {\n margin: $mu150;\n\n h2 {\n @include set-font-face('regular');\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n margin: 1.5rem;\n}\n.example h2 {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}"}}},{"node":{"id":"ec84c09a-e011-5f8a-90bf-e3a619681f07","path":"src/docs/Components/Buttons/previews/suportedMarkup","codes":{"js":"","html":"
\n \n \n a tag\n \n \n \n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n padding: $mu300;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n padding: 3rem;\n}"}}},{"node":{"id":"cc91d02b-db66-59ab-977d-bc8ae387f085","path":"src/docs/Components/Buttons/previews/button-icon-and-text","codes":{"js":"","html":"
\n \n
\n
\n \n
\n
\n \n
\n\n\n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"9fb8932b-2d68-59e2-83ee-60d6bfff208c","path":"src/docs/Components/Buttons/previews/button-icon-only","codes":{"js":"","html":"
\n \n \n \n
\n\n\n \n \n \n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"3d888a2b-320e-5698-8933-13c3df3b1621","path":"src/docs/Components/Buttons/previews/button-icon-position","codes":{"js":"","html":"
\n \n \n
\n\n\n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"bdd08a68-374b-559d-a43a-9ae3a59173a9","path":"src/docs/Components/Buttons/previews/button-icon","codes":{"js":"","html":"
\n \n \n \n
\n\n\n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"0bdf3d8a-8900-5c44-9f29-243b9d6d1530","path":"src/docs/Components/Buttons/previews/button-proximity-dont","codes":{"js":"","html":"
\n \n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"db784d27-d93e-5767-982b-534463d86186","path":"src/docs/Components/Buttons/previews/button-sizes","codes":{"js":"","html":"
\n \n
\n
\n \n
\n
\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"5ea3641d-96b7-55e1-b633-25bebce394c1","path":"src/docs/Components/Buttons/previews/button-widths","codes":{"js":"","html":"
\n \n

\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"fadf37c1-5334-5856-b82f-42dd45ca0911","path":"src/docs/Components/Buttons/previews/intro-bordered","codes":{"js":"","html":"
\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"7dc28fc0-e07f-5293-862e-e9fc59c87478","path":"src/docs/Components/Buttons/previews/intro","codes":{"js":"","html":"
\n \n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"c293756d-d5fd-5f76-9f9e-8d9f0253c921","path":"src/docs/Components/Buttons/previews/button-styles","codes":{"js":"","html":"
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"390d7adc-1dff-5b12-9403-e91cc2dd71aa","path":"src/docs/Components/Buttons/previews/basic","codes":{"js":"","html":"
\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"1adab250-7187-50ed-a535-b972cfa83ac4","path":"src/docs/Components/Buttons/previews/button-widths-responsive","codes":{"js":"","html":"
\n
\n \n
\n
\n \n
\n
\n \n \n Full and Fit from screen m\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n\n &__item {\n margin-bottom: $mu100;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n text-align: center;\n margin: 1rem auto;\n}\n.example__item {\n margin-bottom: 1rem;\n}"}}},{"node":{"id":"50c8ca4d-0e8f-5d1b-ba3a-1232a6362309","path":"src/docs/Components/Buttons/previews/button-state","codes":{"js":"","html":"
\n
\n

Hover

\n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n
\n\n
\n

Active

\n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n
\n\n
\n

Focus

\n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n
\n\n
\n

Disabled

\n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n \n Label\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n\n.example {\n display: flex;\n width: 90%;\n margin: auto;\n text-align: center;\n justify-content: center;\n\n h2 {\n @include set-font-face('regular');\n }\n\n &__col {\n flex: 0 1 33%;\n box-sizing: border-box;\n padding: 0 $mu100;\n }\n\n .mc-button {\n margin-bottom: $mu100;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 90%;\n margin: auto;\n text-align: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.example h2 {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.example__col {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 33%;\n flex: 0 1 33%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 1rem;\n}\n.example .mc-button {\n margin-bottom: 1rem;\n}"}}},{"node":{"id":"a0156be6-fc94-5c17-b9bb-9548c0b8df24","path":"src/docs/Components/ProgressBar/previews/branded","codes":{"js":"","html":"
\n
\n \n  \n
\n
\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.progressbar';\n\n.example {\n padding: $mu200;\n margin: 0 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-progressbar {\n font-family: \"LeroyMerlin\", sans-serif;\n background-color: #d3d2d6;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 0.5rem;\n position: relative;\n}\n.mc-progressbar, .mc-progressbar__indicator {\n border-radius: 6px;\n line-height: 0;\n overflow: hidden;\n}\n.mc-progressbar__indicator {\n background-color: #2282a8;\n -webkit-transition: width 0.4s ease;\n -o-transition: width 0.4s ease;\n transition: width 0.4s ease;\n}\n.mc-progressbar__percentage {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 600;\n color: #222020;\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-progressbar--half .mc-progressbar__percentage {\n color: #ffffff;\n}\n\n.mc-progressbar--s {\n height: 0.25rem;\n}\n.mc-progressbar--s,\n.mc-progressbar--s .mc-progressbar__indicator {\n border-radius: 4px;\n}\n.mc-progressbar--percent {\n height: 1.5rem;\n}\n.mc-progressbar--percent,\n.mc-progressbar--percent .mc-progressbar__indicator {\n border-radius: 12px;\n}\n.mc-progressbar--branded .mc-progressbar__indicator {\n background-color: #78be20;\n}\n\n.example {\n padding: 2rem;\n margin: 0 auto;\n}"}}},{"node":{"id":"70fe1023-2837-55d8-b9ab-c21642ed247f","path":"src/docs/Components/ProgressBar/previews/default","codes":{"js":"","html":"
\n
\n \n  \n
\n
\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.progressbar';\n\n.example {\n padding: $mu200;\n margin: 0 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-progressbar {\n font-family: \"LeroyMerlin\", sans-serif;\n background-color: #d3d2d6;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 0.5rem;\n position: relative;\n}\n.mc-progressbar, .mc-progressbar__indicator {\n border-radius: 6px;\n line-height: 0;\n overflow: hidden;\n}\n.mc-progressbar__indicator {\n background-color: #2282a8;\n -webkit-transition: width 0.4s ease;\n -o-transition: width 0.4s ease;\n transition: width 0.4s ease;\n}\n.mc-progressbar__percentage {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 600;\n color: #222020;\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-progressbar--half .mc-progressbar__percentage {\n color: #ffffff;\n}\n\n.mc-progressbar--s {\n height: 0.25rem;\n}\n.mc-progressbar--s,\n.mc-progressbar--s .mc-progressbar__indicator {\n border-radius: 4px;\n}\n.mc-progressbar--percent {\n height: 1.5rem;\n}\n.mc-progressbar--percent,\n.mc-progressbar--percent .mc-progressbar__indicator {\n border-radius: 12px;\n}\n.mc-progressbar--branded .mc-progressbar__indicator {\n background-color: #78be20;\n}\n\n.example {\n padding: 2rem;\n margin: 0 auto;\n}"}}},{"node":{"id":"3fb26931-59d2-5185-b1b3-08f8d0dbb88c","path":"src/docs/Components/ProgressBar/previews/percentage-half","codes":{"js":"","html":"
\n
\n \n  \n
\n
75%
\n
\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.progressbar';\n\n.example {\n padding: $mu200;\n margin: 0 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-progressbar {\n font-family: \"LeroyMerlin\", sans-serif;\n background-color: #d3d2d6;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 0.5rem;\n position: relative;\n}\n.mc-progressbar, .mc-progressbar__indicator {\n border-radius: 6px;\n line-height: 0;\n overflow: hidden;\n}\n.mc-progressbar__indicator {\n background-color: #2282a8;\n -webkit-transition: width 0.4s ease;\n -o-transition: width 0.4s ease;\n transition: width 0.4s ease;\n}\n.mc-progressbar__percentage {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 600;\n color: #222020;\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-progressbar--half .mc-progressbar__percentage {\n color: #ffffff;\n}\n\n.mc-progressbar--s {\n height: 0.25rem;\n}\n.mc-progressbar--s,\n.mc-progressbar--s .mc-progressbar__indicator {\n border-radius: 4px;\n}\n.mc-progressbar--percent {\n height: 1.5rem;\n}\n.mc-progressbar--percent,\n.mc-progressbar--percent .mc-progressbar__indicator {\n border-radius: 12px;\n}\n.mc-progressbar--branded .mc-progressbar__indicator {\n background-color: #78be20;\n}\n\n.example {\n padding: 2rem;\n margin: 0 auto;\n}"}}},{"node":{"id":"28d1006c-e69e-5336-aaaa-c40f62d6c9ee","path":"src/docs/Components/ProgressBar/previews/percentage","codes":{"js":"","html":"
\n
\n \n  \n
\n
40%
\n
\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.progressbar';\n\n.example {\n padding: $mu200;\n margin: 0 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-progressbar {\n font-family: \"LeroyMerlin\", sans-serif;\n background-color: #d3d2d6;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 0.5rem;\n position: relative;\n}\n.mc-progressbar, .mc-progressbar__indicator {\n border-radius: 6px;\n line-height: 0;\n overflow: hidden;\n}\n.mc-progressbar__indicator {\n background-color: #2282a8;\n -webkit-transition: width 0.4s ease;\n -o-transition: width 0.4s ease;\n transition: width 0.4s ease;\n}\n.mc-progressbar__percentage {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 600;\n color: #222020;\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-progressbar--half .mc-progressbar__percentage {\n color: #ffffff;\n}\n\n.mc-progressbar--s {\n height: 0.25rem;\n}\n.mc-progressbar--s,\n.mc-progressbar--s .mc-progressbar__indicator {\n border-radius: 4px;\n}\n.mc-progressbar--percent {\n height: 1.5rem;\n}\n.mc-progressbar--percent,\n.mc-progressbar--percent .mc-progressbar__indicator {\n border-radius: 12px;\n}\n.mc-progressbar--branded .mc-progressbar__indicator {\n background-color: #78be20;\n}\n\n.example {\n padding: 2rem;\n margin: 0 auto;\n}"}}},{"node":{"id":"5fc5ecfd-95ea-51a0-999d-4d29b4b15c8d","path":"src/docs/Components/ProgressBar/previews/variations-colors","codes":{"js":"","html":"
\n
\n Default\n
\n\n
\n \n  \n
\n
\n\n
\n Branded\n
\n\n
\n \n  \n
\n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.progressbar';\n\n.example {\n padding: $mu200;\n margin: 0 auto;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n margin: $mu300 0 $mu100;\n padding: $mu100;\n text-align: center;\n\n &:first-child {\n margin: 0 0 $mu100;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-progressbar {\n font-family: \"LeroyMerlin\", sans-serif;\n background-color: #d3d2d6;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 0.5rem;\n position: relative;\n}\n.mc-progressbar, .mc-progressbar__indicator {\n border-radius: 6px;\n line-height: 0;\n overflow: hidden;\n}\n.mc-progressbar__indicator {\n background-color: #2282a8;\n -webkit-transition: width 0.4s ease;\n -o-transition: width 0.4s ease;\n transition: width 0.4s ease;\n}\n.mc-progressbar__percentage {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 600;\n color: #222020;\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-progressbar--half .mc-progressbar__percentage {\n color: #ffffff;\n}\n\n.mc-progressbar--s {\n height: 0.25rem;\n}\n.mc-progressbar--s,\n.mc-progressbar--s .mc-progressbar__indicator {\n border-radius: 4px;\n}\n.mc-progressbar--percent {\n height: 1.5rem;\n}\n.mc-progressbar--percent,\n.mc-progressbar--percent .mc-progressbar__indicator {\n border-radius: 12px;\n}\n.mc-progressbar--branded .mc-progressbar__indicator {\n background-color: #78be20;\n}\n\n.example {\n padding: 2rem;\n margin: 0 auto;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n margin: 3rem 0 1rem;\n padding: 1rem;\n text-align: center;\n}\n.example__title:first-child {\n margin: 0 0 1rem;\n}"}}},{"node":{"id":"ff3c63da-1e39-5409-91b6-23f471c28068","path":"src/docs/Components/ProgressBar/previews/variations-sizes","codes":{"js":"","html":"
\n
\n Small\n
\n\n
\n \n  \n
\n
\n\n
\n Medium (default)\n
\n\n
\n \n  \n
\n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.progressbar';\n\n.example {\n padding: $mu200;\n margin: 0 auto;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n margin: $mu300 0 $mu100;\n padding: $mu100;\n text-align: center;\n\n &:first-child {\n margin: 0 0 $mu100;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-progressbar {\n font-family: \"LeroyMerlin\", sans-serif;\n background-color: #d3d2d6;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n height: 0.5rem;\n position: relative;\n}\n.mc-progressbar, .mc-progressbar__indicator {\n border-radius: 6px;\n line-height: 0;\n overflow: hidden;\n}\n.mc-progressbar__indicator {\n background-color: #2282a8;\n -webkit-transition: width 0.4s ease;\n -o-transition: width 0.4s ease;\n transition: width 0.4s ease;\n}\n.mc-progressbar__percentage {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 600;\n color: #222020;\n left: 50%;\n position: absolute;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-progressbar--half .mc-progressbar__percentage {\n color: #ffffff;\n}\n\n.mc-progressbar--s {\n height: 0.25rem;\n}\n.mc-progressbar--s,\n.mc-progressbar--s .mc-progressbar__indicator {\n border-radius: 4px;\n}\n.mc-progressbar--percent {\n height: 1.5rem;\n}\n.mc-progressbar--percent,\n.mc-progressbar--percent .mc-progressbar__indicator {\n border-radius: 12px;\n}\n.mc-progressbar--branded .mc-progressbar__indicator {\n background-color: #78be20;\n}\n\n.example {\n padding: 2rem;\n margin: 0 auto;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n margin: 3rem 0 1rem;\n padding: 1rem;\n text-align: center;\n}\n.example__title:first-child {\n margin: 0 0 1rem;\n}"}}},{"node":{"id":"8bef9842-5b2a-569c-bdc2-de58a37eba91","path":"src/docs/Components/Form/TextArea/previews/single","codes":{"js":"","html":"
\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"31793fcd-8bb7-50cd-8fac-307c9035aff4","path":"src/docs/Components/RatingStars/previews/stars-result-basic","codes":{"js":"","html":"
\r\n
\r\n \r\n Global score: 1,5/5\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n@import 'components/_c.stars-result';\r\n\r\n.example {\r\n display: block;\r\n padding: $mu150;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-result__text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-result__visual {\n height: 1.5rem;\n width: 7.5rem;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n display: block;\n position: relative;\n}\n.mc-stars-result__visual::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n bottom: 0;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 0;\n}\n.mc-stars-result--s .mc-stars-result__visual {\n height: 1rem;\n width: 5rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-result--s .mc-stars-result__visual::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-result--l .mc-stars-result__visual {\n height: 2rem;\n width: 10rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-result--l .mc-stars-result__visual::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual {\n height: 2.5rem;\n width: 12.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual::before {\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--score-10 .mc-stars-result__visual::before {\n width: 10%;\n}\n.mc-stars-result--score-20 .mc-stars-result__visual::before {\n width: 20%;\n}\n.mc-stars-result--score-30 .mc-stars-result__visual::before {\n width: 30%;\n}\n.mc-stars-result--score-40 .mc-stars-result__visual::before {\n width: 40%;\n}\n.mc-stars-result--score-50 .mc-stars-result__visual::before {\n width: 50%;\n}\n.mc-stars-result--score-60 .mc-stars-result__visual::before {\n width: 60%;\n}\n.mc-stars-result--score-70 .mc-stars-result__visual::before {\n width: 70%;\n}\n.mc-stars-result--score-80 .mc-stars-result__visual::before {\n width: 80%;\n}\n.mc-stars-result--score-90 .mc-stars-result__visual::before {\n width: 90%;\n}\n.mc-stars-result--score-100 .mc-stars-result__visual::before {\n width: 100%;\n}\n.example {\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"70a7737c-2ee3-5acc-9fdc-6641d729f580","path":"src/docs/Components/RatingStars/previews/stars-result-size-l","codes":{"js":"","html":"
\r\n
\r\n \r\n Global score: 3/5\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n@import 'components/_c.stars-result';\r\n\r\n.example {\r\n display: block;\r\n padding: $mu150;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-result__text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-result__visual {\n height: 1.5rem;\n width: 7.5rem;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n display: block;\n position: relative;\n}\n.mc-stars-result__visual::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n bottom: 0;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 0;\n}\n.mc-stars-result--s .mc-stars-result__visual {\n height: 1rem;\n width: 5rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-result--s .mc-stars-result__visual::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-result--l .mc-stars-result__visual {\n height: 2rem;\n width: 10rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-result--l .mc-stars-result__visual::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual {\n height: 2.5rem;\n width: 12.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual::before {\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--score-10 .mc-stars-result__visual::before {\n width: 10%;\n}\n.mc-stars-result--score-20 .mc-stars-result__visual::before {\n width: 20%;\n}\n.mc-stars-result--score-30 .mc-stars-result__visual::before {\n width: 30%;\n}\n.mc-stars-result--score-40 .mc-stars-result__visual::before {\n width: 40%;\n}\n.mc-stars-result--score-50 .mc-stars-result__visual::before {\n width: 50%;\n}\n.mc-stars-result--score-60 .mc-stars-result__visual::before {\n width: 60%;\n}\n.mc-stars-result--score-70 .mc-stars-result__visual::before {\n width: 70%;\n}\n.mc-stars-result--score-80 .mc-stars-result__visual::before {\n width: 80%;\n}\n.mc-stars-result--score-90 .mc-stars-result__visual::before {\n width: 90%;\n}\n.mc-stars-result--score-100 .mc-stars-result__visual::before {\n width: 100%;\n}\n.example {\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"2b3e5c80-d039-557b-a79f-741ada432893","path":"src/docs/Components/RatingStars/previews/stars-result-size-m","codes":{"js":"","html":"
\r\n
\r\n \r\n Global score: 3/5\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n@import 'components/_c.stars-result';\r\n\r\n.example {\r\n display: block;\r\n padding: $mu150;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-result__text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-result__visual {\n height: 1.5rem;\n width: 7.5rem;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n display: block;\n position: relative;\n}\n.mc-stars-result__visual::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n bottom: 0;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 0;\n}\n.mc-stars-result--s .mc-stars-result__visual {\n height: 1rem;\n width: 5rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-result--s .mc-stars-result__visual::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-result--l .mc-stars-result__visual {\n height: 2rem;\n width: 10rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-result--l .mc-stars-result__visual::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual {\n height: 2.5rem;\n width: 12.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual::before {\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--score-10 .mc-stars-result__visual::before {\n width: 10%;\n}\n.mc-stars-result--score-20 .mc-stars-result__visual::before {\n width: 20%;\n}\n.mc-stars-result--score-30 .mc-stars-result__visual::before {\n width: 30%;\n}\n.mc-stars-result--score-40 .mc-stars-result__visual::before {\n width: 40%;\n}\n.mc-stars-result--score-50 .mc-stars-result__visual::before {\n width: 50%;\n}\n.mc-stars-result--score-60 .mc-stars-result__visual::before {\n width: 60%;\n}\n.mc-stars-result--score-70 .mc-stars-result__visual::before {\n width: 70%;\n}\n.mc-stars-result--score-80 .mc-stars-result__visual::before {\n width: 80%;\n}\n.mc-stars-result--score-90 .mc-stars-result__visual::before {\n width: 90%;\n}\n.mc-stars-result--score-100 .mc-stars-result__visual::before {\n width: 100%;\n}\n.example {\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"b3bf77d7-b6f5-5a03-b9dc-0465f6298a24","path":"src/docs/Components/RatingStars/previews/stars-result-size-s","codes":{"js":"","html":"
\r\n
\r\n \r\n Global score: 3/5\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n@import 'components/_c.stars-result';\r\n\r\n.example {\r\n display: block;\r\n padding: $mu150;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-result__text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-result__visual {\n height: 1.5rem;\n width: 7.5rem;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n display: block;\n position: relative;\n}\n.mc-stars-result__visual::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n bottom: 0;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 0;\n}\n.mc-stars-result--s .mc-stars-result__visual {\n height: 1rem;\n width: 5rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-result--s .mc-stars-result__visual::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-result--l .mc-stars-result__visual {\n height: 2rem;\n width: 10rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-result--l .mc-stars-result__visual::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual {\n height: 2.5rem;\n width: 12.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual::before {\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--score-10 .mc-stars-result__visual::before {\n width: 10%;\n}\n.mc-stars-result--score-20 .mc-stars-result__visual::before {\n width: 20%;\n}\n.mc-stars-result--score-30 .mc-stars-result__visual::before {\n width: 30%;\n}\n.mc-stars-result--score-40 .mc-stars-result__visual::before {\n width: 40%;\n}\n.mc-stars-result--score-50 .mc-stars-result__visual::before {\n width: 50%;\n}\n.mc-stars-result--score-60 .mc-stars-result__visual::before {\n width: 60%;\n}\n.mc-stars-result--score-70 .mc-stars-result__visual::before {\n width: 70%;\n}\n.mc-stars-result--score-80 .mc-stars-result__visual::before {\n width: 80%;\n}\n.mc-stars-result--score-90 .mc-stars-result__visual::before {\n width: 90%;\n}\n.mc-stars-result--score-100 .mc-stars-result__visual::before {\n width: 100%;\n}\n.example {\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"7a90b481-e14e-5fc2-89e5-69e080c564a7","path":"src/docs/Components/RatingStars/previews/stars-result-size-xl","codes":{"js":"","html":"
\r\n
\r\n \r\n Global score: 3/5\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n@import 'components/_c.stars-result';\r\n\r\n.example {\r\n display: block;\r\n padding: $mu150;\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-result__text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-result__visual {\n height: 1.5rem;\n width: 7.5rem;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n display: block;\n position: relative;\n}\n.mc-stars-result__visual::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n bottom: 0;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 0;\n}\n.mc-stars-result--s .mc-stars-result__visual {\n height: 1rem;\n width: 5rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-result--s .mc-stars-result__visual::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-result--l .mc-stars-result__visual {\n height: 2rem;\n width: 10rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-result--l .mc-stars-result__visual::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual {\n height: 2.5rem;\n width: 12.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual::before {\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--score-10 .mc-stars-result__visual::before {\n width: 10%;\n}\n.mc-stars-result--score-20 .mc-stars-result__visual::before {\n width: 20%;\n}\n.mc-stars-result--score-30 .mc-stars-result__visual::before {\n width: 30%;\n}\n.mc-stars-result--score-40 .mc-stars-result__visual::before {\n width: 40%;\n}\n.mc-stars-result--score-50 .mc-stars-result__visual::before {\n width: 50%;\n}\n.mc-stars-result--score-60 .mc-stars-result__visual::before {\n width: 60%;\n}\n.mc-stars-result--score-70 .mc-stars-result__visual::before {\n width: 70%;\n}\n.mc-stars-result--score-80 .mc-stars-result__visual::before {\n width: 80%;\n}\n.mc-stars-result--score-90 .mc-stars-result__visual::before {\n width: 90%;\n}\n.mc-stars-result--score-100 .mc-stars-result__visual::before {\n width: 100%;\n}\n.example {\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"a2115ea4-4fb4-530c-9a19-71b0126d368c","path":"src/docs/Components/RatingStars/previews/stars-result-all-sizes","codes":{"js":"","html":"
\r\n
\r\n
\r\n \r\n Global score: 1/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 2/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 3/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 4,5/5\r\n
\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n\r\n.example {\r\n @import 'components/_c.stars-result';\r\n\r\n display: block;\r\n padding: 0 $mu150;\r\n\r\n &__item {\r\n margin: $mu150 auto;\r\n }\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.example {\n /* mqp:start */\n /* mqp:end */\n display: block;\n padding: 0 1.5rem;\n}\n.example .mc-stars-result__text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.example .mc-stars-result__visual {\n height: 1.5rem;\n width: 7.5rem;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n display: block;\n position: relative;\n}\n.example .mc-stars-result__visual::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n bottom: 0;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 0;\n}\n.example .mc-stars-result--s .mc-stars-result__visual {\n height: 1rem;\n width: 5rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.example .mc-stars-result--s .mc-stars-result__visual::before {\n background-size: 1rem 1rem;\n}\n.example .mc-stars-result--l .mc-stars-result__visual {\n height: 2rem;\n width: 10rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.example .mc-stars-result--l .mc-stars-result__visual::before {\n background-size: 2rem 2rem;\n}\n.example .mc-stars-result--xl .mc-stars-result__visual {\n height: 2.5rem;\n width: 12.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.example .mc-stars-result--xl .mc-stars-result__visual::before {\n background-size: 2.5rem 2.5rem;\n}\n.example .mc-stars-result--score-10 .mc-stars-result__visual::before {\n width: 10%;\n}\n.example .mc-stars-result--score-20 .mc-stars-result__visual::before {\n width: 20%;\n}\n.example .mc-stars-result--score-30 .mc-stars-result__visual::before {\n width: 30%;\n}\n.example .mc-stars-result--score-40 .mc-stars-result__visual::before {\n width: 40%;\n}\n.example .mc-stars-result--score-50 .mc-stars-result__visual::before {\n width: 50%;\n}\n.example .mc-stars-result--score-60 .mc-stars-result__visual::before {\n width: 60%;\n}\n.example .mc-stars-result--score-70 .mc-stars-result__visual::before {\n width: 70%;\n}\n.example .mc-stars-result--score-80 .mc-stars-result__visual::before {\n width: 80%;\n}\n.example .mc-stars-result--score-90 .mc-stars-result__visual::before {\n width: 90%;\n}\n.example .mc-stars-result--score-100 .mc-stars-result__visual::before {\n width: 100%;\n}\n.example__item {\n margin: 1.5rem auto;\n}"}}},{"node":{"id":"05617445-3748-52e8-aae7-39b3ac9fdf71","path":"src/docs/Components/RatingStars/previews/stars-result-all-states","codes":{"js":"","html":"
\r\n
\r\n
\r\n
\r\n \r\n Global score: 0/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 0,5/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 1/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 1,5/5\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n Global score: 2/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 2,5/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 3/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 3,5/5\r\n
\r\n
\r\n
\r\n\r\n
\r\n
\r\n
\r\n \r\n Global score: 4/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 4,5/5\r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n Global score: 5/5\r\n
\r\n
\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n@import 'components/_c.stars-result';\r\n\r\n.example {\r\n display: block;\r\n padding: 0 $mu150;\r\n\r\n &__wrapper {\r\n display: flex;\r\n }\r\n\r\n &__item {\r\n margin: $mu150;\r\n }\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-result__text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-result__visual {\n height: 1.5rem;\n width: 7.5rem;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n display: block;\n position: relative;\n}\n.mc-stars-result__visual::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left top;\n background-size: 1.5rem 1.5rem;\n bottom: 0;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 0;\n}\n.mc-stars-result--s .mc-stars-result__visual {\n height: 1rem;\n width: 5rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-result--s .mc-stars-result__visual::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-result--l .mc-stars-result__visual {\n height: 2rem;\n width: 10rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-result--l .mc-stars-result__visual::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual {\n height: 2.5rem;\n width: 12.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--xl .mc-stars-result__visual::before {\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-result--score-10 .mc-stars-result__visual::before {\n width: 10%;\n}\n.mc-stars-result--score-20 .mc-stars-result__visual::before {\n width: 20%;\n}\n.mc-stars-result--score-30 .mc-stars-result__visual::before {\n width: 30%;\n}\n.mc-stars-result--score-40 .mc-stars-result__visual::before {\n width: 40%;\n}\n.mc-stars-result--score-50 .mc-stars-result__visual::before {\n width: 50%;\n}\n.mc-stars-result--score-60 .mc-stars-result__visual::before {\n width: 60%;\n}\n.mc-stars-result--score-70 .mc-stars-result__visual::before {\n width: 70%;\n}\n.mc-stars-result--score-80 .mc-stars-result__visual::before {\n width: 80%;\n}\n.mc-stars-result--score-90 .mc-stars-result__visual::before {\n width: 90%;\n}\n.mc-stars-result--score-100 .mc-stars-result__visual::before {\n width: 100%;\n}\n.example {\n display: block;\n padding: 0 1.5rem;\n}\n.example__wrapper {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.example__item {\n margin: 1.5rem;\n}"}}},{"node":{"id":"38ae0f6a-cdea-5197-9f34-b5c04d004144","path":"src/docs/Components/Form/Radio/previews/radio-default","codes":{"js":"","html":"\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"763035f8-655c-5cdf-bf9b-db92f8c23347","path":"src/docs/Components/Form/Radio/previews/radio-focus-state","codes":{"js":"","html":"","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"19455191-5582-568f-a88e-d72c267f7b8e","path":"src/docs/Components/Form/Radio/previews/radio-disabled-state","codes":{"js":"","html":"","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"76eb8390-ec1d-5940-adf1-59beefcde998","path":"src/docs/Components/Form/Radio/previews/radio-hover-state","codes":{"js":"","html":"","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"b23dd73e-7e98-5a47-9ebb-43e43a305721","path":"src/docs/Components/Form/Radio/previews/radio-invalid-state","codes":{"js":"","html":"","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"64c83b39-a968-5f0a-b6f8-e3ffc2411f46","path":"src/docs/Components/Form/Radio/previews/radio-states","codes":{"js":"","html":"\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"5a8f63d8-ecf0-597c-8a78-469158215fa7","path":"src/docs/Components/Form/Radio/previews/radio-valid-state","codes":{"js":"","html":"","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"60946e79-d1b1-543e-b30d-cb0c23ee3b5a","path":"src/docs/Components/Tooltip/previews/default","codes":{"js":"","html":"
\n
\n
Top
\n\n Tooltip text\n
\n
\n\n
\n
\n
Right
\n\n \n Tooltip text\n \n
\n
\n\n
\n
\n
Left
\n\n \n Tooltip text\n \n
\n
\n\n
\n
\n
Bottom
\n\n \n Here is an example with a little more text\n \n
\n
\n\n
\n
\n
\n \n \n \n
\n\n \n Tooltip text\n \n
\n
\n\n\n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings.scss';\n\n@include import-font-families();\n\n@import 'components/_c.tooltip.scss';\n\n.example {\n padding: 3rem;\n display: flex;\n justify-content: center;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tooltip {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n position: relative;\n}\n.mc-tooltip:focus, .mc-tooltip:hover {\n cursor: pointer;\n}\n.mc-tooltip:focus .mc-tooltip__content, .mc-tooltip:hover .mc-tooltip__content {\n visibility: visible;\n}\n.mc-tooltip__content {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background-color: #554f52;\n border-radius: 4px;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #ffffff;\n padding: 0.4375rem 1rem;\n position: absolute;\n text-align: center;\n visibility: hidden;\n z-index: 1000;\n}\n@supports ((width: -webkit-max-content) or (width: -moz-max-content) or (width: max-content)) {\n .mc-tooltip__content {\n min-width: 6.625rem;\n max-width: 13.75rem;\n width: -webkit-max-content;\n width: -moz-max-content;\n width: max-content;\n }\n}\n.mc-tooltip__content::after {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMC41cmVtIiB3aWR0aD0iMC41cmVtIiB2aWV3Qm94PSIwIDAgOCA4Ij48cGF0aCBmaWxsPSIjNTU0ZjUyIiBkPSJNMS43OSAzLjExbDYuMjEtMy4xMXY4bC02LjIxLTMuMTFhMSAxIDAgMCAxLS40NS0xLjM0IDEgMSAwIDAgMSAuNDUtLjQ0eiIvPjwvc3ZnPg==') no-repeat;\n background-size: 0.5rem;\n content: \"\";\n height: 0.5rem;\n position: absolute;\n width: 0.5rem;\n}\n.mc-tooltip--top .mc-tooltip__content {\n top: 0;\n left: 50%;\n -webkit-transform: translate(-50%, calc(-100% - 0.75rem));\n -ms-transform: translate(-50%, calc(-100% - 0.75rem));\n transform: translate(-50%, calc(-100% - 0.75rem));\n}\n.mc-tooltip--top .mc-tooltip__content::after {\n bottom: 0;\n left: 50%;\n -webkit-transform: translate(-50%, 100%) rotate(-90deg);\n -ms-transform: translate(-50%, 100%) rotate(-90deg);\n transform: translate(-50%, 100%) rotate(-90deg);\n}\n.mc-tooltip--right .mc-tooltip__content {\n top: 50%;\n right: 0;\n -webkit-transform: translate(calc(100% + 0.75rem), -50%);\n -ms-transform: translate(calc(100% + 0.75rem), -50%);\n transform: translate(calc(100% + 0.75rem), -50%);\n}\n.mc-tooltip--right .mc-tooltip__content::after {\n top: 50%;\n left: 0;\n -webkit-transform: translate(-99%, -50%);\n -ms-transform: translate(-99%, -50%);\n transform: translate(-99%, -50%);\n}\n.mc-tooltip--left .mc-tooltip__content {\n left: 0;\n top: 50%;\n -webkit-transform: translate(calc(-100% - 0.75rem), -50%);\n -ms-transform: translate(calc(-100% - 0.75rem), -50%);\n transform: translate(calc(-100% - 0.75rem), -50%);\n}\n.mc-tooltip--left .mc-tooltip__content::after {\n top: 50%;\n right: 0;\n -webkit-transform: translate(99%, -50%) rotate(180deg);\n -ms-transform: translate(99%, -50%) rotate(180deg);\n transform: translate(99%, -50%) rotate(180deg);\n}\n.mc-tooltip--bottom .mc-tooltip__content {\n bottom: 0;\n left: 50%;\n -webkit-transform: translate(-50%, calc(100% + 0.75rem));\n -ms-transform: translate(-50%, calc(100% + 0.75rem));\n transform: translate(-50%, calc(100% + 0.75rem));\n}\n.mc-tooltip--bottom .mc-tooltip__content::after {\n top: 0;\n left: 50%;\n -webkit-transform: translate(-50%, -100%) rotate(90deg);\n -ms-transform: translate(-50%, -100%) rotate(90deg);\n transform: translate(-50%, -100%) rotate(90deg);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .mc-tooltip__content {\n width: 13.75rem;\n }\n .mc-tooltip--top .mc-tooltip__content {\n -webkit-transform: translate(-50%, -100%);\n -ms-transform: translate(-50%, -100%);\n transform: translate(-50%, -100%);\n margin-top: -0.75rem;\n }\n .mc-tooltip--right .mc-tooltip__content {\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n margin-right: -0.75rem;\n }\n .mc-tooltip--left .mc-tooltip__content {\n -webkit-transform: translate(-100%, -50%);\n -ms-transform: translate(-100%, -50%);\n transform: translate(-100%, -50%);\n margin-left: -0.75rem;\n }\n .mc-tooltip--bottom .mc-tooltip__content {\n -webkit-transform: translate(-50%, 100%);\n -ms-transform: translate(-50%, 100%);\n transform: translate(-50%, 100%);\n margin-bottom: -0.75rem;\n }\n}\n.example {\n padding: 3rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}"}}},{"node":{"id":"a97deb27-a6d7-5fe1-aff6-a860bbd9d473","path":"src/docs/Components/Tabs/previews/tabs-fullwidth","codes":{"js":"","html":"
\n
\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.tabs';\n\n.example {\n margin: $mu200 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tabs {\n background-color: #ffffff;\n position: relative;\n width: 100%;\n}\n.mc-tabs::before {\n bottom: 0;\n -webkit-box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n}\n.mc-tabs--no-shadow::before {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__nav {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-top: 0;\n margin-bottom: 0;\n}\n.mc-tabs__nav, .mc-tabs__select {\n position: relative;\n}\n.mc-tabs__link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.125;\n position: relative;\n background: none;\n border: none;\n border-bottom: 0.125rem solid transparent;\n color: #222020;\n cursor: pointer;\n display: block;\n outline: none;\n padding: 1.1875rem 1.5rem 1.0625rem;\n text-decoration: none;\n}\n.mc-tabs__link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n bottom: -0.125rem;\n top: -0.125rem;\n}\n.mc-tabs__link:active, .mc-tabs__link--selected {\n color: #78be20;\n}\n.mc-tabs__link:focus, .mc-tabs__link:hover {\n color: #41a017;\n}\n.mc-tabs__link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-tabs__link--selected {\n border-bottom-color: #78be20;\n}\n.mc-tabs__link--selected:focus, .mc-tabs__link--selected:hover {\n border-bottom-color: #41a017;\n}\n.mc-tabs__link--disabled {\n cursor: not-allowed;\n}\n.mc-tabs__link--disabled, .mc-tabs__link--disabled:hover, .mc-tabs__link--disabled:focus, .mc-tabs__link--disabled:active {\n color: #6f676c;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__link--disabled.mc-tabs__link--selected {\n color: #cbe3b5;\n border-bottom-color: #cbe3b5;\n}\n.mc-tabs--dropdown {\n padding: 1rem;\n width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tabs {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-tabs--full, .mc-tabs--full-centered {\n width: 100%;\n }\n .mc-tabs--full-centered {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n\n@media screen and (max-width: 679px) {\n .mc-tabs:not(.mc-tabs--dropdown)::before {\n bottom: 0.125rem;\n }\n .mc-tabs__nav {\n overflow-x: auto;\n white-space: nowrap;\n }\n .mc-tabs__item {\n padding: 0.125rem;\n }\n}\n.example {\n margin: 2rem 0;\n}"}}},{"node":{"id":"4c11886d-fe7c-5dd1-b034-dcfd79220b32","path":"src/docs/Components/Tabs/previews/tabs-default","codes":{"js":"","html":"
\n
\n
    \n
  • \n \n Tab one selected\n \n
    • \n
  • \n \n Tab two\n \n
    • \n
  • \n \n
    • \n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.tabs';\n\n.example {\n display: flex;\n justify-content: center;\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tabs {\n background-color: #ffffff;\n position: relative;\n width: 100%;\n}\n.mc-tabs::before {\n bottom: 0;\n -webkit-box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n}\n.mc-tabs--no-shadow::before {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__nav {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-top: 0;\n margin-bottom: 0;\n}\n.mc-tabs__nav, .mc-tabs__select {\n position: relative;\n}\n.mc-tabs__link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.125;\n position: relative;\n background: none;\n border: none;\n border-bottom: 0.125rem solid transparent;\n color: #222020;\n cursor: pointer;\n display: block;\n outline: none;\n padding: 1.1875rem 1.5rem 1.0625rem;\n text-decoration: none;\n}\n.mc-tabs__link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n bottom: -0.125rem;\n top: -0.125rem;\n}\n.mc-tabs__link:active, .mc-tabs__link--selected {\n color: #78be20;\n}\n.mc-tabs__link:focus, .mc-tabs__link:hover {\n color: #41a017;\n}\n.mc-tabs__link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-tabs__link--selected {\n border-bottom-color: #78be20;\n}\n.mc-tabs__link--selected:focus, .mc-tabs__link--selected:hover {\n border-bottom-color: #41a017;\n}\n.mc-tabs__link--disabled {\n cursor: not-allowed;\n}\n.mc-tabs__link--disabled, .mc-tabs__link--disabled:hover, .mc-tabs__link--disabled:focus, .mc-tabs__link--disabled:active {\n color: #6f676c;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__link--disabled.mc-tabs__link--selected {\n color: #cbe3b5;\n border-bottom-color: #cbe3b5;\n}\n.mc-tabs--dropdown {\n padding: 1rem;\n width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tabs {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-tabs--full, .mc-tabs--full-centered {\n width: 100%;\n }\n .mc-tabs--full-centered {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n\n@media screen and (max-width: 679px) {\n .mc-tabs:not(.mc-tabs--dropdown)::before {\n bottom: 0.125rem;\n }\n .mc-tabs__nav {\n overflow-x: auto;\n white-space: nowrap;\n }\n .mc-tabs__item {\n padding: 0.125rem;\n }\n}\n.example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 2rem;\n}"}}},{"node":{"id":"ad3ea000-c23d-5d04-b8fa-79576e625bdb","path":"src/docs/Components/Tabs/previews/tabs-no-shadow","codes":{"js":"","html":"
\n
\n
    \n
  • \n \n Tab one selected\n \n
    • \n
  • \n \n Tab two\n \n
    • \n
  • \n \n
    • \n
\n
\n\n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.tabs';\n\n.example {\n display: flex;\n flex-direction: column;\n justify-content: center;\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tabs {\n background-color: #ffffff;\n position: relative;\n width: 100%;\n}\n.mc-tabs::before {\n bottom: 0;\n -webkit-box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n}\n.mc-tabs--no-shadow::before {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__nav {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-top: 0;\n margin-bottom: 0;\n}\n.mc-tabs__nav, .mc-tabs__select {\n position: relative;\n}\n.mc-tabs__link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.125;\n position: relative;\n background: none;\n border: none;\n border-bottom: 0.125rem solid transparent;\n color: #222020;\n cursor: pointer;\n display: block;\n outline: none;\n padding: 1.1875rem 1.5rem 1.0625rem;\n text-decoration: none;\n}\n.mc-tabs__link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n bottom: -0.125rem;\n top: -0.125rem;\n}\n.mc-tabs__link:active, .mc-tabs__link--selected {\n color: #78be20;\n}\n.mc-tabs__link:focus, .mc-tabs__link:hover {\n color: #41a017;\n}\n.mc-tabs__link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-tabs__link--selected {\n border-bottom-color: #78be20;\n}\n.mc-tabs__link--selected:focus, .mc-tabs__link--selected:hover {\n border-bottom-color: #41a017;\n}\n.mc-tabs__link--disabled {\n cursor: not-allowed;\n}\n.mc-tabs__link--disabled, .mc-tabs__link--disabled:hover, .mc-tabs__link--disabled:focus, .mc-tabs__link--disabled:active {\n color: #6f676c;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__link--disabled.mc-tabs__link--selected {\n color: #cbe3b5;\n border-bottom-color: #cbe3b5;\n}\n.mc-tabs--dropdown {\n padding: 1rem;\n width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tabs {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-tabs--full, .mc-tabs--full-centered {\n width: 100%;\n }\n .mc-tabs--full-centered {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n\n@media screen and (max-width: 679px) {\n .mc-tabs:not(.mc-tabs--dropdown)::before {\n bottom: 0.125rem;\n }\n .mc-tabs__nav {\n overflow-x: auto;\n white-space: nowrap;\n }\n .mc-tabs__item {\n padding: 0.125rem;\n }\n}\n.example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 2rem;\n}"}}},{"node":{"id":"0c63e69e-5d08-5966-82bf-e8be174d6fa5","path":"src/docs/Components/RatingStars/previews/stars-input-basic","codes":{"js":"","html":"
\n
\n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n
\n
","scss":"@import 'settings-tools/_all-settings';\n@import 'components/_c.stars-input';\n\n.example {\n display: block;\n padding: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-input {\n height: 1.5rem;\n width: 7.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n.mc-stars-input__text, .mc-stars-input__radio {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-input__radio::-ms-check {\n display: none;\n}\n.mc-stars-input__label {\n width: 1.5rem;\n height: 1.5rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x center center;\n border-radius: 4px;\n background-size: 1.5rem 1.5rem;\n cursor: pointer;\n}\n.mc-stars-input__label::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmZmMxN2QiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left center;\n background-size: 1.5rem 1.5rem;\n content: \"\";\n left: 0;\n top: 0;\n bottom: 0;\n display: block;\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.mc-stars-input__label:nth-of-type(5)::before {\n width: 80%;\n}\n.mc-stars-input__label:nth-of-type(4)::before {\n width: 60%;\n}\n.mc-stars-input__label:nth-of-type(3)::before {\n width: 40%;\n}\n.mc-stars-input__label:nth-of-type(2)::before {\n width: 20%;\n}\n.mc-stars-input__label:nth-of-type(1)::before {\n width: 0%;\n}\n:checked ~ .mc-stars-input__label, :focus ~ .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n:checked + .mc-stars-input__label, :focus + .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n:focus + .mc-stars-input__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-stars-input__radio:hover ~ .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n.mc-stars-input__radio:hover + .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmZmMxN2QiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n.mc-stars-input__radio:hover + .mc-stars-input__label::before {\n opacity: 1;\n}\n.mc-stars-input--s {\n height: 1rem;\n width: 5rem;\n}\n.mc-stars-input--s .mc-stars-input__label {\n width: 1rem;\n height: 1rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-input--s .mc-stars-input__label::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-input--l {\n height: 2rem;\n width: 10rem;\n}\n.mc-stars-input--l .mc-stars-input__label {\n width: 2rem;\n height: 2rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-input--l .mc-stars-input__label::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-input--xl {\n height: 2.5rem;\n width: 12.5rem;\n}\n.mc-stars-input--xl .mc-stars-input__label {\n width: 2.5rem;\n height: 2.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-input--xl .mc-stars-input__label::before {\n background-size: 2.5rem 2.5rem;\n}\n.example {\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"f37be76c-da9f-5249-9358-7c02787fc81f","path":"src/docs/Components/RatingStars/previews/stars-input-all-sizes","codes":{"js":"","html":"
\r\n
\r\n
\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n\r\n
\r\n
\r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n\r\n \r\n \r\n
\r\n
\r\n
","scss":"@import 'settings-tools/_all-settings';\r\n@import 'components/_c.stars-input';\r\n\r\n.example {\r\n display: block;\r\n padding: 0 $mu150;\r\n\r\n &__item {\r\n margin: $mu150 auto;\r\n }\r\n}\r\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mc-stars-input {\n height: 1.5rem;\n width: 7.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n.mc-stars-input__text, .mc-stars-input__radio {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-stars-input__radio::-ms-check {\n display: none;\n}\n.mc-stars-input__label {\n width: 1.5rem;\n height: 1.5rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x center center;\n border-radius: 4px;\n background-size: 1.5rem 1.5rem;\n cursor: pointer;\n}\n.mc-stars-input__label::before {\n background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmZmMxN2QiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=') repeat-x left center;\n background-size: 1.5rem 1.5rem;\n content: \"\";\n left: 0;\n top: 0;\n bottom: 0;\n display: block;\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.mc-stars-input__label:nth-of-type(5)::before {\n width: 80%;\n}\n.mc-stars-input__label:nth-of-type(4)::before {\n width: 60%;\n}\n.mc-stars-input__label:nth-of-type(3)::before {\n width: 40%;\n}\n.mc-stars-input__label:nth-of-type(2)::before {\n width: 20%;\n}\n.mc-stars-input__label:nth-of-type(1)::before {\n width: 0%;\n}\n:checked ~ .mc-stars-input__label, :focus ~ .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n:checked + .mc-stars-input__label, :focus + .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmYzk2MWUiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n:focus + .mc-stars-input__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-stars-input__radio:hover ~ .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNkM2QyZDYiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n.mc-stars-input__radio:hover + .mc-stars-input__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiNmZmMxN2QiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDI0LjU2TDcuOTcgMjlsMS41My05LjQxTDMgMTIuOTNsOC45OC0xLjM3TDE2IDNsNC4wMiA4LjU2TDI5IDEyLjkzbC02LjUgNi42NkwyNC4wMyAyOSAxNiAyNC41NnoiLz48L3N2Zz4=');\n}\n.mc-stars-input__radio:hover + .mc-stars-input__label::before {\n opacity: 1;\n}\n.mc-stars-input--s {\n height: 1rem;\n width: 5rem;\n}\n.mc-stars-input--s .mc-stars-input__label {\n width: 1rem;\n height: 1rem;\n /* fix for ie11 */\n background-size: 1rem 1rem;\n}\n.mc-stars-input--s .mc-stars-input__label::before {\n background-size: 1rem 1rem;\n}\n.mc-stars-input--l {\n height: 2rem;\n width: 10rem;\n}\n.mc-stars-input--l .mc-stars-input__label {\n width: 2rem;\n height: 2rem;\n /* fix for ie11 */\n background-size: 2rem 2rem;\n}\n.mc-stars-input--l .mc-stars-input__label::before {\n background-size: 2rem 2rem;\n}\n.mc-stars-input--xl {\n height: 2.5rem;\n width: 12.5rem;\n}\n.mc-stars-input--xl .mc-stars-input__label {\n width: 2.5rem;\n height: 2.5rem;\n /* fix for ie11 */\n background-size: 2.5rem 2.5rem;\n}\n.mc-stars-input--xl .mc-stars-input__label::before {\n background-size: 2.5rem 2.5rem;\n}\n.example {\n display: block;\n padding: 0 1.5rem;\n}\n.example__item {\n margin: 1.5rem auto;\n}"}}},{"node":{"id":"6344e019-6160-5a4f-b48b-fa2e780d3c1d","path":"src/docs/Components/Pagination/previews/pagination-light","codes":{"js":"","html":"
\n
\n \n \n \n \n \n\n \n \n \n \n \n
\n
\n\n\n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.pagination';\n\n.example {\n margin: $mu100;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-pagination {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.mc-pagination__button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #887f87;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 0;\n min-height: 3rem;\n min-width: 3rem;\n}\n.mc-pagination__button.is-hover,\n.mc-pagination__button:hover {\n background-color: #554f52;\n color: #ffffff;\n}\n\n.mc-pagination__button.is-active,\n.mc-pagination__button:active {\n background-color: #3c3738;\n}\n\n.mc-pagination__button.is-disabled,\n.mc-pagination__button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-pagination__button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__button {\n min-height: 2rem;\n min-width: 2rem;\n }\n}\n.mc-pagination__button-icon {\n height: 2rem;\n margin: 0;\n width: 2rem;\n fill: currentColor;\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__button-icon {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n.mc-pagination__button-hidden {\n display: none;\n}\n.mc-pagination__field {\n margin: 0 1.5rem;\n}\n.mc-pagination__select {\n font-size: 1rem;\n line-height: 1.125;\n padding: 0.875rem 3rem 0.875rem calc(0.75rem - 1px);\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__select {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n padding: calc(0.5rem - 1px) 2.25rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n}\n.mc-pagination--light .mc-pagination__button:first-child {\n margin-right: 1.5rem;\n}\n\n.example {\n margin: 1rem;\n}"}}},{"node":{"id":"2ddd0f58-c073-5403-9293-bcb8bff42163","path":"src/docs/Components/Layers/previews/without-footer","codes":{"js":"","html":"
\n \n
\n
\n

Layer Title

\n \n
\n
\n
\n \n
\n
\n
\n
\n
\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}"}}},{"node":{"id":"d6da66b5-142c-5c38-af50-ef101aa68202","path":"src/docs/Components/Form/Select/previews/select-all-states","codes":{"js":"","html":"\n
\n
\n Default Select\n
\n\n
\n \n
\n\n
\n \n
\n\n
\n Valid Select\n
\n\n
\n \n
\n\n
\n \n
\n\n
\n Invalid Select\n
\n\n
\n \n
\n\n
\n \n
\n\n
\n Disabled select\n
\n\n
\n \n
\n\n
\n \n
\n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n\n.example {\n @include set-font-face('regular');\n\n text-align: center;\n margin: auto;\n width: 90%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n text-align: center;\n margin: auto;\n width: 90%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"ffff93e4-5b2a-5af9-aa56-8eceb0e82950","path":"src/docs/Components/Links/previews/link-dont","codes":{"js":"","html":"
\n

\n You must always use the native link in a paragraph like this :\n Native link.
\n The component link must live alone, like this one :\n

\n
\n
\n \n \n \n \n I'm alone, but it's not sad\n \n
\n\n\n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\n.example {\n @include set-font-face('regular');\n\n text-align: left;\n margin: $mu100;\n display: flex;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n text-align: left;\n margin: 1rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}"}}},{"node":{"id":"c2d287c3-1213-5fcc-ae51-9f17b88c5ae7","path":"src/docs/Components/Links/previews/link-default","codes":{"js":"","html":"
\n Default link\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n text-align: center;\n margin: $mu100 auto;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n text-align: center;\n margin: 1rem auto;\n}"}}},{"node":{"id":"2229d6cc-c6e1-576b-aa17-26816b58d7ae","path":"src/docs/Components/Links/previews/link-icon-left","codes":{"js":"","html":"
\n \n \n \n \n link with icon left\n \n
\n\n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n text-align: left;\n margin: $mu100;\n display: flex;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n text-align: left;\n margin: 1rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}"}}},{"node":{"id":"9ddf52b5-c706-59f9-a9b9-a3a7b0671ce5","path":"src/docs/Components/Links/previews/link-icon-only","codes":{"js":"","html":"
\n \n \n \n \n \n
\n\n\n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n text-align: left;\n margin: $mu100;\n display: flex;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n text-align: left;\n margin: 1rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}"}}},{"node":{"id":"ed2d95b9-2797-5336-955f-07e636415f36","path":"src/docs/Components/Links/previews/link-icon-right","codes":{"js":"","html":"
\n \n link with icon right\n \n \n \n \n
\n\n\n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n text-align: left;\n margin: $mu100;\n display: flex;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n text-align: left;\n margin: 1rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}"}}},{"node":{"id":"0b6c57a0-b6d4-5a2a-8fc4-6be7bbc22741","path":"src/docs/Components/Links/previews/link-icon","codes":{"js":"","html":"
\n \n \n \n \n Small link icon left\n \n\n \n Small link icon right\n \n \n \n \n
\n\n
\n \n \n \n \n Default link icon left\n \n \n Default link icon right\n \n \n \n \n
\n\n\n \n \n \n\n\n\n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n text-align: left;\n margin: $mu200;\n display: flex;\n justify-content: space-between;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n text-align: left;\n margin: 2rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}"}}},{"node":{"id":"fc9d7c76-0592-5681-827c-63304f5aa7ef","path":"src/docs/Components/Links/previews/link-sizes","codes":{"js":"","html":"
\n \n Small link\n \n
\n
\n \n Medium link\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n text-align: left;\n margin: $mu100 auto;\n display: flex;\n justify-content: center;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n text-align: left;\n margin: 1rem auto;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}"}}},{"node":{"id":"ec2d2257-94a1-5e4c-ad00-88772a4fabeb","path":"src/docs/Components/Links/previews/contextual-links","codes":{"js":"","html":"
\n \n Light link\n \n
\n
\n \n Primary link\n \n
\n
\n \n Primary-02 link\n \n
\n
\n \n Danger link\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n margin: $mu100 auto;\n display: flex;\n justify-content: center;\n\n &__bg-dark {\n background-color: black;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n margin: 1rem auto;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.example__bg-dark {\n background-color: black;\n}"}}},{"node":{"id":"0f7d0980-53e6-52bb-8708-8e9d93933e4e","path":"src/docs/Components/Links/previews/link-error-and-light","codes":{"js":"","html":"
\n \n Light link\n \n
\n
\n \n Danger link\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n margin: $mu100 auto;\n display: flex;\n justify-content: center;\n\n &__bg-dark {\n background-color: black;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n margin: 1rem auto;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.example__bg-dark {\n background-color: black;\n}"}}},{"node":{"id":"39c46878-4ed8-5332-8a9a-6d2da5cc1708","path":"src/docs/Components/Links/previews/link-styles","codes":{"js":"","html":"
\n \n Default link\n \n
\n
\n \n Light link\n \n
\n
\n \n Primary link\n \n
\n
\n \n Primary-02 link\n \n
\n
\n \n Danger link\n \n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n margin: $mu100 auto;\n display: flex;\n justify-content: center;\n\n &__bg-dark {\n background-color: black;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n margin: 1rem auto;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.example__bg-dark {\n background-color: black;\n}"}}},{"node":{"id":"2b43c122-d420-5072-9173-54f9f5b8352f","path":"src/docs/Components/Links/previews/link-state","codes":{"js":"","html":"
\n
\n

Hover

\n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n
\n
\n

Active

\n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n
\n
\n

Visited

\n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n
\n
\n

Disabled

\n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n \n Link\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n @include set-font-scale('05');\n}\n\n.example {\n display: flex;\n width: 90%;\n margin: auto;\n text-align: center;\n justify-content: center;\n\n &__col-title {\n @include set-font-face('regular');\n }\n\n &__col {\n flex: 0 1 33%;\n box-sizing: border-box;\n padding: 0 $mu100;\n }\n\n &__item {\n width: 100%;\n display: block;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 90%;\n margin: auto;\n text-align: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.example__col-title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.example__col {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 33%;\n flex: 0 1 33%;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n padding: 0 1rem;\n}\n.example__item {\n width: 100%;\n display: block;\n}"}}},{"node":{"id":"81b41011-7da3-5f14-b7c4-4088e97cc52e","path":"src/docs/Components/Form/Toggle/previews/Toggle-item","codes":{"js":"","html":"
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"3ba02f26-2548-5ed3-a876-7b6bb3623805","path":"src/docs/Components/Form/Toggle/previews/Toggle","codes":{"js":"","html":"
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"f23c2c94-9191-520b-9157-086176477de1","path":"src/docs/Components/Form/Toggle/previews/toggle-default","codes":{"js":"","html":"
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"d1c85c9e-724f-5f32-8e04-8fd3d7e8c96a","path":"src/docs/Components/Form/Toggle/previews/toggle-sizes","codes":{"js":"","html":"
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"2b82975c-372d-5c3b-b724-4a56bd2cff6a","path":"src/docs/Components/Form/Toggle/previews/toggle-states-label","codes":{"js":"","html":"
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"4b8534f3-1cdc-50a7-8920-4d567785722e","path":"src/docs/Components/Form/Toggle/previews/toggle-states","codes":{"js":"","html":"
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"d8bc9480-9f0c-5a70-8c97-1907d2d468bd","path":"src/docs/Components/Form/Toggle/previews/toggle-default-2lines","codes":{"js":"","html":"
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n\n.mc-toggle__label {\n max-width: 300px;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}\n\n.mc-toggle__label {\n max-width: 300px;\n}"}}},{"node":{"id":"04df4f7f-5cf6-572f-af2d-c490bcfe1960","path":"src/docs/Components/Links/previews/link-inline-default","codes":{"js":"","html":"
\n

\n This is an example of a paragraph that contains an inline\n link\n that inherits its context in terms of font styles,
but\n it will be always dark.\n

\n

\n This is an example of a paragraph that contains an inline\n link that inherits its context in terms of\n font styles,
but it will be always dark.\n

\n

\n This is an example of a paragraph that contains an inline\n link that inherits its context in terms of\n font styles,
but it will be always dark.\n

\n

\n This is an example of a paragraph that contains an inline\n link that inherits its context in terms of\n font styles,
but it will be always dark.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n\nbody {\n @include set-font-face('regular');\n}\n\n.example {\n margin: $mu100 auto;\n display: flex;\n justify-content: space-around;\n flex-direction: row;\n\n &__dark {\n @include set-font-scale('04');\n\n padding: $mu200;\n color: $color-grey-900;\n }\n\n &__green {\n @include set-font-scale('05');\n\n padding: $mu200;\n color: $color-primary-01-500;\n }\n\n &__grey {\n @include set-font-scale('06');\n\n padding: $mu200;\n color: $color-grey-500;\n }\n\n &__red {\n @include set-font-scale('07');\n\n padding: $mu200;\n color: $color-secondary-red-500;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n\n.example {\n margin: 1rem auto;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-pack: distribute;\n justify-content: space-around;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n.example__dark {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n padding: 2rem;\n color: #222020;\n}\n.example__green {\n font-size: 1rem;\n line-height: 1.5;\n padding: 2rem;\n color: #78be20;\n}\n.example__grey {\n font-size: 1.125rem;\n line-height: 1.5555555556;\n padding: 2rem;\n color: #887f87;\n}\n.example__red {\n font-size: 1.4375rem;\n line-height: 1.5652173913;\n padding: 2rem;\n color: #df382b;\n}"}}},{"node":{"id":"ecb0dce3-ac42-5e36-9547-e6381b46686b","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeading-base","codes":{"js":"","html":"
\n

\n The quick brown fox jumps over the lazy dog.\n

\n
\n

\n The quick brown fox jumps over the lazy dog.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}"}}},{"node":{"id":"68d0102f-6c14-5aa4-a35e-b7b13196ff8e","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeading-alignment","codes":{"js":"","html":"
\n \n mt-heading--left\n \n\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n mt-heading--center\n \n\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n mt-heading--right\n \n\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n\n &__modifier {\n @include set-font-scale('03', 's');\n\n margin-top: $mu200;\n font-family: monospace;\n display: inline-block;\n padding: 0 $mu050;\n box-shadow: inset 0 0 0 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}\n.example__modifier {\n font-size: 0.8125rem;\n line-height: 1.2307692308;\n margin-top: 2rem;\n font-family: monospace;\n display: inline-block;\n padding: 0 0.5rem;\n -webkit-box-shadow: inset 0 0 0 1px #d3d2d6;\n box-shadow: inset 0 0 0 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"75ec4a2e-a36e-514a-821d-2ce02efefe0c","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeading-colors","codes":{"js":"","html":"
\n \n default\n \n\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n mt-heading--lightest\n \n
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n\n &__reverted {\n background: $color-grey-900;\n padding: $mu100;\n }\n\n &__modifier {\n @include set-font-scale('03', 's');\n\n margin-top: $mu200;\n font-family: monospace;\n display: inline-block;\n padding: 0 $mu050;\n box-shadow: inset 0 0 0 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}\n.example__reverted {\n background: #222020;\n padding: 1rem;\n}\n.example__modifier {\n font-size: 0.8125rem;\n line-height: 1.2307692308;\n margin-top: 2rem;\n font-family: monospace;\n display: inline-block;\n padding: 0 0.5rem;\n -webkit-box-shadow: inset 0 0 0 1px #d3d2d6;\n box-shadow: inset 0 0 0 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"962cbaea-27b1-5988-a989-4b1730b8790a","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeading-underlines","codes":{"js":"","html":"
\n \n mt-heading--underline\n \n\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n mt-heading--underline\n \n
\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n\n \n mt-heading--underline mt-heading--line-primary-01-200\n \n
\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n\n \n mt-heading--underline mt-heading--line-primary-02-600\n \n\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n mt-heading--underline mt-heading--line-primary-02-200\n \n
\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n\n &__reverted {\n background: $color-grey-900;\n padding: $mu100;\n }\n\n &__reverted-02 {\n background: $color-primary-01-500;\n padding: $mu100;\n }\n\n &__modifier {\n @include set-font-scale('03', 's');\n\n margin-top: $mu200;\n font-family: monospace;\n display: inline-block;\n padding: 0 $mu050;\n box-shadow: inset 0 0 0 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}\n.example__reverted {\n background: #222020;\n padding: 1rem;\n}\n.example__reverted-02 {\n background: #78be20;\n padding: 1rem;\n}\n.example__modifier {\n font-size: 0.8125rem;\n line-height: 1.2307692308;\n margin-top: 2rem;\n font-family: monospace;\n display: inline-block;\n padding: 0 0.5rem;\n -webkit-box-shadow: inset 0 0 0 1px #d3d2d6;\n box-shadow: inset 0 0 0 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"8e17fd1c-d4d1-5c9b-8247-7da9982f30ce","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeading-sizes","codes":{"js":"","html":"
\n
\n heading s\n
\n\n mt-heading mt-heading--s\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n
\n heading m\n
\n mt-heading mt-heading--m\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n
\n heading l\n
\n\n mt-heading mt-heading--l\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n\n &:first-child {\n margin: 0 0 $mu100;\n }\n }\n\n &__modifier {\n @include set-font-scale('03', 's');\n\n margin-top: $mu200;\n font-family: monospace;\n display: inline-block;\n padding: 0 $mu050;\n box-shadow: inset 0 0 0 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__title:first-child {\n margin: 0 0 1rem;\n}\n.example__modifier {\n font-size: 0.8125rem;\n line-height: 1.2307692308;\n margin-top: 2rem;\n font-family: monospace;\n display: inline-block;\n padding: 0 0.5rem;\n -webkit-box-shadow: inset 0 0 0 1px #d3d2d6;\n box-shadow: inset 0 0 0 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"0e60c172-a264-5785-ad47-9cd56e514b0d","path":"src/docs/Components/Form/TextInput/previews/input-default-disabled","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"b122e769-4863-5479-b886-a4a7b83fc03d","path":"src/docs/Components/Form/TextInput/previews/input-default-event","codes":{"js":"","html":"
\n \n
\n
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"cd54fd84-8fdf-5cae-a706-00ce86bc3ab7","path":"src/docs/Components/Form/TextInput/previews/input-disabled-state","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu100 0;\n padding: 0 $mu400;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 1rem 0;\n padding: 0 4rem;\n}"}}},{"node":{"id":"2494a04b-e2fb-5a27-a947-8c664d76ed7d","path":"src/docs/Components/Form/TextInput/previews/input-hover-state","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu100 0;\n padding: 0 $mu400;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 1rem 0;\n padding: 0 4rem;\n}"}}},{"node":{"id":"19f27be1-bbee-5513-b33c-311e43f504cb","path":"src/docs/Components/Form/TextInput/previews/input-invalid-event","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"4519e602-bcea-5761-a4b3-613b9a6a6331","path":"src/docs/Components/Form/TextInput/previews/input-invalid-state","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu100 0;\n padding: 0 $mu400;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 1rem 0;\n padding: 0 4rem;\n}"}}},{"node":{"id":"6f2cce13-efc8-502d-8b02-e216cad58fa1","path":"src/docs/Components/Form/TextInput/previews/input-invalid","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"28df118c-515e-56b2-8761-29fa4119e277","path":"src/docs/Components/Form/TextInput/previews/input-preview","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu100 0;\n padding: 0 $mu400;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 1rem 0;\n padding: 0 4rem;\n}"}}},{"node":{"id":"8c3232fa-b823-54f4-ad8c-a48d2b82c2cd","path":"src/docs/Components/Form/TextInput/previews/input-focus-state","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu100 0;\n padding: 0 $mu400;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 1rem 0;\n padding: 0 4rem;\n}"}}},{"node":{"id":"372dcc64-0576-5f10-83f4-7413d38cc679","path":"src/docs/Components/Form/TextInput/previews/input-small-state","codes":{"js":"","html":"
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"7b82bdd9-155e-5cdc-a1d9-1f68df0d43d8","path":"src/docs/Components/Form/TextInput/previews/input-valid-event","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"e9b0bc78-8ae6-5c64-9173-d92dfd167298","path":"src/docs/Components/Form/TextInput/previews/input-state","codes":{"js":"","html":"
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"9338f4b3-ac4d-5920-8043-f2b530f78bd0","path":"src/docs/Components/Form/TextInput/previews/input-valid-state","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu100 0;\n padding: 0 $mu400;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 1rem 0;\n padding: 0 4rem;\n}"}}},{"node":{"id":"626e42e5-0744-545d-b5f9-c46b0745180a","path":"src/docs/Components/Form/TextInput/previews/input-valid","codes":{"js":"","html":"
\n \n
","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n\n.example {\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.example {\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"4084b350-1d81-5669-bc96-ae68d88a62ff","path":"src/docs/Components/Form/Toggle/previews/toggle-extend-sizes","codes":{"js":"","html":"
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n$toggle-sizes: map-merge(\n $toggle-sizes,\n (\n 'xs': (\n 'width': 2,\n 'height': 1,\n ),\n 'l': (\n 'width': 6,\n 'height': 3,\n ),\n )\n);\n\n@import 'components/_c.toggle';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n.mc-toggle--xs .mc-toggle__label {\n height: 1rem;\n padding-left: 2.75rem;\n}\n.mc-toggle--xs .mc-toggle__label::before, .mc-toggle--xs .mc-toggle__label::after {\n border-radius: 1rem;\n height: 1rem;\n}\n.mc-toggle--xs .mc-toggle__label::before {\n width: 2rem;\n}\n.mc-toggle--xs .mc-toggle__label::after {\n width: 1rem;\n}\n.mc-toggle--l .mc-toggle__label {\n height: 3rem;\n padding-left: 6.75rem;\n}\n.mc-toggle--l .mc-toggle__label::before, .mc-toggle--l .mc-toggle__label::after {\n border-radius: 3rem;\n height: 3rem;\n}\n.mc-toggle--l .mc-toggle__label::before {\n width: 6rem;\n}\n.mc-toggle--l .mc-toggle__label::after {\n width: 3rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-m .mc-toggle__label {\n height: 1rem;\n padding-left: 2.75rem;\n }\n .mc-toggle--xs\\@from-m .mc-toggle__label::before, .mc-toggle--xs\\@from-m .mc-toggle__label::after {\n border-radius: 1rem;\n height: 1rem;\n }\n .mc-toggle--xs\\@from-m .mc-toggle__label::before {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-m .mc-toggle__label::after {\n width: 1rem;\n }\n .mc-toggle--l\\@from-m .mc-toggle__label {\n height: 3rem;\n padding-left: 6.75rem;\n }\n .mc-toggle--l\\@from-m .mc-toggle__label::before, .mc-toggle--l\\@from-m .mc-toggle__label::after {\n border-radius: 3rem;\n height: 3rem;\n }\n .mc-toggle--l\\@from-m .mc-toggle__label::before {\n width: 6rem;\n }\n .mc-toggle--l\\@from-m .mc-toggle__label::after {\n width: 3rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-l .mc-toggle__label {\n height: 1rem;\n padding-left: 2.75rem;\n }\n .mc-toggle--xs\\@from-l .mc-toggle__label::before, .mc-toggle--xs\\@from-l .mc-toggle__label::after {\n border-radius: 1rem;\n height: 1rem;\n }\n .mc-toggle--xs\\@from-l .mc-toggle__label::before {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-l .mc-toggle__label::after {\n width: 1rem;\n }\n .mc-toggle--l\\@from-l .mc-toggle__label {\n height: 3rem;\n padding-left: 6.75rem;\n }\n .mc-toggle--l\\@from-l .mc-toggle__label::before, .mc-toggle--l\\@from-l .mc-toggle__label::after {\n border-radius: 3rem;\n height: 3rem;\n }\n .mc-toggle--l\\@from-l .mc-toggle__label::before {\n width: 6rem;\n }\n .mc-toggle--l\\@from-l .mc-toggle__label::after {\n width: 3rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-xl .mc-toggle__label {\n height: 1rem;\n padding-left: 2.75rem;\n }\n .mc-toggle--xs\\@from-xl .mc-toggle__label::before, .mc-toggle--xs\\@from-xl .mc-toggle__label::after {\n border-radius: 1rem;\n height: 1rem;\n }\n .mc-toggle--xs\\@from-xl .mc-toggle__label::before {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-xl .mc-toggle__label::after {\n width: 1rem;\n }\n .mc-toggle--l\\@from-xl .mc-toggle__label {\n height: 3rem;\n padding-left: 6.75rem;\n }\n .mc-toggle--l\\@from-xl .mc-toggle__label::before, .mc-toggle--l\\@from-xl .mc-toggle__label::after {\n border-radius: 3rem;\n height: 3rem;\n }\n .mc-toggle--l\\@from-xl .mc-toggle__label::before {\n width: 6rem;\n }\n .mc-toggle--l\\@from-xl .mc-toggle__label::after {\n width: 3rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-xxl .mc-toggle__label {\n height: 1rem;\n padding-left: 2.75rem;\n }\n .mc-toggle--xs\\@from-xxl .mc-toggle__label::before, .mc-toggle--xs\\@from-xxl .mc-toggle__label::after {\n border-radius: 1rem;\n height: 1rem;\n }\n .mc-toggle--xs\\@from-xxl .mc-toggle__label::before {\n width: 2rem;\n }\n .mc-toggle--xs\\@from-xxl .mc-toggle__label::after {\n width: 1rem;\n }\n .mc-toggle--l\\@from-xxl .mc-toggle__label {\n height: 3rem;\n padding-left: 6.75rem;\n }\n .mc-toggle--l\\@from-xxl .mc-toggle__label::before, .mc-toggle--l\\@from-xxl .mc-toggle__label::after {\n border-radius: 3rem;\n height: 3rem;\n }\n .mc-toggle--l\\@from-xxl .mc-toggle__label::before {\n width: 6rem;\n }\n .mc-toggle--l\\@from-xxl .mc-toggle__label::after {\n width: 3rem;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"ee748a01-ea0b-5b16-a415-b6eb12bf025e","path":"src/docs/Components/Tag/previews/TagList","codes":{"js":"","html":"
\n
    \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
  • \n \n \n \n \n
    • \n
\n
\n","scss":"@import 'settings-tools/_all-settings.scss';\n\n@include import-font-families();\n\n@import 'components/_c.tag.scss';\n\n.example {\n padding: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tag-text {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n background: #ffffff;\n color: #554f52;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n}\n.mc-tag-text::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-text--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n text-decoration: none;\n outline: none;\n background: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n color: #554f52;\n}\n.mc-tag-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link:hover {\n background: #eeeef0;\n}\n.mc-tag-link:active {\n background: #d3d2d6;\n}\n.mc-tag-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-link--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-link--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link--dark:hover {\n background: #3c3738;\n}\n.mc-tag-link--dark:active {\n background: #554f52;\n}\n.mc-tag-selectable {\n display: inline-block;\n white-space: nowrap;\n}\n.mc-tag-selectable__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-selectable__label {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: #d3d2d6;\n color: #222020;\n cursor: pointer;\n}\n.mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable__pill:hover {\n background: #add585;\n}\n.mc-tag-selectable__pill:active {\n background: #41a017;\n}\n:checked + .mc-tag-selectable__pill {\n background: #78be20;\n}\n:focus + .mc-tag-selectable__pill::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n:disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #eeeef0;\n color: #887f87;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill {\n background: #3c3738;\n color: #ffffff;\n cursor: pointer;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:hover {\n background: #78be20;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:active {\n background: #0a601b;\n}\n.mc-tag-selectable--dark :checked + .mc-tag-selectable__pill {\n background: #158110;\n}\n.mc-tag-selectable--dark :disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #554f52;\n color: #887f87;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n background-color: #d3d2d6;\n color: #222020;\n}\n.mc-tag-removable::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n}\n.mc-tag-removable--s .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n}\n.mc-tag-removable--m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable--m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n}\n.mc-tag-removable--dark {\n background-color: #3c3738;\n color: #ffffff;\n}\n.mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable__remove {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n position: relative;\n background-color: #d3d2d6;\n margin: 0;\n display: block;\n border-radius: 50%;\n background-repeat: no-repeat;\n background-position: center;\n}\n.mc-tag-removable__remove::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 50%;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable__remove-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-removable__remove:hover {\n background-color: #bab6bc;\n}\n.mc-tag-removable__remove:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-removable__remove:active {\n background-color: #a19ba2;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjZDNkMmQ2IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n background-color: #3c3738;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:hover {\n background-color: #554f52;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:active {\n background-color: #6f676c;\n}\n.mc-tag-list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-tag-list__item {\n margin: 0 1rem 1rem 0;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tag-text--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-tag-text--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-tag-text--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-tag-text--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n.example {\n padding: 2rem;\n}"}}},{"node":{"id":"bc963c40-065c-5ac7-807b-6ad6fe2cb8be","path":"src/docs/Components/Tag/previews/Tag","codes":{"js":"","html":"
\n
\n \n \n text\n \n \n\n \n \n link\n \n \n\n \n \n \n \n\n \n \n removable\n \n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings.scss';\n\n@include import-font-families();\n\n@import 'components/_c.tag.scss';\n\n.example {\n padding: $mu200;\n\n &__item {\n padding: $mu100;\n\n &--dark {\n background-color: $color-grey-999;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tag-text {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n background: #ffffff;\n color: #554f52;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n}\n.mc-tag-text::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-text--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n text-decoration: none;\n outline: none;\n background: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n color: #554f52;\n}\n.mc-tag-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link:hover {\n background: #eeeef0;\n}\n.mc-tag-link:active {\n background: #d3d2d6;\n}\n.mc-tag-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-link--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-link--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link--dark:hover {\n background: #3c3738;\n}\n.mc-tag-link--dark:active {\n background: #554f52;\n}\n.mc-tag-selectable {\n display: inline-block;\n white-space: nowrap;\n}\n.mc-tag-selectable__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-selectable__label {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: #d3d2d6;\n color: #222020;\n cursor: pointer;\n}\n.mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable__pill:hover {\n background: #add585;\n}\n.mc-tag-selectable__pill:active {\n background: #41a017;\n}\n:checked + .mc-tag-selectable__pill {\n background: #78be20;\n}\n:focus + .mc-tag-selectable__pill::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n:disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #eeeef0;\n color: #887f87;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill {\n background: #3c3738;\n color: #ffffff;\n cursor: pointer;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:hover {\n background: #78be20;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:active {\n background: #0a601b;\n}\n.mc-tag-selectable--dark :checked + .mc-tag-selectable__pill {\n background: #158110;\n}\n.mc-tag-selectable--dark :disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #554f52;\n color: #887f87;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n background-color: #d3d2d6;\n color: #222020;\n}\n.mc-tag-removable::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n}\n.mc-tag-removable--s .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n}\n.mc-tag-removable--m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable--m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n}\n.mc-tag-removable--dark {\n background-color: #3c3738;\n color: #ffffff;\n}\n.mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable__remove {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n position: relative;\n background-color: #d3d2d6;\n margin: 0;\n display: block;\n border-radius: 50%;\n background-repeat: no-repeat;\n background-position: center;\n}\n.mc-tag-removable__remove::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 50%;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable__remove-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-removable__remove:hover {\n background-color: #bab6bc;\n}\n.mc-tag-removable__remove:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-removable__remove:active {\n background-color: #a19ba2;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjZDNkMmQ2IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n background-color: #3c3738;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:hover {\n background-color: #554f52;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:active {\n background-color: #6f676c;\n}\n.mc-tag-list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-tag-list__item {\n margin: 0 1rem 1rem 0;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tag-text--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-tag-text--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-tag-text--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-tag-text--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n.example {\n padding: 2rem;\n}\n.example__item {\n padding: 1rem;\n}\n.example__item--dark {\n background-color: #000000;\n}"}}},{"node":{"id":"0f111677-8d5d-5c98-a516-1be876798753","path":"src/docs/Components/Tag/previews/TagLink","codes":{"js":"","html":"
\n
\n \n \n link\n \n \n
\n
\n \n \n link small\n \n \n
\n
\n \n \n link dark\n \n \n
\n
\n \n \n link small dark\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings.scss';\n\n@include import-font-families();\n\n@import 'components/_c.tag.scss';\n\n.example {\n padding: $mu200;\n\n &__item {\n padding: $mu100;\n\n &--dark {\n background-color: $color-grey-999;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tag-text {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n background: #ffffff;\n color: #554f52;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n}\n.mc-tag-text::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-text--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n text-decoration: none;\n outline: none;\n background: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n color: #554f52;\n}\n.mc-tag-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link:hover {\n background: #eeeef0;\n}\n.mc-tag-link:active {\n background: #d3d2d6;\n}\n.mc-tag-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-link--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-link--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link--dark:hover {\n background: #3c3738;\n}\n.mc-tag-link--dark:active {\n background: #554f52;\n}\n.mc-tag-selectable {\n display: inline-block;\n white-space: nowrap;\n}\n.mc-tag-selectable__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-selectable__label {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: #d3d2d6;\n color: #222020;\n cursor: pointer;\n}\n.mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable__pill:hover {\n background: #add585;\n}\n.mc-tag-selectable__pill:active {\n background: #41a017;\n}\n:checked + .mc-tag-selectable__pill {\n background: #78be20;\n}\n:focus + .mc-tag-selectable__pill::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n:disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #eeeef0;\n color: #887f87;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill {\n background: #3c3738;\n color: #ffffff;\n cursor: pointer;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:hover {\n background: #78be20;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:active {\n background: #0a601b;\n}\n.mc-tag-selectable--dark :checked + .mc-tag-selectable__pill {\n background: #158110;\n}\n.mc-tag-selectable--dark :disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #554f52;\n color: #887f87;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n background-color: #d3d2d6;\n color: #222020;\n}\n.mc-tag-removable::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n}\n.mc-tag-removable--s .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n}\n.mc-tag-removable--m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable--m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n}\n.mc-tag-removable--dark {\n background-color: #3c3738;\n color: #ffffff;\n}\n.mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable__remove {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n position: relative;\n background-color: #d3d2d6;\n margin: 0;\n display: block;\n border-radius: 50%;\n background-repeat: no-repeat;\n background-position: center;\n}\n.mc-tag-removable__remove::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 50%;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable__remove-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-removable__remove:hover {\n background-color: #bab6bc;\n}\n.mc-tag-removable__remove:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-removable__remove:active {\n background-color: #a19ba2;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjZDNkMmQ2IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n background-color: #3c3738;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:hover {\n background-color: #554f52;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:active {\n background-color: #6f676c;\n}\n.mc-tag-list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-tag-list__item {\n margin: 0 1rem 1rem 0;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tag-text--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-tag-text--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-tag-text--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-tag-text--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n.example {\n padding: 2rem;\n}\n.example__item {\n padding: 1rem;\n}\n.example__item--dark {\n background-color: #000000;\n}"}}},{"node":{"id":"34ecd72c-bd89-584d-9d76-448f5f70ebac","path":"src/docs/Components/Tag/previews/TagRemovable","codes":{"js":"","html":"
\n
\n \n \n removable\n \n \n \n Delete tag\n \n \n \n
\n
\n \n \n removable\n \n \n \n Delete tag\n \n \n \n
\n
\n \n \n removable\n \n \n \n Delete Tag\n \n \n \n
\n
\n \n \n removable\n \n \n \n Delete tag\n \n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings.scss';\n\n@include import-font-families();\n\n@import 'components/_c.tag.scss';\n\n.example {\n padding: $mu200;\n\n &__item {\n padding: $mu100;\n\n &--dark {\n background-color: $color-grey-999;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tag-text {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n background: #ffffff;\n color: #554f52;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n}\n.mc-tag-text::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-text--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n text-decoration: none;\n outline: none;\n background: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n color: #554f52;\n}\n.mc-tag-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link:hover {\n background: #eeeef0;\n}\n.mc-tag-link:active {\n background: #d3d2d6;\n}\n.mc-tag-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-link--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-link--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link--dark:hover {\n background: #3c3738;\n}\n.mc-tag-link--dark:active {\n background: #554f52;\n}\n.mc-tag-selectable {\n display: inline-block;\n white-space: nowrap;\n}\n.mc-tag-selectable__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-selectable__label {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: #d3d2d6;\n color: #222020;\n cursor: pointer;\n}\n.mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable__pill:hover {\n background: #add585;\n}\n.mc-tag-selectable__pill:active {\n background: #41a017;\n}\n:checked + .mc-tag-selectable__pill {\n background: #78be20;\n}\n:focus + .mc-tag-selectable__pill::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n:disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #eeeef0;\n color: #887f87;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill {\n background: #3c3738;\n color: #ffffff;\n cursor: pointer;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:hover {\n background: #78be20;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:active {\n background: #0a601b;\n}\n.mc-tag-selectable--dark :checked + .mc-tag-selectable__pill {\n background: #158110;\n}\n.mc-tag-selectable--dark :disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #554f52;\n color: #887f87;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n background-color: #d3d2d6;\n color: #222020;\n}\n.mc-tag-removable::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n}\n.mc-tag-removable--s .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n}\n.mc-tag-removable--m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable--m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n}\n.mc-tag-removable--dark {\n background-color: #3c3738;\n color: #ffffff;\n}\n.mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable__remove {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n position: relative;\n background-color: #d3d2d6;\n margin: 0;\n display: block;\n border-radius: 50%;\n background-repeat: no-repeat;\n background-position: center;\n}\n.mc-tag-removable__remove::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 50%;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable__remove-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-removable__remove:hover {\n background-color: #bab6bc;\n}\n.mc-tag-removable__remove:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-removable__remove:active {\n background-color: #a19ba2;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjZDNkMmQ2IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n background-color: #3c3738;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:hover {\n background-color: #554f52;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:active {\n background-color: #6f676c;\n}\n.mc-tag-list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-tag-list__item {\n margin: 0 1rem 1rem 0;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tag-text--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-tag-text--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-tag-text--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-tag-text--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n.example {\n padding: 2rem;\n}\n.example__item {\n padding: 1rem;\n}\n.example__item--dark {\n background-color: #000000;\n}"}}},{"node":{"id":"e00dae8c-780e-523b-bd8b-75a4ac9b5049","path":"src/docs/Components/Tag/previews/TagSelectable","codes":{"js":"","html":"
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings.scss';\n\n@include import-font-families();\n\n@import 'components/_c.tag.scss';\n\n.example {\n padding: $mu200;\n\n &__item {\n padding: $mu100;\n\n &--dark {\n background-color: $color-grey-999;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tag-text {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n background: #ffffff;\n color: #554f52;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n}\n.mc-tag-text::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-text--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n text-decoration: none;\n outline: none;\n background: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n color: #554f52;\n}\n.mc-tag-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link:hover {\n background: #eeeef0;\n}\n.mc-tag-link:active {\n background: #d3d2d6;\n}\n.mc-tag-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-link--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-link--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link--dark:hover {\n background: #3c3738;\n}\n.mc-tag-link--dark:active {\n background: #554f52;\n}\n.mc-tag-selectable {\n display: inline-block;\n white-space: nowrap;\n}\n.mc-tag-selectable__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-selectable__label {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: #d3d2d6;\n color: #222020;\n cursor: pointer;\n}\n.mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable__pill:hover {\n background: #add585;\n}\n.mc-tag-selectable__pill:active {\n background: #41a017;\n}\n:checked + .mc-tag-selectable__pill {\n background: #78be20;\n}\n:focus + .mc-tag-selectable__pill::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n:disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #eeeef0;\n color: #887f87;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill {\n background: #3c3738;\n color: #ffffff;\n cursor: pointer;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:hover {\n background: #78be20;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:active {\n background: #0a601b;\n}\n.mc-tag-selectable--dark :checked + .mc-tag-selectable__pill {\n background: #158110;\n}\n.mc-tag-selectable--dark :disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #554f52;\n color: #887f87;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n background-color: #d3d2d6;\n color: #222020;\n}\n.mc-tag-removable::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n}\n.mc-tag-removable--s .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n}\n.mc-tag-removable--m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable--m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n}\n.mc-tag-removable--dark {\n background-color: #3c3738;\n color: #ffffff;\n}\n.mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable__remove {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n position: relative;\n background-color: #d3d2d6;\n margin: 0;\n display: block;\n border-radius: 50%;\n background-repeat: no-repeat;\n background-position: center;\n}\n.mc-tag-removable__remove::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 50%;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable__remove-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-removable__remove:hover {\n background-color: #bab6bc;\n}\n.mc-tag-removable__remove:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-removable__remove:active {\n background-color: #a19ba2;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjZDNkMmQ2IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n background-color: #3c3738;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:hover {\n background-color: #554f52;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:active {\n background-color: #6f676c;\n}\n.mc-tag-list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-tag-list__item {\n margin: 0 1rem 1rem 0;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tag-text--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-tag-text--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-tag-text--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-tag-text--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n.example {\n padding: 2rem;\n}\n.example__item {\n padding: 1rem;\n}\n.example__item--dark {\n background-color: #000000;\n}"}}},{"node":{"id":"d4aeecd9-55df-5322-846d-a57fb68bea5c","path":"src/docs/Components/Tag/previews/TagText","codes":{"js":"","html":"
\n
\n \n \n text\n \n \n
\n
\n \n \n text small\n \n \n
\n
\n \n \n text dark\n \n \n
\n
\n \n \n text small dark\n \n \n
\n
\n","scss":"@import 'settings-tools/_all-settings.scss';\n\n@include import-font-families();\n\n@import 'components/_c.tag.scss';\n\n.example {\n padding: $mu200;\n\n &__item {\n padding: $mu100;\n\n &--dark {\n background-color: $color-grey-999;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tag-text {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n background: #ffffff;\n color: #554f52;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n}\n.mc-tag-text::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-text--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-text--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n text-decoration: none;\n outline: none;\n background: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #554f52;\n box-shadow: inset 0 0 0 1px #554f52;\n color: #554f52;\n}\n.mc-tag-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link:hover {\n background: #eeeef0;\n}\n.mc-tag-link:active {\n background: #d3d2d6;\n}\n.mc-tag-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-link--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-link--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-link--dark {\n background: #000000;\n color: #ffffff;\n -webkit-box-shadow: inset 0 0 0 1px #ffffff;\n box-shadow: inset 0 0 0 1px #ffffff;\n}\n.mc-tag-link--dark:hover {\n background: #3c3738;\n}\n.mc-tag-link--dark:active {\n background: #554f52;\n}\n.mc-tag-selectable {\n display: inline-block;\n white-space: nowrap;\n}\n.mc-tag-selectable__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-selectable__label {\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n background: #d3d2d6;\n color: #222020;\n cursor: pointer;\n}\n.mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable__pill:hover {\n background: #add585;\n}\n.mc-tag-selectable__pill:active {\n background: #41a017;\n}\n:checked + .mc-tag-selectable__pill {\n background: #78be20;\n}\n:focus + .mc-tag-selectable__pill::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n:disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #eeeef0;\n color: #887f87;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill {\n background: #3c3738;\n color: #ffffff;\n cursor: pointer;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:hover {\n background: #78be20;\n}\n.mc-tag-selectable--dark .mc-tag-selectable__pill:active {\n background: #0a601b;\n}\n.mc-tag-selectable--dark :checked + .mc-tag-selectable__pill {\n background: #158110;\n}\n.mc-tag-selectable--dark :disabled + .mc-tag-selectable__pill {\n cursor: not-allowed;\n background: #554f52;\n color: #887f87;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--s .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n}\n.mc-tag-selectable--m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n background-color: #d3d2d6;\n color: #222020;\n}\n.mc-tag-removable::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--s::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--s .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n}\n.mc-tag-removable--s .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n}\n.mc-tag-removable--m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n}\n.mc-tag-removable--m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable--m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable--m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n}\n.mc-tag-removable--dark {\n background-color: #3c3738;\n color: #ffffff;\n}\n.mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n}\n.mc-tag-removable__remove {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n position: relative;\n background-color: #d3d2d6;\n margin: 0;\n display: block;\n border-radius: 50%;\n background-repeat: no-repeat;\n background-position: center;\n}\n.mc-tag-removable__remove::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 50%;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-tag-removable__remove-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-tag-removable__remove:hover {\n background-color: #bab6bc;\n}\n.mc-tag-removable__remove:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-tag-removable__remove:active {\n background-color: #a19ba2;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjZDNkMmQ2IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n background-color: #3c3738;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:hover {\n background-color: #554f52;\n}\n.mc-tag-removable--dark .mc-tag-removable__remove:active {\n background-color: #6f676c;\n}\n.mc-tag-list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-tag-list__item {\n margin: 0 1rem 1rem 0;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tag-text--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-m .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-m .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-m::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-m .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-tag-text--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-l .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-l .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-l::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-l .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-tag-text--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-tag-text--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-text--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-link--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-link--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--s\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n }\n .mc-tag-selectable--m\\@from-xxl .mc-tag-selectable__pill::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 0.75rem;\n padding: calc(0.25rem - 1px) calc(1rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--s\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 0.875rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.25rem - 1px) 0.25rem calc(0.25rem - 1px) calc(1rem - 1px);\n }\n .mc-tag-removable--s\\@from-xxl .mc-tag-removable__remove {\n width: 1.5rem;\n height: 1.5rem;\n background-size: 1rem;\n }\n .mc-tag-removable--m\\@from-xxl {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n border-radius: 1.25rem;\n padding: calc(0.75rem - 1px) calc(1.5rem - 1px);\n position: relative;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n padding: 0;\n }\n .mc-tag-removable--m\\@from-xxl::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n border-radius: 1.375rem;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__label {\n padding: calc(0.75rem - 1px) 0.25rem calc(0.75rem - 1px) calc(1.5rem - 1px);\n }\n .mc-tag-removable--m\\@from-xxl .mc-tag-removable__remove {\n width: 2.5rem;\n height: 2.5rem;\n background-size: 1.5rem;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjM2MzNzM4IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTQuMTQgMTIuN2ExIDEgMCAwIDEtMS40MSAxLjQybC0yLjY4LTIuNjgtMi43OCAyLjc3YTEgMSAwIDEgMS0xLjQxLTEuNDJMMTAuNjMgMTIgNy43OSA5LjIxYTEgMSAwIDEgMSAxLjQyLTEuNDJsMi44NCAyLjgzIDIuNzQtMi43NGExIDEgMCAxIDEgMS40MiAxLjQyTDEzLjQ2IDEyeiIvPjwvc3ZnPg==');\n }\n}\n.example {\n padding: 2rem;\n}\n.example__item {\n padding: 1rem;\n}\n.example__item--dark {\n background-color: #000000;\n}"}}},{"node":{"id":"0bbc9a61-10e5-5467-a740-b1ef6a0e4ef9","path":"src/docs/Foundations/Utilities/Images/previews/ratio-with-helpers","codes":{"js":"","html":"
\n
\n \n
\n
\n","scss":"@import \"settings-tools/_all-settings\";\n@import \"utilities/_u.ratio.scss\";\n\n.example {\n display: block;\n padding: $mu150;\n}\n\n.example-element {\n margin: 0 auto;\n max-width: 800px;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n.mu-ratio {\n position: relative;\n}\n.mu-ratio::before {\n content: \"\";\n display: block;\n width: 100%;\n}\n.mu-ratio__item {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mu-ratio--1x1::before {\n padding-top: 100%;\n}\n.mu-ratio--2x3::before {\n padding-top: 150%;\n}\n.mu-ratio--3x2::before {\n padding-top: 66.6666666667%;\n}\n.mu-ratio--3x4::before {\n padding-top: 133.3333333333%;\n}\n.mu-ratio--4x3::before {\n padding-top: 75%;\n}\n.mu-ratio--16x9::before {\n padding-top: 56.25%;\n}\n\n.example {\n display: block;\n padding: 1.5rem;\n}\n\n.example-element {\n margin: 0 auto;\n max-width: 800px;\n}"}}},{"node":{"id":"f19f1ad4-05ba-56bf-aece-977bfd34cb34","path":"src/docs/Components/Tabs/previews/tabs-all-states","codes":{"js":"","html":"
\n \n
\n
\n \n
\n
\n\n \n
\n
\n
    \n
  • \n \n Tab Selected\n \n
    • \n
\n
\n
\n\n \n
\n
\n
    \n
  • \n \n Tab Disabled\n \n
    • \n
\n
\n
\n\n \n
\n
\n
    \n
  • \n \n Tab Active Disabled\n \n
    • \n
\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.tabs';\n\n.example {\n margin: $mu200;\n\n &__item {\n margin: $mu175;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tabs {\n background-color: #ffffff;\n position: relative;\n width: 100%;\n}\n.mc-tabs::before {\n bottom: 0;\n -webkit-box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n}\n.mc-tabs--no-shadow::before {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__nav {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-top: 0;\n margin-bottom: 0;\n}\n.mc-tabs__nav, .mc-tabs__select {\n position: relative;\n}\n.mc-tabs__link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.125;\n position: relative;\n background: none;\n border: none;\n border-bottom: 0.125rem solid transparent;\n color: #222020;\n cursor: pointer;\n display: block;\n outline: none;\n padding: 1.1875rem 1.5rem 1.0625rem;\n text-decoration: none;\n}\n.mc-tabs__link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n bottom: -0.125rem;\n top: -0.125rem;\n}\n.mc-tabs__link:active, .mc-tabs__link--selected {\n color: #78be20;\n}\n.mc-tabs__link:focus, .mc-tabs__link:hover {\n color: #41a017;\n}\n.mc-tabs__link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-tabs__link--selected {\n border-bottom-color: #78be20;\n}\n.mc-tabs__link--selected:focus, .mc-tabs__link--selected:hover {\n border-bottom-color: #41a017;\n}\n.mc-tabs__link--disabled {\n cursor: not-allowed;\n}\n.mc-tabs__link--disabled, .mc-tabs__link--disabled:hover, .mc-tabs__link--disabled:focus, .mc-tabs__link--disabled:active {\n color: #6f676c;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__link--disabled.mc-tabs__link--selected {\n color: #cbe3b5;\n border-bottom-color: #cbe3b5;\n}\n.mc-tabs--dropdown {\n padding: 1rem;\n width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tabs {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-tabs--full, .mc-tabs--full-centered {\n width: 100%;\n }\n .mc-tabs--full-centered {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n\n@media screen and (max-width: 679px) {\n .mc-tabs:not(.mc-tabs--dropdown)::before {\n bottom: 0.125rem;\n }\n .mc-tabs__nav {\n overflow-x: auto;\n white-space: nowrap;\n }\n .mc-tabs__item {\n padding: 0.125rem;\n }\n}\n.example {\n margin: 2rem;\n}\n.example__item {\n margin: 1.75rem;\n}"}}},{"node":{"id":"49c8d942-d8b5-5b33-8510-52c56213071a","path":"src/docs/Foundations/Typography/HeroStyles/previews/typographyHero-variations","codes":{"js":"","html":"
\n
\n mt-hero\n
\n\n default\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n mt-hero--semi-bold\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n mt-hero--line-height-s\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.heros';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n p {\n margin: $mu100 0;\n }\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n\n &:first-child {\n margin: 0 0 $mu100;\n }\n }\n\n &__modifier {\n @include set-font-scale('04', 's');\n\n margin-top: $mu200;\n font-family: monospace;\n display: inline-block;\n padding: $mu025 $mu050;\n box-shadow: inset 0 0 0 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example p {\n margin: 1rem 0;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__title:first-child {\n margin: 0 0 1rem;\n}\n.example__modifier {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n margin-top: 2rem;\n font-family: monospace;\n display: inline-block;\n padding: 0.25rem 0.5rem;\n -webkit-box-shadow: inset 0 0 0 1px #d3d2d6;\n box-shadow: inset 0 0 0 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"1613133d-78f2-51ee-bb4b-93a8fd14b83f","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeadingMedium","codes":{"js":"","html":"
\n

\n The quick brown fox jumps over the lazy dog.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}"}}},{"node":{"id":"4a0b8db8-449b-5066-961a-5dec9757ee59","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeadingLarge","codes":{"js":"","html":"
\n

\n The quick brown fox jumps over the lazy dog.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}"}}},{"node":{"id":"8e05c769-d4be-5666-93db-c111b99008d6","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeadingSmall","codes":{"js":"","html":"
\n

\n The quick brown fox jumps over the lazy dog.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}"}}},{"node":{"id":"5461a349-2b1c-55b1-ade2-5a3e170eee32","path":"src/docs/Foundations/Typography/HeadingStyles/previews/typographyHeading-weight","codes":{"js":"","html":"
\n \n mt-heading--light\n \n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n default\n \n\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n mt-heading--semi-bold\n \n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n\n \n mt-heading--underline\n \n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit.\n

\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.headings';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n &__heading {\n margin-top: $mu100;\n }\n\n &__modifier {\n @include set-font-scale('03', 's');\n\n margin-top: $mu200;\n font-family: monospace;\n display: inline-block;\n padding: 0 $mu050;\n box-shadow: inset 0 0 0 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example__heading {\n margin-top: 1rem;\n}\n.example__modifier {\n font-size: 0.8125rem;\n line-height: 1.2307692308;\n margin-top: 2rem;\n font-family: monospace;\n display: inline-block;\n padding: 0 0.5rem;\n -webkit-box-shadow: inset 0 0 0 1px #d3d2d6;\n box-shadow: inset 0 0 0 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"bd288530-a34b-5fc8-bea8-ad8553827976","path":"src/docs/Components/Form/FileUploader/previews/help-text","codes":{"js":"","html":"
\n
\n \n \n Only .jpg and .png files\n \n\n
\n \n \n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n padding: $mu150;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n padding: 1.5rem;\n}"}}},{"node":{"id":"e51ce200-1bb9-5769-95dc-3b297e226073","path":"src/docs/Components/Form/FileUploader/previews/invalid","codes":{"js":"","html":"
\n
\n \n\n
\n \n \n
\n\n \n Error: this field is mandatory. Don't forget to fill it in.\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n padding: $mu150;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n padding: 1.5rem;\n}"}}},{"node":{"id":"6a66641f-112d-57cb-9207-722220e9a38f","path":"src/docs/Components/Form/FileUploader/previews/requirement","codes":{"js":"","html":"
\n
\n \n\n
\n \n \n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n padding: $mu150;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n padding: 1.5rem;\n}"}}},{"node":{"id":"ca84ce3f-029b-5cc7-853a-014dc5b9b63c","path":"src/docs/Components/Form/FileUploader/previews/with-field","codes":{"js":"","html":"
\n
\n \n\n
\n \n \n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.file-uploader';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n padding: $mu150;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-fileuploader {\n position: relative;\n display: block;\n}\n.mc-fileuploader__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-fileuploader__label {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n.mc-fileuploader__label .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-fileuploader__label .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-fileuploader__label.is-hover,\n.mc-fileuploader__label:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-fileuploader__label.is-active,\n.mc-fileuploader__label:active {\n background-color: #cbe3b5;\n}\n\n.mc-fileuploader__label.is-disabled,\n.mc-fileuploader__label:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-fileuploader__label::before {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n background-size: 1.5rem;\n margin-right: 0.5rem;\n margin-left: -0.5rem;\n}\n.is-focus + .mc-fileuploader__label,\n:focus + .mc-fileuploader__label {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.is-hover + .mc-fileuploader__label,\n:hover + .mc-fileuploader__label {\n background-color: #eaf3e2;\n}\n\n.is-disabled + .mc-fileuploader__label,\n:disabled + .mc-fileuploader__label {\n color: #6f676c;\n background-color: #d3d2d6;\n border-color: transparent;\n cursor: not-allowed;\n}\n.is-disabled + .mc-fileuploader__label::before,\n:disabled + .mc-fileuploader__label::before {\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNmY2NzZjIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjx0aXRsZT5NZWRpYV9VcGxvYWRfMjRweDwvdGl0bGU+PHBhdGggZD0iTTguNzEsNy43MSwxMSw1LjQxVjE2YTEsMSwwLDAsMCwyLDBWNS40MWwyLjI5LDIuM2ExLDEsMCwwLDAsMS40MiwwLDEsMSwwLDAsMCwwLTEuNDJsLTQtNGExLDEsMCwwLDAtMS40MiwwbC00LDRBMSwxLDAsMSwwLDguNzEsNy43MVoiLz48cGF0aCBkPSJNMTYuMjIsMTIuNDRhMSwxLDAsMCwwLTEuMi43NywxLDEsMCwwLDAsLjc2LDEuMTlDMTguNTUsMTUsMjAsMTYuMTcsMjAsMTdjMCwxLjIyLTMuMTIsMy04LDNzLTgtMS43OC04LTNjMC0uODMsMS40NS0yLDQuMjItMi42QTEsMSwwLDAsMCw5LDEzLjIxYTEsMSwwLDAsMC0xLjItLjc3QzQuMTYsMTMuMjUsMiwxNSwyLDE3YzAsMi44NSw0LjMsNSwxMCw1czEwLTIuMTUsMTAtNUMyMiwxNSwxOS44NCwxMy4yNSwxNi4yMiwxMi40NFoiLz48L3N2Zz4=') no-repeat;\n}\n\n.mc-fileuploader__files {\n list-style: none;\n padding: 0;\n margin: 1rem 0 0 0;\n}\n.mc-fileuploader__file {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: #eeeef0;\n color: #000000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.mc-fileuploader__file:not(:last-child) {\n margin-bottom: 0.25rem;\n}\n.mc-fileuploader__file-name {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex-positive: 1;\n flex-grow: 1;\n overflow: hidden;\n padding-left: 0.75rem;\n padding-right: 0.75rem;\n -o-text-overflow: ellipsis;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: calc(100% - 7.5rem);\n}\n.mc-fileuploader__file-icon {\n background-color: transparent;\n background-position: center right;\n background-repeat: no-repeat;\n background-size: 1.5rem;\n display: block;\n height: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n width: 1.5rem;\n}\n.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNzhiZTIwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDEgMS04IDggOCA4IDAgMCAxIDgtOG0wLTJhMTAgMTAgMCAxIDAgMTAgMTBBMTAgMTAgMCAwIDAgMTIgMnoiLz48cGF0aCBkPSJNMTAuNTkgMTYuMTJhMSAxIDAgMCAxLS42OC0uMjZsLTMuODQtMy41NWExIDEgMCAwIDEgMS4zNi0xLjQ3bDMuMTMgMi44OUwxNiA4LjE3YTEgMSAwIDAgMSAxLjQzIDEuNDFsLTYuMTMgNi4yNWExIDEgMCAwIDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjYjQyYTI3IiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDEwIDEwQTEwIDEwIDAgMCAwIDEyIDJ6bTAgMThhOCA4IDAgMSAxIDgtOCA4IDggMCAwIDEtOCA4eiIvPjxwYXRoIGQ9Ik0xMiA3YTEgMSAwIDAgMC0xIDF2NC4zOGExIDEgMCAwIDAgMiAwVjhhMSAxIDAgMCAwLTEtMXoiLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjE2IiByPSIxIi8+PC9zdmc+');\n}\n.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n background: #ffffff;\n color: #b42a27;\n -ms-flex-preferred-size: 100%;\n flex-basis: 100%;\n padding-top: 0.25rem;\n}\n.mc-fileuploader__delete {\n position: relative;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n background-color: #d3d2d6;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n}\n.mc-fileuploader__delete::before {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -0.125rem;\n left: -0.125rem;\n}\n.mc-fileuploader__delete::after {\n content: \"\";\n width: 1.5rem;\n height: 1.5rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjMDAwMDAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOC4wOCA4YTEgMSAwIDAgMC0xLjA4LjkyTDE2LjA4IDIwSDcuOTJMNyA4LjkyYTEgMSAwIDEgMC0yIC4xNmwxIDEyQTEgMSAwIDAgMCA3IDIyaDEwYTEgMSAwIDAgMCAxLS45MmwxLTEyQTEgMSAwIDAgMCAxOC4wOCA4eiIvPjxwYXRoIGQ9Ik0xOSA1aC0zLjc3bC0uNjUtMi4yN2ExIDEgMCAwIDAtMS0uNzNoLTMuMmExIDEgMCAwIDAtMSAuNzNMOC43NyA1SDVhMSAxIDAgMCAwIDAgMmgxNGExIDEgMCAwIDAgMC0yem0tOC42Mi0yaDMuMjRsLjU3IDJIOS44MXpNMTIuNSAxOHYtOGEuNS41IDAgMCAwLTEgMHY4YS41LjUgMCAwIDAgMSAwek0xNC4yNSAxOC41YS41LjUgMCAwIDAgLjUtLjQ3bC41LThhLjUuNSAwIDAgMC0uNDctLjUzLjQ5LjQ5IDAgMCAwLS41My40N2wtLjUgOGEuNS41IDAgMCAwIC40Ny41M3pNOS43NSAxOC41YS41LjUgMCAwIDAgLjQ3LS41M2wtLjUtOGEuNDkuNDkgMCAwIDAtLjUzLS40Ny41LjUgMCAwIDAtLjQ3LjUzbC41IDhhLjUuNSAwIDAgMCAuNTMuNDd6Ii8+PC9zdmc+') no-repeat;\n display: block;\n}\n.mc-fileuploader__delete:focus {\n outline: none;\n}\n.mc-fileuploader__delete:focus::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n padding: 1.5rem;\n}"}}},{"node":{"id":"36f2709c-fc08-5cf7-bf56-b89c250c843a","path":"src/docs/Components/Form/Checkbox/previews/group-default","codes":{"js":"","html":"
\n
\n \n Group label\n \n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"cec1f123-ce3d-5606-bc13-58a6189ba862","path":"src/docs/Components/Form/Checkbox/previews/group-inline","codes":{"js":"","html":"
\n
\n \n Group label\n \n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu100;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 1rem;\n}"}}},{"node":{"id":"e1d1acaa-6e51-5899-9606-bbc3905c461e","path":"src/docs/Components/Form/Datepicker/previews/default","codes":{"js":"","html":"
\n
\n \n\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"917ddbc6-541a-5543-9c6f-69876fdd959a","path":"src/docs/Components/Form/Field/previews/fields-full","codes":{"js":"","html":"
\n
\n \n\n \n Help text\n \n\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"9d08bdaf-09d4-537b-8ec8-454fc3470a0e","path":"src/docs/Components/Form/Field/previews/fields-help","codes":{"js":"","html":"
\n
\n \n\n \n Help text\n \n\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"bc316416-b28d-579a-9232-4a157cf2427a","path":"src/docs/Components/Form/Field/previews/fields-requirement","codes":{"js":"","html":"
\n
\n \n\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"b870e33c-2cf3-5aa6-8222-71e87cbfff17","path":"src/docs/Components/Form/Field/previews/fields-sizes","codes":{"js":"","html":"
\n
\n \n\n \n
\n
\n\n
\n
\n \n\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"1e7f9525-10f6-59ce-8629-b9b684dd12ce","path":"src/docs/Components/Form/Field/previews/fields-state","codes":{"js":"","html":"
\n
\n \n\n \n
\n
\n\n
\n
\n \n\n \n
\n
\n\n
\n
\n \n\n \n\n \n Error: the adress field should be at least 32 characters long\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"1a0e8987-829c-55e5-b3df-711f76c178d1","path":"src/docs/Components/Form/Field/previews/fields-validation","codes":{"js":"","html":"
\n
\n
\n
\n \n\n \n
\n
\n\n
\n
\n \n\n \n\n \n Error: the adress field should be at least 32 characters long\n \n
\n
\n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"39f73a35-9026-55b2-8c3e-22a7bb06ea2f","path":"src/docs/Components/Form/Field/previews/fields","codes":{"js":"","html":"
\n
\n \n\n \n
\n
\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"6977cb79-b4b7-5ec1-88d5-9e12f910fbfb","path":"src/docs/Components/Form/Checkbox/previews/group-indeterminate","codes":{"js":"","html":"
\n
\n
\n \n \n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n\n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n\n.mc-field__container {\n padding-left: $mu175;\n}\n\n// only for this preview, to prevent interactions\ninput,\nlabel {\n pointer-events: none;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}\n\n.mc-field__container {\n padding-left: 1.75rem;\n}\n\ninput,\nlabel {\n pointer-events: none;\n}"}}},{"node":{"id":"aabb8a3c-7f26-57e2-8b69-27c426bacd63","path":"src/docs/Components/Form/PhoneNumberInput/previews/basic","codes":{"js":"","html":"\n\n \n \n \n Input phone number\n \n \n \n
\n
\n
\n \n \n \n \n +33\n \n \n
  • \n \n \n \n France, \n +33\n
    • \n
  • \n \n \n \n Italie, \n +39\n
    • \n
  • \n \n \n \n Belgique, \n +32\n
    • \n
  • \n \n \n \n Allemagne, \n +49\n
    • \n
  • \n \n \n \n Holland, \n +31\n
    • \n
  • \n \n \n \n Russie, \n +7\n
    • \n
  • \n \n \n \n Luxembourg, \n +352\n
    • \n \n
    \n \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.phone-number';\n\n.example {\n @include set-font-face();\n\n height: 12rem;\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-phone-number {\n font-family: \"LeroyMerlin\", sans-serif;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n max-width: 21rem;\n position: relative;\n}\n.mc-phone-number__button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n font-weight: 600;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n color: #222020;\n border: 1px solid #6f676c;\n border-radius: 0.25rem 0 0 0.25rem;\n border-right: none;\n padding-left: 1rem;\n}\n.mc-phone-number__button .mc-phone-number__country {\n display: none;\n}\n.mc-phone-number__flag {\n margin-right: 0.5rem;\n width: 1rem;\n height: 1rem;\n}\n.mc-phone-number__list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n -webkit-box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n margin: 0;\n position: absolute;\n width: 100%;\n max-height: 12rem;\n border-radius: 0.25rem 0 0 0.25rem;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-phone-number__list::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-phone-number__list::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-phone-number__list:focus {\n outline: none;\n}\n.mc-phone-number__list--hidden {\n display: none;\n}\n.mc-phone-number__item {\n font-size: 1rem;\n line-height: 1.125;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 3rem;\n padding-left: 0.75rem;\n border-bottom: 1px solid #bab6bc;\n}\n.mc-phone-number__item--focused {\n background: #eeeef0;\n}\n.mc-phone-number__input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.mc-phone-number--focused .mc-phone-number__button {\n border-color: #25a8d0;\n}\n.mc-phone-number--focused .mc-phone-number__input {\n border-top-color: #25a8d0;\n border-right-color: #25a8d0;\n border-bottom-color: #25a8d0;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n height: 12rem;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"4c719b7f-04e8-566e-9f35-3fad62436315","path":"src/docs/Components/Cards/previews/card-bordered","codes":{"js":"","html":"
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n
    \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n@import 'components/_c.card';\n\n.example {\n padding: $mu200;\n\n & > div {\n margin: 0 auto;\n }\n\n p {\n margin: 0;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-card {\n font-family: \"LeroyMerlin\", sans-serif;\n max-width: 17.75rem;\n}\n.mc-card,\n.mc-card * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 680px) {\n .mc-card {\n max-width: 14.875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-card {\n max-width: 18rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-card {\n max-width: 17.5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-card {\n max-width: 27.25rem;\n }\n}\n.mc-card__visual {\n margin: 0;\n overflow: hidden;\n position: relative;\n}\n.mc-card__visual::before {\n content: \"\";\n display: block;\n width: 100%;\n padding-top: 75%;\n}\n.mc-card__visual--1x1::before {\n padding-top: 100%;\n}\n.mc-card__visual--16x9::before {\n padding-top: 56.25%;\n}\n.mc-card__img {\n height: auto;\n left: 0;\n position: absolute;\n top: 50%;\n width: 100%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-card__content {\n padding-top: 1rem;\n}\n.mc-card__title, .mc-card__subtitle {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n.mc-card__title {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n}\n.mc-card__subtitle {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #3c3738;\n}\n.mc-card__body {\n font-size: 1rem;\n line-height: 1.375;\n color: #222020;\n margin-bottom: 1rem;\n}\n.mc-card--bordered {\n background: #ffffff;\n border: 2px solid #222020;\n border-radius: 0.25rem;\n overflow: hidden;\n}\n@media (min-width: 680px) and (max-width: 1023px) {\n .mc-card--bordered {\n max-width: 18.25rem;\n }\n}\n.mc-card--bordered .mc-card__content {\n padding-bottom: 1.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.mc-card--fluid {\n max-width: auto;\n}\n\n.example {\n padding: 2rem;\n}\n.example > div {\n margin: 0 auto;\n}\n.example p {\n margin: 0;\n}"}}},{"node":{"id":"8005a5bc-6500-557b-a3cf-716beba79637","path":"src/docs/Components/Cards/previews/default","codes":{"js":"","html":"
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.card';\n\n.example {\n padding: 0 $mu200;\n\n & > div {\n margin: 0 auto;\n }\n\n p {\n margin: 0;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-card {\n font-family: \"LeroyMerlin\", sans-serif;\n max-width: 17.75rem;\n}\n.mc-card,\n.mc-card * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 680px) {\n .mc-card {\n max-width: 14.875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-card {\n max-width: 18rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-card {\n max-width: 17.5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-card {\n max-width: 27.25rem;\n }\n}\n.mc-card__visual {\n margin: 0;\n overflow: hidden;\n position: relative;\n}\n.mc-card__visual::before {\n content: \"\";\n display: block;\n width: 100%;\n padding-top: 75%;\n}\n.mc-card__visual--1x1::before {\n padding-top: 100%;\n}\n.mc-card__visual--16x9::before {\n padding-top: 56.25%;\n}\n.mc-card__img {\n height: auto;\n left: 0;\n position: absolute;\n top: 50%;\n width: 100%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-card__content {\n padding-top: 1rem;\n}\n.mc-card__title, .mc-card__subtitle {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n.mc-card__title {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n}\n.mc-card__subtitle {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #3c3738;\n}\n.mc-card__body {\n font-size: 1rem;\n line-height: 1.375;\n color: #222020;\n margin-bottom: 1rem;\n}\n.mc-card--bordered {\n background: #ffffff;\n border: 2px solid #222020;\n border-radius: 0.25rem;\n overflow: hidden;\n}\n@media (min-width: 680px) and (max-width: 1023px) {\n .mc-card--bordered {\n max-width: 18.25rem;\n }\n}\n.mc-card--bordered .mc-card__content {\n padding-bottom: 1.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.mc-card--fluid {\n max-width: auto;\n}\n\n.example {\n padding: 0 2rem;\n}\n.example > div {\n margin: 0 auto;\n}\n.example p {\n margin: 0;\n}"}}},{"node":{"id":"dc387add-82dc-5755-93d0-a4afc575f738","path":"src/docs/Components/Cards/previews/card-link","codes":{"js":"","html":"
    \n
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n \n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.card';\n\n.example {\n @include set-from-screen('m') {\n display: flex;\n justify-content: center;\n }\n\n &__item {\n flex-shrink: 0;\n padding: $mu200;\n }\n\n p {\n margin: 0;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-card {\n font-family: \"LeroyMerlin\", sans-serif;\n max-width: 17.75rem;\n}\n.mc-card,\n.mc-card * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 680px) {\n .mc-card {\n max-width: 14.875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-card {\n max-width: 18rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-card {\n max-width: 17.5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-card {\n max-width: 27.25rem;\n }\n}\n.mc-card__visual {\n margin: 0;\n overflow: hidden;\n position: relative;\n}\n.mc-card__visual::before {\n content: \"\";\n display: block;\n width: 100%;\n padding-top: 75%;\n}\n.mc-card__visual--1x1::before {\n padding-top: 100%;\n}\n.mc-card__visual--16x9::before {\n padding-top: 56.25%;\n}\n.mc-card__img {\n height: auto;\n left: 0;\n position: absolute;\n top: 50%;\n width: 100%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-card__content {\n padding-top: 1rem;\n}\n.mc-card__title, .mc-card__subtitle {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n.mc-card__title {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n}\n.mc-card__subtitle {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #3c3738;\n}\n.mc-card__body {\n font-size: 1rem;\n line-height: 1.375;\n color: #222020;\n margin-bottom: 1rem;\n}\n.mc-card--bordered {\n background: #ffffff;\n border: 2px solid #222020;\n border-radius: 0.25rem;\n overflow: hidden;\n}\n@media (min-width: 680px) and (max-width: 1023px) {\n .mc-card--bordered {\n max-width: 18.25rem;\n }\n}\n.mc-card--bordered .mc-card__content {\n padding-bottom: 1.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.mc-card--fluid {\n max-width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n.example__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n padding: 2rem;\n}\n.example p {\n margin: 0;\n}"}}},{"node":{"id":"c89cf743-8525-5ef0-a91b-3d2eb6880cdc","path":"src/docs/Components/Cards/previews/card-button","codes":{"js":"","html":"
    \n
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n@import 'components/_c.card';\n\n.example {\n @include set-from-screen('m') {\n display: flex;\n justify-content: center;\n }\n\n &__item {\n flex-shrink: 0;\n padding: $mu200;\n }\n\n p {\n margin: 0;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-card {\n font-family: \"LeroyMerlin\", sans-serif;\n max-width: 17.75rem;\n}\n.mc-card,\n.mc-card * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 680px) {\n .mc-card {\n max-width: 14.875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-card {\n max-width: 18rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-card {\n max-width: 17.5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-card {\n max-width: 27.25rem;\n }\n}\n.mc-card__visual {\n margin: 0;\n overflow: hidden;\n position: relative;\n}\n.mc-card__visual::before {\n content: \"\";\n display: block;\n width: 100%;\n padding-top: 75%;\n}\n.mc-card__visual--1x1::before {\n padding-top: 100%;\n}\n.mc-card__visual--16x9::before {\n padding-top: 56.25%;\n}\n.mc-card__img {\n height: auto;\n left: 0;\n position: absolute;\n top: 50%;\n width: 100%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-card__content {\n padding-top: 1rem;\n}\n.mc-card__title, .mc-card__subtitle {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n.mc-card__title {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n}\n.mc-card__subtitle {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #3c3738;\n}\n.mc-card__body {\n font-size: 1rem;\n line-height: 1.375;\n color: #222020;\n margin-bottom: 1rem;\n}\n.mc-card--bordered {\n background: #ffffff;\n border: 2px solid #222020;\n border-radius: 0.25rem;\n overflow: hidden;\n}\n@media (min-width: 680px) and (max-width: 1023px) {\n .mc-card--bordered {\n max-width: 18.25rem;\n }\n}\n.mc-card--bordered .mc-card__content {\n padding-bottom: 1.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.mc-card--fluid {\n max-width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n.example__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n padding: 2rem;\n}\n.example p {\n margin: 0;\n}"}}},{"node":{"id":"79a9ee8f-9248-5245-8740-29ff52222b7c","path":"src/docs/Components/Form/Checkbox/previews/group-invalid-light","codes":{"js":"","html":"
    \n
    \n
    \n \n Group label\n \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"8e04f0ff-9639-5909-b93f-c3f9a8947f23","path":"src/docs/Components/Form/Checkbox/previews/group-invalid","codes":{"js":"","html":"
    \n
    \n Default\n
    \n\n
    \n
    \n \n Legend\n \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n\n
    \n Horizontal\n
    \n\n
    \n
    \n \n Legend\n \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"8b2b2281-7d42-53c5-8466-390cf8db5558","path":"src/docs/Components/Form/Checkbox/previews/group-help-light","codes":{"js":"","html":"
    \n
    \n
    \n \n Group label\n \n mandatory\n \n \n Help text\n \n \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"b1d026fa-214a-5590-93df-a7c59bbe90b9","path":"src/docs/Components/Form/Checkbox/previews/group-help-text","codes":{"js":"","html":"
    \n
    \n Default\n
    \n\n
    \n
    \n \n Legend\n \n \n Help text\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n Horizontal\n
    \n\n
    \n
    \n \n Legend\n \n \n Help text\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"cb5dcc0b-993a-5ec8-b30f-a1eea5f4b3fc","path":"src/docs/Components/Form/Checkbox/previews/group-requirement-light","codes":{"js":"","html":"
    \n
    \n
    \n \n Group label\n \n mandatory\n \n \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"77bc5887-5711-596f-8592-e1442d6d8417","path":"src/docs/Components/Form/Checkbox/previews/group-requirement","codes":{"js":"","html":"
    \n
    \n Default\n
    \n\n
    \n
    \n \n Legend\n \n mandatory\n \n \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n
    \n Horizontal\n
    \n\n
    \n
    \n \n Legend\n \n mandatory\n \n \n\n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.checkbox';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-checkbox {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-checkbox__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-checkbox__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n min-width: 20px;\n min-height: 20px;\n width: 1.25rem;\n height: 1.25rem;\n border-radius: 4px;\n border: 2px solid #6f676c;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-checkbox__input[type=number]::-webkit-inner-spin-button, .mc-checkbox__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-checkbox__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-checkbox__input::-ms-check {\n border: 2px solid #6f676c;\n background: #ffffff;\n border-radius: 4px;\n color: #ffffff;\n}\n.mc-checkbox__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-checkbox__input.is-invalid.is-hover,\n.mc-checkbox__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-checkbox__input.is-invalid.is-hover::-ms-check,\n.mc-checkbox__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-checkbox__input.is-hover,\n.mc-checkbox__input:hover {\n border-color: #222020;\n}\n.mc-checkbox__input.is-hover::-ms-check,\n.mc-checkbox__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-checkbox__input.is-focus,\n.mc-checkbox__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-checkbox__input.is-focus::-ms-check,\n.mc-checkbox__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-checkbox__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-checkbox__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n}\n.mc-checkbox__input:disabled:indeterminate {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNhMTliYTIiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n border-color: #eeeef0;\n}\n.mc-checkbox__input:checked {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n background-position: center center;\n background-size: 1rem;\n}\n.mc-checkbox__input:checked::-ms-check {\n background-color: #78be20;\n border-color: #78be20;\n}\n.mc-checkbox__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-checkbox__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n.mc-checkbox__input:indeterminate {\n background-color: #78be20;\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNmZmZmZmYiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"b751f00d-0c29-5ec5-ae19-891b5ef85ce1","path":"src/docs/Components/Breadcrumb/previews/dark-mode","codes":{"js":"","html":"
    \n \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.breadcrumb';\n\n.example {\n @include set-font-face();\n\n display: block;\n padding: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-breadcrumb {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #222020;\n padding: 0.9375rem 0 0.9375rem 1.125rem;\n}\n@media screen and (min-width: 360px) {\n .mc-breadcrumb {\n padding-left: 1.25rem;\n }\n}\n@media screen and (min-width: 390px) {\n .mc-breadcrumb {\n padding-left: 1.375rem;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-breadcrumb {\n padding-left: 2.125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb {\n padding-left: 3rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-breadcrumb {\n padding-left: 7rem;\n }\n}\n@media screen and (min-width: 1680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-breadcrumb {\n padding-left: 2.5rem;\n }\n}\n.mc-breadcrumb__container {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-breadcrumb__item {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n padding-right: 0.5rem;\n background-position: left 0.1875rem;\n background-repeat: no-repeat;\n background-size: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n}\n.mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child, .mc-breadcrumb__item:not(:first-child) {\n padding-left: 1.5rem;\n}\n.mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n.mc-breadcrumb__current {\n cursor: default;\n text-decoration: none;\n}\n.mc-breadcrumb__current, .mc-breadcrumb__current:active, .mc-breadcrumb__current:focus, .mc-breadcrumb__current:hover, .mc-breadcrumb__current:visited {\n color: currentColor;\n}\n.mc-breadcrumb--dark {\n background-color: #554f52;\n color: #ffffff;\n}\n.mc-breadcrumb--dark .mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--dark .mc-breadcrumb__item.is-active, .mc-breadcrumb--dark .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--responsive .mc-breadcrumb__item:not(.is-active) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"e5f38d31-6369-5927-a78b-d50315c79489","path":"src/docs/Components/Breadcrumb/previews/default","codes":{"js":"","html":"
    \n \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.breadcrumb';\n\n.example {\n @include set-font-face();\n\n display: block;\n padding: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-breadcrumb {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #222020;\n padding: 0.9375rem 0 0.9375rem 1.125rem;\n}\n@media screen and (min-width: 360px) {\n .mc-breadcrumb {\n padding-left: 1.25rem;\n }\n}\n@media screen and (min-width: 390px) {\n .mc-breadcrumb {\n padding-left: 1.375rem;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-breadcrumb {\n padding-left: 2.125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb {\n padding-left: 3rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-breadcrumb {\n padding-left: 7rem;\n }\n}\n@media screen and (min-width: 1680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-breadcrumb {\n padding-left: 2.5rem;\n }\n}\n.mc-breadcrumb__container {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-breadcrumb__item {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n padding-right: 0.5rem;\n background-position: left 0.1875rem;\n background-repeat: no-repeat;\n background-size: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n}\n.mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child, .mc-breadcrumb__item:not(:first-child) {\n padding-left: 1.5rem;\n}\n.mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n.mc-breadcrumb__current {\n cursor: default;\n text-decoration: none;\n}\n.mc-breadcrumb__current, .mc-breadcrumb__current:active, .mc-breadcrumb__current:focus, .mc-breadcrumb__current:hover, .mc-breadcrumb__current:visited {\n color: currentColor;\n}\n.mc-breadcrumb--dark {\n background-color: #554f52;\n color: #ffffff;\n}\n.mc-breadcrumb--dark .mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--dark .mc-breadcrumb__item.is-active, .mc-breadcrumb--dark .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--responsive .mc-breadcrumb__item:not(.is-active) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"1ba5804d-7506-5668-a918-9d82f1a16352","path":"src/docs/Components/Breadcrumb/previews/mobile","codes":{"js":"","html":"
    \n \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.breadcrumb';\n\n.example {\n @include set-font-face();\n\n display: block;\n padding: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-breadcrumb {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #222020;\n padding: 0.9375rem 0 0.9375rem 1.125rem;\n}\n@media screen and (min-width: 360px) {\n .mc-breadcrumb {\n padding-left: 1.25rem;\n }\n}\n@media screen and (min-width: 390px) {\n .mc-breadcrumb {\n padding-left: 1.375rem;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-breadcrumb {\n padding-left: 2.125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb {\n padding-left: 3rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-breadcrumb {\n padding-left: 7rem;\n }\n}\n@media screen and (min-width: 1680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-breadcrumb {\n padding-left: 2.5rem;\n }\n}\n.mc-breadcrumb__container {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-breadcrumb__item {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n padding-right: 0.5rem;\n background-position: left 0.1875rem;\n background-repeat: no-repeat;\n background-size: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n}\n.mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child, .mc-breadcrumb__item:not(:first-child) {\n padding-left: 1.5rem;\n}\n.mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n.mc-breadcrumb__current {\n cursor: default;\n text-decoration: none;\n}\n.mc-breadcrumb__current, .mc-breadcrumb__current:active, .mc-breadcrumb__current:focus, .mc-breadcrumb__current:hover, .mc-breadcrumb__current:visited {\n color: currentColor;\n}\n.mc-breadcrumb--dark {\n background-color: #554f52;\n color: #ffffff;\n}\n.mc-breadcrumb--dark .mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--dark .mc-breadcrumb__item.is-active, .mc-breadcrumb--dark .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--responsive .mc-breadcrumb__item:not(.is-active) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"32008e8e-95fa-5d2f-92fa-c65e155a3504","path":"src/docs/Components/Breadcrumb/previews/responsive","codes":{"js":"","html":"
    \n \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.breadcrumb';\n\n.example {\n @include set-font-face();\n\n display: block;\n padding: $mu150;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-breadcrumb {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #222020;\n padding: 0.9375rem 0 0.9375rem 1.125rem;\n}\n@media screen and (min-width: 360px) {\n .mc-breadcrumb {\n padding-left: 1.25rem;\n }\n}\n@media screen and (min-width: 390px) {\n .mc-breadcrumb {\n padding-left: 1.375rem;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-breadcrumb {\n padding-left: 2.125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb {\n padding-left: 3rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-breadcrumb {\n padding-left: 7rem;\n }\n}\n@media screen and (min-width: 1680px) {\n .mc-breadcrumb {\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-breadcrumb {\n padding-left: 2.5rem;\n }\n}\n.mc-breadcrumb__container {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-breadcrumb__item {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n padding-right: 0.5rem;\n background-position: left 0.1875rem;\n background-repeat: no-repeat;\n background-size: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-breadcrumb__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n}\n.mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child, .mc-breadcrumb__item:not(:first-child) {\n padding-left: 1.5rem;\n}\n.mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb__item.is-active, .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzNjMzczOCI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n.mc-breadcrumb__current {\n cursor: default;\n text-decoration: none;\n}\n.mc-breadcrumb__current, .mc-breadcrumb__current:active, .mc-breadcrumb__current:focus, .mc-breadcrumb__current:hover, .mc-breadcrumb__current:visited {\n color: currentColor;\n}\n.mc-breadcrumb--dark {\n background-color: #554f52;\n color: #ffffff;\n}\n.mc-breadcrumb--dark .mc-breadcrumb__item:not(:first-child) {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTUuNSAxNGExIDEgMCAwMS0uNzEtLjI5IDEgMSAwIDAxMC0xLjQyTDkuMDkgOGwtNC4zLTQuMjlhMSAxIDAgMDExLjQyLTEuNDJsNSA1YTEgMSAwIDAxMCAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--dark .mc-breadcrumb__item.is-active, .mc-breadcrumb--dark .mc-breadcrumb__item:only-child {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iI2ZmZmZmZiI+PHBhdGggZD0iTTEwLjUgMTRhMSAxIDAgMDEtLjcxLS4yOWwtNS01YTEgMSAwIDAxMC0xLjQybDUtNWExIDEgMCAxMTEuNDIgMS40Mkw2LjkxIDhsNC4zIDQuMjlhMSAxIDAgMDEwIDEuNDIgMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n }\n}\n@media screen and (max-width: 1023px) {\n .mc-breadcrumb--responsive .mc-breadcrumb__item:not(.is-active) {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: block;\n padding: 1.5rem;\n}"}}},{"node":{"id":"c302317b-3eba-5649-8798-744f2e1dac8a","path":"src/docs/Components/Accordion/previews/stacked","codes":{"js":"","html":"
    \n
    \n \n \n
    \n

    \n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n This is a link\n

    \n
    \n
    \n
    \n \n \n
    \n

    \n Fusce iaculis dolor nulla, a maximus ipsum sollicitudin et. Ut\n condimentum at orci aliquam feugiat. Curabitur sagittis placerat leo sit\n amet pharetra.\n

    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.accordion';\n@import 'components/_c.links'; // used only for the example\n\n.example {\n margin: $mu125;\n min-height: $mu1000;\n}\n\np {\n margin: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-accordion {\n background-color: #ffffff;\n border-bottom: 1px solid #6f676c;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n}\n.mc-accordion__label {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n background-size: 1.5rem;\n padding-top: 1.25rem;\n padding-right: 3rem;\n padding-bottom: 1.25rem;\n}\n.mc-accordion__icon {\n height: 2rem;\n width: 2rem;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiICB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xOS4wOSwxMWgtNlY1YTEsMSwwLDAsMC0yLDB2NmgtNmExLDEsMCwwLDAsMCwyaDZ2NmExLDEsMCwwLDAsMiwwVjEzaDZhMSwxLDAsMCwwLDAtMloiLz48L3N2Zz4=');\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3LjA5LDEzaC0xMGExLDEsMCwwLDEsMC0yaDEwYTEsMSwwLDAsMSwwLDJaIi8+PC9zdmc+');\n}\n.mc-accordion__label {\n font-weight: 600;\n position: relative;\n background-position: right 0.5rem center;\n background-repeat: no-repeat;\n color: #222020;\n cursor: pointer;\n display: block;\n padding-left: 0.5rem;\n position: relative;\n}\n.mc-accordion__label::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.125rem;\n right: -0.125rem;\n bottom: -3px;\n left: -0.125rem;\n}\n.mc-accordion__label:hover {\n background-color: #eeeef0;\n}\n.mc-accordion__label--no-padding {\n padding-left: 0;\n}\n.mc-accordion__label--icon {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.mc-accordion__icon {\n fill: #887f87;\n margin-right: 0.5rem;\n}\n.mc-accordion__content {\n font-size: 1rem;\n line-height: 1.375;\n color: #3c3738;\n height: auto;\n max-height: 0;\n overflow: hidden;\n padding-left: 0.5rem;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n visibility: hidden;\n}\n.mc-accordion__trigger {\n opacity: 0;\n position: absolute;\n}\n.mc-accordion__trigger:checked ~ .mc-accordion__content {\n max-height: 100vh;\n padding-top: 0.5rem;\n padding-bottom: calc(1.5rem - 1px);\n visibility: visible;\n -webkit-transition: 0.3s ease;\n -o-transition: 0.3s ease;\n transition: 0.3s ease;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-color: #eeeef0;\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:disabled ~ .mc-accordion__content {\n color: #6f676c;\n cursor: not-allowed;\n}\n.mc-accordion__trigger:focus ~ .mc-accordion__label::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-accordion__trigger:disabled:checked ~ .mc-accordion__content {\n max-height: none;\n padding-top: 0.5rem;\n}\n.mc-accordion--s .mc-accordion__label {\n font-size: 1rem;\n line-height: 1.375;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n background-size: 1rem;\n padding-top: 1rem;\n padding-right: 2.5rem;\n padding-bottom: 1rem;\n}\n.mc-accordion--s .mc-accordion__icon {\n height: 1.5rem;\n width: 1.5rem;\n}\n.mc-accordion--s .mc-accordion__trigger:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEzIDdIOVYzYTEgMSAwIDAwLTIgMHY0SDNhMSAxIDAgMDAwIDJoNHY0YTEgMSAwIDAwMiAwVjloNGExIDEgMCAwMDAtMnoiLz48L3N2Zz4=');\n}\n.mc-accordion--s .mc-accordion__trigger:disabled:checked ~ .mc-accordion__label {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM2ZjY3NmMiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTEyIDlINGExIDEgMCAwMTAtMmg4YTEgMSAwIDAxMCAyeiIvPjwvc3ZnPg==');\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.example {\n margin: 1.25rem;\n min-height: 10rem;\n}\n\np {\n margin: 0;\n}"}}},{"node":{"id":"b0d5eec5-4e0c-5480-a1ca-63d513119ac4","path":"src/docs/Components/Form/PhoneNumberInput/previews/opened","codes":{"js":"","html":"\n\n \n \n \n Input phone number\n \n \n \n
    \n
    \n
    \n \n \n \n \n +33\n \n \n
  • \n \n \n \n France, \n +33\n
    • \n
  • \n \n \n \n Italie, \n +39\n
    • \n
  • \n \n \n \n Belgique, \n +32\n
    • \n
  • \n \n \n \n Allemagne, \n +49\n
    • \n
  • \n \n \n \n Holland, \n +31\n
    • \n
  • \n \n \n \n Russie, \n +7\n
    • \n
  • \n \n \n \n Luxembourg, \n +352\n
    • \n \n
    \n \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.phone-number';\n\n.example {\n @include set-font-face();\n\n height: 12rem;\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-phone-number {\n font-family: \"LeroyMerlin\", sans-serif;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n max-width: 21rem;\n position: relative;\n}\n.mc-phone-number__button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n font-weight: 600;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n color: #222020;\n border: 1px solid #6f676c;\n border-radius: 0.25rem 0 0 0.25rem;\n border-right: none;\n padding-left: 1rem;\n}\n.mc-phone-number__button .mc-phone-number__country {\n display: none;\n}\n.mc-phone-number__flag {\n margin-right: 0.5rem;\n width: 1rem;\n height: 1rem;\n}\n.mc-phone-number__list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n -webkit-box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n margin: 0;\n position: absolute;\n width: 100%;\n max-height: 12rem;\n border-radius: 0.25rem 0 0 0.25rem;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-phone-number__list::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-phone-number__list::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-phone-number__list:focus {\n outline: none;\n}\n.mc-phone-number__list--hidden {\n display: none;\n}\n.mc-phone-number__item {\n font-size: 1rem;\n line-height: 1.125;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 3rem;\n padding-left: 0.75rem;\n border-bottom: 1px solid #bab6bc;\n}\n.mc-phone-number__item--focused {\n background: #eeeef0;\n}\n.mc-phone-number__input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.mc-phone-number--focused .mc-phone-number__button {\n border-color: #25a8d0;\n}\n.mc-phone-number--focused .mc-phone-number__input {\n border-top-color: #25a8d0;\n border-right-color: #25a8d0;\n border-bottom-color: #25a8d0;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n height: 12rem;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"eb9a6dce-0f8c-5404-a2a8-72bd03fcd19d","path":"src/docs/Components/Tabs/previews/tabs-container","codes":{"js":"","html":"
    \n
    \n
    \n \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'components/_c.tabs';\n\n.example {\n margin: $mu200 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.mc-tabs {\n background-color: #ffffff;\n position: relative;\n width: 100%;\n}\n.mc-tabs::before {\n bottom: 0;\n -webkit-box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n}\n.mc-tabs--no-shadow::before {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__nav {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-top: 0;\n margin-bottom: 0;\n}\n.mc-tabs__nav, .mc-tabs__select {\n position: relative;\n}\n.mc-tabs__link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.125;\n position: relative;\n background: none;\n border: none;\n border-bottom: 0.125rem solid transparent;\n color: #222020;\n cursor: pointer;\n display: block;\n outline: none;\n padding: 1.1875rem 1.5rem 1.0625rem;\n text-decoration: none;\n}\n.mc-tabs__link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n bottom: -0.125rem;\n top: -0.125rem;\n}\n.mc-tabs__link:active, .mc-tabs__link--selected {\n color: #78be20;\n}\n.mc-tabs__link:focus, .mc-tabs__link:hover {\n color: #41a017;\n}\n.mc-tabs__link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-tabs__link--selected {\n border-bottom-color: #78be20;\n}\n.mc-tabs__link--selected:focus, .mc-tabs__link--selected:hover {\n border-bottom-color: #41a017;\n}\n.mc-tabs__link--disabled {\n cursor: not-allowed;\n}\n.mc-tabs__link--disabled, .mc-tabs__link--disabled:hover, .mc-tabs__link--disabled:focus, .mc-tabs__link--disabled:active {\n color: #6f676c;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__link--disabled.mc-tabs__link--selected {\n color: #cbe3b5;\n border-bottom-color: #cbe3b5;\n}\n.mc-tabs--dropdown {\n padding: 1rem;\n width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tabs {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-tabs--full, .mc-tabs--full-centered {\n width: 100%;\n }\n .mc-tabs--full-centered {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n\n@media screen and (max-width: 679px) {\n .mc-tabs:not(.mc-tabs--dropdown)::before {\n bottom: 0.125rem;\n }\n .mc-tabs__nav {\n overflow-x: auto;\n white-space: nowrap;\n }\n .mc-tabs__item {\n padding: 0.125rem;\n }\n}\n.example {\n margin: 2rem 0;\n}"}}},{"node":{"id":"9710587c-b3f3-599a-88a4-04f26756438b","path":"src/docs/Components/Form/Radio/previews/group-help-light","codes":{"js":"","html":"
    \n
    \n \n Group label\n \n \n Help text\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"86e54169-4849-5f48-97a6-3819893a811f","path":"src/docs/Components/Form/Radio/previews/group-default","codes":{"js":"","html":"
    \n
    \n \n Group label\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"8ceded4c-91cf-5a64-863e-db8dc788f60c","path":"src/docs/Components/Form/Radio/previews/group-inline","codes":{"js":"","html":"
    \n
    \n \n Group label\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"c1e020b2-c22c-5bde-834c-1d367bba263a","path":"src/docs/Components/Form/Radio/previews/group-requirement-light","codes":{"js":"","html":"
    \n
    \n \n Group label\n \n mandatory\n \n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"735b27e9-e8a9-5fec-a73a-c6e26f5a7efe","path":"src/docs/Components/Form/Toggle/previews/group-default","codes":{"js":"","html":"
    \n
    \n \n Group label\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"31fc7a60-c9f3-58e2-98f0-d7600b26d923","path":"src/docs/Components/Form/TextArea/previews/default","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"2e86b798-2d2e-59f3-b9a2-ccc2129ac1d1","path":"src/docs/Components/Form/TextArea/previews/disabled","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"48bdcfcb-ca36-5238-b1aa-e4ba38e2273c","path":"src/docs/Components/Form/TextArea/previews/help-text","codes":{"js":"","html":"
    \n
    \n \n \n Help text\n \n \n \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"f6669a7d-8fac-577e-ad2b-73c30441cee1","path":"src/docs/Components/Form/TextArea/previews/requirement","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"4072e541-30a0-55fd-aa76-629cf946b18e","path":"src/docs/Components/Form/TextArea/previews/invalid","codes":{"js":"","html":"
    \n
    \n \n \n \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"6bed6d7f-ee71-593c-8e80-951645b2fb61","path":"src/docs/Components/Form/TextArea/previews/textarea-all","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n\n
    \n
    \n \n \n \n
    \n
    \n\n
    \n
    \n \n \n \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n\n
    \n
    \n \n \n \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"ef76c09f-d832-5f1b-9649-a337c13cbe9a","path":"src/docs/Components/Form/TextArea/previews/textarea-full","codes":{"js":"","html":"
    \n
    \n \n\n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"14c7284f-c7b9-5034-96ff-e7302c8f32f1","path":"src/docs/Components/Form/TextArea/previews/valid","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.textarea';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-textarea {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.375;\n border-radius: 4px;\n display: block;\n width: 100%;\n position: relative;\n color: #222020;\n border: 1px solid #6f676c;\n background: #ffffff;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n padding: calc(0.75rem - 0.125em - 1px) 0.75rem calc(0.75rem + 0.125em - 1px);\n}\n.mc-textarea[type=number]::-webkit-inner-spin-button, .mc-textarea[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-textarea[type=number] {\n -moz-appearance: textfield;\n}\n.mc-textarea.is-hover,\n.mc-textarea:hover {\n border-color: #222020;\n}\n\n.mc-textarea.is-valid {\n border-color: #78be20;\n}\n.mc-textarea.is-invalid {\n border-color: #b42a27;\n}\n.mc-textarea.is-focus,\n.mc-textarea:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-textarea:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-textarea::-webkit-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-moz-placeholder {\n color: #887f87;\n}\n.mc-textarea:-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::-ms-input-placeholder {\n color: #887f87;\n}\n.mc-textarea::placeholder {\n color: #887f87;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"8c968153-9ea1-5df6-afc7-197af8fc57a4","path":"src/docs/Components/Form/Select/previews/default","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"e2201646-89f4-5a3b-ad84-3815bee4a1f8","path":"src/docs/Components/Form/Select/previews/disabled","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"f65996f3-debe-5858-99b7-789a653c1f75","path":"src/docs/Components/Form/Select/previews/help-text","codes":{"js":"","html":"
    \n
    \n \n \n Help text\n \n \n \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"95f947c8-1a03-5e14-89e5-2f54fdc2869f","path":"src/docs/Components/Form/Select/previews/invalid","codes":{"js":"","html":"
    \n
    \n \n \n \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"7c80c432-22fe-5bf9-ab34-4e790f47f824","path":"src/docs/Components/Form/Select/previews/requirement","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"67912e5d-a3e8-5729-9dd6-131d34329a25","path":"src/docs/Components/Form/Select/previews/select-full","codes":{"js":"","html":"
    \n
    \n \n \n mandatory\n \n \n Help text\n \n\n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"963c45b2-c684-502d-8107-06602fc9b61d","path":"src/docs/Components/Form/Select/previews/valid","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"dfab99c5-ec04-543a-ab47-7c721d639b68","path":"src/docs/Components/Form/Select/previews/sizes","codes":{"js":"","html":"
    \n
    \n \n \n \n
    \n
    \n\n
    \n
    \n \n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"5e4960fd-ad96-5c01-aa9f-6262afdeae4e","path":"src/docs/Components/Form/Select/previews/validation","codes":{"js":"","html":"
    \n
    \n
    \n
    \n \n\n \n
    \n
    \n\n
    \n
    \n
    \n \n \n \n \n \n \n \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"450288c8-8dba-5297-bd38-7ab5256d1ad7","path":"src/docs/Components/Form/TextInput/previews/input-default","codes":{"js":"","html":"
    \n
    \n \n\n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"1df8d295-831e-53a0-9bb8-f2b8db139cc1","path":"src/docs/Components/Form/Radio/previews/group-invalid-light","codes":{"js":"","html":"
    \n
    \n
    \n \n Group label\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"cb779728-27ef-563d-8393-6353ce4e0722","path":"src/docs/Components/Form/Radio/previews/group-invalid","codes":{"js":"","html":"
    \n
    \n Default\n
    \n\n
    \n
    \n \n Legend\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n\n
    \n Horizontal\n
    \n\n
    \n
    \n \n Legend\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n\n \n Error: A mistake has been made. Please try again.\n \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"703b0e2c-43a1-5b38-8ae1-9376c835c353","path":"src/docs/Components/Form/Radio/previews/group-help-text","codes":{"js":"","html":"
    \n
    \n Default\n
    \n\n
    \n
    \n \n Legend\n \n \n Help text\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n Horizontal\n
    \n\n
    \n
    \n \n Legend\n \n \n Help text\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"d36d37ac-3abc-5a33-a08d-0e99ddae1b13","path":"src/docs/Components/Form/Radio/previews/group-requirement","codes":{"js":"","html":"
    \n
    \n Default\n
    \n\n
    \n
    \n \n Legend\n \n mandatory\n \n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n
    \n Horizontal\n
    \n\n
    \n
    \n \n Legend\n \n mandatory\n \n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"92ce1c9f-067e-53eb-8cc4-167035664330","path":"src/docs/Components/Form/Toggle/previews/group-help-text-light","codes":{"js":"","html":"
    \n
    \n
    \n \n Group label\n \n \n Help text\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"988f9b98-e267-5f67-90d7-054aee7ffe93","path":"src/docs/Components/Form/Toggle/previews/group-help-text","codes":{"js":"","html":"
    \n
    \n
    \n \n Legend\n \n \n Help text\n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"394d1ea7-3d09-5a79-91af-84306e2c2232","path":"src/docs/Components/Form/Toggle/previews/group-requirement-light","codes":{"js":"","html":"
    \n
    \n
    \n \n Group label\n \n mandatory\n \n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"06d8506b-ed3f-5459-a2db-83f815e51c8c","path":"src/docs/Components/Form/Toggle/previews/group-requirement","codes":{"js":"","html":"
    \n
    \n
    \n \n Legend\n \n mandatory\n \n \n\n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.toggle';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face('regular');\n\n margin: auto;\n width: 93%;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n }\n\n &__container {\n margin: $mu100 auto;\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-toggle {\n display: block;\n}\n.mc-toggle__input {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle__label {\n font-size: 1rem;\n line-height: 1.125;\n height: 2rem;\n padding-left: 4.75rem;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: table-cell;\n position: relative;\n vertical-align: middle;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.mc-toggle__label::before, .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle__label::after {\n width: 2rem;\n}\n:disabled + .mc-toggle__label {\n cursor: not-allowed;\n}\n.mc-toggle__label::after, .mc-toggle__label::before {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-toggle__label::before {\n background-color: #887f87;\n will-change: background-color, border-color, box-shadow;\n -webkit-transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease;\n transition: background-color 100ms ease, border-color 100ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n:checked + .mc-toggle__label::before {\n background-color: #78be20;\n}\n:focus + .mc-toggle__label::before {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n:disabled + .mc-toggle__label::before {\n background-color: #eeeef0;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::before {\n background-color: #cbe3b5;\n cursor: not-allowed;\n}\n.mc-toggle__label::after {\n background-color: #ffffff;\n border: solid 3px #887f87;\n will-change: transform;\n -webkit-transition: border-color 100ms ease, -webkit-transform 100ms ease;\n transition: border-color 100ms ease, -webkit-transform 100ms ease;\n -o-transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease;\n transition: transform 100ms ease, border-color 100ms ease, -webkit-transform 100ms ease;\n}\n:checked + .mc-toggle__label::after {\n border-color: #78be20;\n background-color: #ffffff;\n -webkit-transform: translate(100%, -50%);\n -ms-transform: translate(100%, -50%);\n transform: translate(100%, -50%);\n}\n:disabled + .mc-toggle__label::after {\n border-color: #eeeef0;\n background-color: #bab6bc;\n cursor: not-allowed;\n}\n:disabled:checked + .mc-toggle__label::after {\n border-color: #cbe3b5;\n background-color: #ffffff;\n cursor: not-allowed;\n}\n:not(:disabled) + .mc-toggle__label:hover::after {\n background-color: #eeeef0;\n}\n:not(:checked) + .mc-toggle__label .mc-toggle__on, :checked + .mc-toggle__label .mc-toggle__off {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-toggle--s .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n}\n.mc-toggle--s .mc-toggle__label::before, .mc-toggle--s .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n}\n.mc-toggle--s .mc-toggle__label::before {\n width: 3rem;\n}\n.mc-toggle--s .mc-toggle__label::after {\n width: 1.5rem;\n}\n.mc-toggle--m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n}\n.mc-toggle--m .mc-toggle__label::before, .mc-toggle--m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n}\n.mc-toggle--m .mc-toggle__label::before {\n width: 4rem;\n}\n.mc-toggle--m .mc-toggle__label::after {\n width: 2rem;\n}\n\n@media screen and (min-width: 680px) {\n .mc-toggle--s\\@from-m .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before, .mc-toggle--s\\@from-m .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-m .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before, .mc-toggle--m\\@from-m .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-m .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-toggle--s\\@from-l .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before, .mc-toggle--s\\@from-l .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-l .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before, .mc-toggle--m\\@from-l .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-l .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-toggle--s\\@from-xl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before, .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before, .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-toggle--s\\@from-xxl .mc-toggle__label {\n height: 1.5rem;\n padding-left: 3.75rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before, .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n border-radius: 1.5rem;\n height: 1.5rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::before {\n width: 3rem;\n }\n .mc-toggle--s\\@from-xxl .mc-toggle__label::after {\n width: 1.5rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label {\n height: 2rem;\n padding-left: 4.75rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before, .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n border-radius: 2rem;\n height: 2rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::before {\n width: 4rem;\n }\n .mc-toggle--m\\@from-xxl .mc-toggle__label::after {\n width: 2rem;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: auto;\n width: 93%;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__container {\n margin: 1rem auto;\n}"}}},{"node":{"id":"798c4789-bd3a-5919-b4a6-24c48ef5eeca","path":"src/docs/Components/Form/TextInput/previews/input-sizes","codes":{"js":"","html":"
    \n
    \n Size M (default)\n
    \n\n
    \n \n\n \n
    \n\n
    \n Size S\n
    \n\n
    \n \n\n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n padding: $mu250;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n margin: $mu300 0 $mu100;\n padding: $mu100;\n text-align: center;\n\n &:first-child {\n margin: 0 0 $mu100;\n }\n }\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n padding: 2.5rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n margin: 3rem 0 1rem;\n padding: 1rem;\n text-align: center;\n}\n.example__title:first-child {\n margin: 0 0 1rem;\n}"}}},{"node":{"id":"cdeb8694-bb42-5ab9-ab8c-c70d7bef0119","path":"src/docs/Components/Pagination/previews/pagination-default","codes":{"js":"","html":"
    \n
    \n \n \n \n \n \n\n
    \n \n
    \n\n \n \n \n \n \n
    \n
    \n\n\n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.pagination';\n\n.example {\n margin: $mu100;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-pagination {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.mc-pagination__button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #887f87;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 0;\n min-height: 3rem;\n min-width: 3rem;\n}\n.mc-pagination__button.is-hover,\n.mc-pagination__button:hover {\n background-color: #554f52;\n color: #ffffff;\n}\n\n.mc-pagination__button.is-active,\n.mc-pagination__button:active {\n background-color: #3c3738;\n}\n\n.mc-pagination__button.is-disabled,\n.mc-pagination__button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-pagination__button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__button {\n min-height: 2rem;\n min-width: 2rem;\n }\n}\n.mc-pagination__button-icon {\n height: 2rem;\n margin: 0;\n width: 2rem;\n fill: currentColor;\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__button-icon {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n.mc-pagination__button-hidden {\n display: none;\n}\n.mc-pagination__field {\n margin: 0 1.5rem;\n}\n.mc-pagination__select {\n font-size: 1rem;\n line-height: 1.125;\n padding: 0.875rem 3rem 0.875rem calc(0.75rem - 1px);\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__select {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n padding: calc(0.5rem - 1px) 2.25rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n}\n.mc-pagination--light .mc-pagination__button:first-child {\n margin-right: 1.5rem;\n}\n\n.example {\n margin: 1rem;\n}"}}},{"node":{"id":"00f6f85d-378b-51bb-9b23-f4e6e3402490","path":"src/docs/Components/Pagination/previews/pagination","codes":{"js":"","html":"
    \n
    \n \n \n \n \n \n\n
    \n \n
    \n\n \n \n \n \n \n
    \n
    \n\n
    \n
    \n \n \n \n \n \n\n \n \n \n \n \n
    \n
    \n\n\n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n@import 'components/_c.pagination';\n\n.example {\n margin: $mu100;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.mc-pagination {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n.mc-pagination__button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #887f87;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n height: 0;\n min-height: 3rem;\n min-width: 3rem;\n}\n.mc-pagination__button.is-hover,\n.mc-pagination__button:hover {\n background-color: #554f52;\n color: #ffffff;\n}\n\n.mc-pagination__button.is-active,\n.mc-pagination__button:active {\n background-color: #3c3738;\n}\n\n.mc-pagination__button.is-disabled,\n.mc-pagination__button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-pagination__button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__button {\n min-height: 2rem;\n min-width: 2rem;\n }\n}\n.mc-pagination__button-icon {\n height: 2rem;\n margin: 0;\n width: 2rem;\n fill: currentColor;\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__button-icon {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n.mc-pagination__button-hidden {\n display: none;\n}\n.mc-pagination__field {\n margin: 0 1.5rem;\n}\n.mc-pagination__select {\n font-size: 1rem;\n line-height: 1.125;\n padding: 0.875rem 3rem 0.875rem calc(0.75rem - 1px);\n}\n@media screen and (min-width: 1280px) {\n .mc-pagination__select {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n padding: calc(0.5rem - 1px) 2.25rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n}\n.mc-pagination--light .mc-pagination__button:first-child {\n margin-right: 1.5rem;\n}\n\n.example {\n margin: 1rem;\n}"}}},{"node":{"id":"cb649114-7a6a-5f21-a5c0-b40c63280b47","path":"src/docs/Foundations/Typography/BodyStyles/previews/typographyBodyLarge","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n\n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n// for example purpose only\n@import 'layouts/_l.flexy';\n\n// body styles imports\n@import 'typography/_t.bodys';\n\n.example {\n padding: $mu200;\n\n &__title {\n @include set-font-scale('07', 's');\n @include set-font-face('semi-bold');\n\n text-align: center;\n }\n\n &__modifier {\n @include set-font-scale('04', 's');\n\n font-family: monospace;\n display: block;\n padding: $mu025 $mu050;\n border: solid 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.example {\n padding: 2rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.2173913043;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n text-align: center;\n}\n.example__modifier {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: monospace;\n display: block;\n padding: 0.25rem 0.5rem;\n border: solid 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"3117ee35-5367-5429-a987-1d9c8404677d","path":"src/docs/Foundations/Typography/BodyStyles/previews/typographyBody-variations","codes":{"js":"","html":"
    \n
    \n
    \n body-l\n
    \n
    \n
    \n
    \n body-m\n
    \n
    \n
    \n
    \n body-s\n
    \n
    \n
    \n
    \n
    \n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n
    \n
    \n\n
    \n mt-body-l--semi-bold\n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n mt-body-m--semi-bold\n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n mt-body-s--semi-bold\n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n
    \n
    \n
    \n mt-body-l--line-height-m\n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n mt-body-m--line-height-m\n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n mt-body-s--line-height-m\n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n// for example purpose only\n@import 'layouts/_l.flexy';\n\n// body styles imports\n@import 'typography/_t.bodys';\n\n.example {\n padding: $mu200;\n\n &__title {\n @include set-font-scale('07', 's');\n @include set-font-face('semi-bold');\n\n text-align: center;\n }\n\n &__modifier {\n @include set-font-scale('04', 's');\n\n font-family: monospace;\n display: block;\n padding: $mu025 $mu050;\n border: solid 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.example {\n padding: 2rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.2173913043;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n text-align: center;\n}\n.example__modifier {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: monospace;\n display: block;\n padding: 0.25rem 0.5rem;\n border: solid 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"fc832489-d95d-57e3-aabe-44f951d1fff8","path":"src/docs/Foundations/Typography/BodyStyles/previews/typographyBodyMedium","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n\n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n// for example purpose only\n@import 'layouts/_l.flexy';\n\n// body styles imports\n@import 'typography/_t.bodys';\n\n.example {\n padding: $mu200;\n\n &__title {\n @include set-font-scale('07', 's');\n @include set-font-face('semi-bold');\n\n text-align: center;\n }\n\n &__modifier {\n @include set-font-scale('04', 's');\n\n font-family: monospace;\n display: block;\n padding: $mu025 $mu050;\n border: solid 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.example {\n padding: 2rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.2173913043;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n text-align: center;\n}\n.example__modifier {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: monospace;\n display: block;\n padding: 0.25rem 0.5rem;\n border: solid 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"b559c530-baa8-5b19-bdc2-8585e0e6479e","path":"src/docs/Foundations/Typography/BodyStyles/previews/typographyBodySmall","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n\n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur\n distinctio eaque aperiam minima laudantium, harum temporibus adipisci\n repudiandae labore ipsum doloremque, quaerat quisquam. Repellendus ipsa\n officia unde asperiores cum sapiente.\n

    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n// for example purpose only\n@import 'layouts/_l.flexy';\n\n// body styles imports\n@import 'typography/_t.bodys';\n\n.example {\n padding: $mu200;\n\n &__title {\n @include set-font-scale('07', 's');\n @include set-font-face('semi-bold');\n\n text-align: center;\n }\n\n &__modifier {\n @include set-font-scale('04', 's');\n\n font-family: monospace;\n display: block;\n padding: $mu025 $mu050;\n border: solid 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.example {\n padding: 2rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.2173913043;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n text-align: center;\n}\n.example__modifier {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: monospace;\n display: block;\n padding: 0.25rem 0.5rem;\n border: solid 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"56a37579-1c37-5dc9-9ded-290f0edbadd8","path":"src/docs/Components/Notification/previews/notification-danger","codes":{"js":"","html":"
    \n
    \n
    \n

    Danger notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.notification';\n\n.example {\n padding: $mu250;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-notification {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n border-radius: 4px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 1.5rem 1.5rem 1.5rem 1rem;\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #000000;\n}\n.mc-notification::before {\n background-size: 2rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 2rem;\n flex: 0 0 2rem;\n height: 2rem;\n margin-right: 1rem;\n width: 2rem;\n}\n.mc-notification .mc-notification__content {\n padding-top: 0.25rem;\n}\n.mc-notification .mc-notification__title + .mc-notification__message {\n margin-top: 0.5rem;\n}\n.mc-notification::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification::before {\n background-color: transparent;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n}\n.mc-notification__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.mc-notification__title, .mc-notification__message {\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-notification__title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mc-notification__message {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mc-notification__link {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n margin-top: 0.5rem;\n}\n.mc-notification--information {\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n}\n.mc-notification--information::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--success {\n background: #eaf3e2;\n -webkit-box-shadow: inset 0 0 0 1px #78be20;\n box-shadow: inset 0 0 0 1px #78be20;\n}\n.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LDVBMTEsMTEsMCwxLDEsNSwxNiwxMSwxMSwwLDAsMSwxNiw1bTAtMkExMywxMywwLDEsMCwyOSwxNiwxMywxMywwLDAsMCwxNiwzWiIvPjxwYXRoIGQ9Ik0xNC4yLDIxLjQ1LDguNSwxNi4xOGExLDEsMCwxLDEsMS4zNS0xLjQ3bDQuMjgsNCw4LTguMDlhMSwxLDAsMCwxLDEuNDIsMCwxLDEsMCwwLDEsMCwxLjQxWiIvPjwvc3ZnPg==');\n}\n.mc-notification--warning {\n background: #fff5eb;\n -webkit-box-shadow: inset 0 0 0 1px #fc961e;\n box-shadow: inset 0 0 0 1px #fc961e;\n}\n.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZjOTYxZSI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDE4LjEzYTEsMSwwLDAsMS0xLTFWMTEuM2ExLDEsMCwwLDEsMiwwdjUuODNBMSwxLDAsMCwxLDE2LDE4LjEzWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjAuNyIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--danger {\n background: #feedee;\n -webkit-box-shadow: inset 0 0 0 1px #df382b;\n box-shadow: inset 0 0 0 1px #df382b;\n}\n.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2RmMzgyYiI+PHBhdGggZD0iTTE2LDNBMTMsMTMsMCwxLDAsMjksMTYsMTMsMTMsMCwwLDAsMTYsM1ptMCwyNEExMSwxMSwwLDEsMSwyNywxNiwxMSwxMSwwLDAsMSwxNiwyN1oiLz48cGF0aCBkPSJNMjAuNzEsMTEuMjlhMSwxLDAsMCwwLTEuNDIsMEwxNiwxNC41OWwtMy4yOS0zLjNhMSwxLDAsMCwwLTEuNDIsMS40MkwxNC41OSwxNmwtMy4zLDMuMjlhMSwxLDAsMCwwLDAsMS40MiwxLDEsMCwwLDAsMS40MiwwTDE2LDE3LjQxbDMuMjksMy4zYTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MkwxNy40MSwxNmwzLjMtMy4yOUExLDEsMCwwLDAsMjAuNzEsMTEuMjlaIi8+PC9zdmc+');\n}\n.mc-notification--s {\n padding: 0.75rem 0.75rem 1.5rem;\n}\n.mc-notification--s::before {\n background-size: 1.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 1.5rem;\n flex: 0 0 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n width: 1.5rem;\n}\n.mc-notification--s .mc-notification__content {\n padding-top: 0;\n}\n.mc-notification--s .mc-notification__title + .mc-notification__message {\n margin-top: 0.25rem;\n}\n.mc-notification--s::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMyNWE4ZDAiPjxwYXRoIGQ9Ik0xMiAyMmExMCAxMCAwIDExMTAtMTAgMTAgMTAgMCAwMS0xMCAxMHptMC0xOGE4IDggMCAxMDggOCA4IDggMCAwMC04LTh6Ii8+PHBhdGggZD0iTTEyIDE3YTEgMSAwIDAxLTEtMXYtNC4zOWExIDEgMCAwMTIgMFYxNmExIDEgMCAwMS0xIDF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3OGJlMjAiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNmYzk2MWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--s.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNkZjM4MmIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTE2LjIxIDcuODhhMSAxIDAgMDAtMS40MiAwbC0yLjc0IDIuNzQtMi44NC0yLjgzYTEgMSAwIDEwLTEuNDIgMS40MkwxMC42MyAxMmwtMi43NyAyLjc5YTEgMSAwIDAwMS40MSAxLjQybDIuNzgtMi43NyAyLjY4IDIuNjhhMSAxIDAgMDAxLjQxLTEuNDJMMTMuNDYgMTJsMi43NS0yLjdhMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-notification-closable {\n position: relative;\n}\n.mc-notification-closable__close {\n position: relative;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+') no-repeat;\n border: 0;\n cursor: pointer;\n display: block;\n height: 1rem;\n padding: 0;\n position: absolute;\n outline: 0;\n right: 1rem;\n top: 1rem;\n width: 1rem;\n}\n.mc-notification-closable__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-notification-closable__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n padding: 2.5rem;\n}"}}},{"node":{"id":"44c63893-c38e-54bf-8324-ac395438f92b","path":"src/docs/Components/Notification/previews/notification-success","codes":{"js":"","html":"
    \n
    \n
    \n

    Success notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.notification';\n\n.example {\n padding: $mu250;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-notification {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n border-radius: 4px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 1.5rem 1.5rem 1.5rem 1rem;\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #000000;\n}\n.mc-notification::before {\n background-size: 2rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 2rem;\n flex: 0 0 2rem;\n height: 2rem;\n margin-right: 1rem;\n width: 2rem;\n}\n.mc-notification .mc-notification__content {\n padding-top: 0.25rem;\n}\n.mc-notification .mc-notification__title + .mc-notification__message {\n margin-top: 0.5rem;\n}\n.mc-notification::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification::before {\n background-color: transparent;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n}\n.mc-notification__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.mc-notification__title, .mc-notification__message {\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-notification__title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mc-notification__message {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mc-notification__link {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n margin-top: 0.5rem;\n}\n.mc-notification--information {\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n}\n.mc-notification--information::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--success {\n background: #eaf3e2;\n -webkit-box-shadow: inset 0 0 0 1px #78be20;\n box-shadow: inset 0 0 0 1px #78be20;\n}\n.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LDVBMTEsMTEsMCwxLDEsNSwxNiwxMSwxMSwwLDAsMSwxNiw1bTAtMkExMywxMywwLDEsMCwyOSwxNiwxMywxMywwLDAsMCwxNiwzWiIvPjxwYXRoIGQ9Ik0xNC4yLDIxLjQ1LDguNSwxNi4xOGExLDEsMCwxLDEsMS4zNS0xLjQ3bDQuMjgsNCw4LTguMDlhMSwxLDAsMCwxLDEuNDIsMCwxLDEsMCwwLDEsMCwxLjQxWiIvPjwvc3ZnPg==');\n}\n.mc-notification--warning {\n background: #fff5eb;\n -webkit-box-shadow: inset 0 0 0 1px #fc961e;\n box-shadow: inset 0 0 0 1px #fc961e;\n}\n.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZjOTYxZSI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDE4LjEzYTEsMSwwLDAsMS0xLTFWMTEuM2ExLDEsMCwwLDEsMiwwdjUuODNBMSwxLDAsMCwxLDE2LDE4LjEzWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjAuNyIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--danger {\n background: #feedee;\n -webkit-box-shadow: inset 0 0 0 1px #df382b;\n box-shadow: inset 0 0 0 1px #df382b;\n}\n.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2RmMzgyYiI+PHBhdGggZD0iTTE2LDNBMTMsMTMsMCwxLDAsMjksMTYsMTMsMTMsMCwwLDAsMTYsM1ptMCwyNEExMSwxMSwwLDEsMSwyNywxNiwxMSwxMSwwLDAsMSwxNiwyN1oiLz48cGF0aCBkPSJNMjAuNzEsMTEuMjlhMSwxLDAsMCwwLTEuNDIsMEwxNiwxNC41OWwtMy4yOS0zLjNhMSwxLDAsMCwwLTEuNDIsMS40MkwxNC41OSwxNmwtMy4zLDMuMjlhMSwxLDAsMCwwLDAsMS40MiwxLDEsMCwwLDAsMS40MiwwTDE2LDE3LjQxbDMuMjksMy4zYTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MkwxNy40MSwxNmwzLjMtMy4yOUExLDEsMCwwLDAsMjAuNzEsMTEuMjlaIi8+PC9zdmc+');\n}\n.mc-notification--s {\n padding: 0.75rem 0.75rem 1.5rem;\n}\n.mc-notification--s::before {\n background-size: 1.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 1.5rem;\n flex: 0 0 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n width: 1.5rem;\n}\n.mc-notification--s .mc-notification__content {\n padding-top: 0;\n}\n.mc-notification--s .mc-notification__title + .mc-notification__message {\n margin-top: 0.25rem;\n}\n.mc-notification--s::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMyNWE4ZDAiPjxwYXRoIGQ9Ik0xMiAyMmExMCAxMCAwIDExMTAtMTAgMTAgMTAgMCAwMS0xMCAxMHptMC0xOGE4IDggMCAxMDggOCA4IDggMCAwMC04LTh6Ii8+PHBhdGggZD0iTTEyIDE3YTEgMSAwIDAxLTEtMXYtNC4zOWExIDEgMCAwMTIgMFYxNmExIDEgMCAwMS0xIDF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3OGJlMjAiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNmYzk2MWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--s.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNkZjM4MmIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTE2LjIxIDcuODhhMSAxIDAgMDAtMS40MiAwbC0yLjc0IDIuNzQtMi44NC0yLjgzYTEgMSAwIDEwLTEuNDIgMS40MkwxMC42MyAxMmwtMi43NyAyLjc5YTEgMSAwIDAwMS40MSAxLjQybDIuNzgtMi43NyAyLjY4IDIuNjhhMSAxIDAgMDAxLjQxLTEuNDJMMTMuNDYgMTJsMi43NS0yLjdhMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-notification-closable {\n position: relative;\n}\n.mc-notification-closable__close {\n position: relative;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+') no-repeat;\n border: 0;\n cursor: pointer;\n display: block;\n height: 1rem;\n padding: 0;\n position: absolute;\n outline: 0;\n right: 1rem;\n top: 1rem;\n width: 1rem;\n}\n.mc-notification-closable__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-notification-closable__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n padding: 2.5rem;\n}"}}},{"node":{"id":"da9dcaeb-54a8-5472-ba23-45b04efc6bf9","path":"src/docs/Components/Notification/previews/notification","codes":{"js":"","html":"
    \n
    \n
    \n

    Information notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.notification';\n\n.example {\n padding: $mu250;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-notification {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n border-radius: 4px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 1.5rem 1.5rem 1.5rem 1rem;\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #000000;\n}\n.mc-notification::before {\n background-size: 2rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 2rem;\n flex: 0 0 2rem;\n height: 2rem;\n margin-right: 1rem;\n width: 2rem;\n}\n.mc-notification .mc-notification__content {\n padding-top: 0.25rem;\n}\n.mc-notification .mc-notification__title + .mc-notification__message {\n margin-top: 0.5rem;\n}\n.mc-notification::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification::before {\n background-color: transparent;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n}\n.mc-notification__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.mc-notification__title, .mc-notification__message {\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-notification__title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mc-notification__message {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mc-notification__link {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n margin-top: 0.5rem;\n}\n.mc-notification--information {\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n}\n.mc-notification--information::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--success {\n background: #eaf3e2;\n -webkit-box-shadow: inset 0 0 0 1px #78be20;\n box-shadow: inset 0 0 0 1px #78be20;\n}\n.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LDVBMTEsMTEsMCwxLDEsNSwxNiwxMSwxMSwwLDAsMSwxNiw1bTAtMkExMywxMywwLDEsMCwyOSwxNiwxMywxMywwLDAsMCwxNiwzWiIvPjxwYXRoIGQ9Ik0xNC4yLDIxLjQ1LDguNSwxNi4xOGExLDEsMCwxLDEsMS4zNS0xLjQ3bDQuMjgsNCw4LTguMDlhMSwxLDAsMCwxLDEuNDIsMCwxLDEsMCwwLDEsMCwxLjQxWiIvPjwvc3ZnPg==');\n}\n.mc-notification--warning {\n background: #fff5eb;\n -webkit-box-shadow: inset 0 0 0 1px #fc961e;\n box-shadow: inset 0 0 0 1px #fc961e;\n}\n.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZjOTYxZSI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDE4LjEzYTEsMSwwLDAsMS0xLTFWMTEuM2ExLDEsMCwwLDEsMiwwdjUuODNBMSwxLDAsMCwxLDE2LDE4LjEzWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjAuNyIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--danger {\n background: #feedee;\n -webkit-box-shadow: inset 0 0 0 1px #df382b;\n box-shadow: inset 0 0 0 1px #df382b;\n}\n.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2RmMzgyYiI+PHBhdGggZD0iTTE2LDNBMTMsMTMsMCwxLDAsMjksMTYsMTMsMTMsMCwwLDAsMTYsM1ptMCwyNEExMSwxMSwwLDEsMSwyNywxNiwxMSwxMSwwLDAsMSwxNiwyN1oiLz48cGF0aCBkPSJNMjAuNzEsMTEuMjlhMSwxLDAsMCwwLTEuNDIsMEwxNiwxNC41OWwtMy4yOS0zLjNhMSwxLDAsMCwwLTEuNDIsMS40MkwxNC41OSwxNmwtMy4zLDMuMjlhMSwxLDAsMCwwLDAsMS40MiwxLDEsMCwwLDAsMS40MiwwTDE2LDE3LjQxbDMuMjksMy4zYTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MkwxNy40MSwxNmwzLjMtMy4yOUExLDEsMCwwLDAsMjAuNzEsMTEuMjlaIi8+PC9zdmc+');\n}\n.mc-notification--s {\n padding: 0.75rem 0.75rem 1.5rem;\n}\n.mc-notification--s::before {\n background-size: 1.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 1.5rem;\n flex: 0 0 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n width: 1.5rem;\n}\n.mc-notification--s .mc-notification__content {\n padding-top: 0;\n}\n.mc-notification--s .mc-notification__title + .mc-notification__message {\n margin-top: 0.25rem;\n}\n.mc-notification--s::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMyNWE4ZDAiPjxwYXRoIGQ9Ik0xMiAyMmExMCAxMCAwIDExMTAtMTAgMTAgMTAgMCAwMS0xMCAxMHptMC0xOGE4IDggMCAxMDggOCA4IDggMCAwMC04LTh6Ii8+PHBhdGggZD0iTTEyIDE3YTEgMSAwIDAxLTEtMXYtNC4zOWExIDEgMCAwMTIgMFYxNmExIDEgMCAwMS0xIDF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3OGJlMjAiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNmYzk2MWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--s.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNkZjM4MmIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTE2LjIxIDcuODhhMSAxIDAgMDAtMS40MiAwbC0yLjc0IDIuNzQtMi44NC0yLjgzYTEgMSAwIDEwLTEuNDIgMS40MkwxMC42MyAxMmwtMi43NyAyLjc5YTEgMSAwIDAwMS40MSAxLjQybDIuNzgtMi43NyAyLjY4IDIuNjhhMSAxIDAgMDAxLjQxLTEuNDJMMTMuNDYgMTJsMi43NS0yLjdhMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-notification-closable {\n position: relative;\n}\n.mc-notification-closable__close {\n position: relative;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+') no-repeat;\n border: 0;\n cursor: pointer;\n display: block;\n height: 1rem;\n padding: 0;\n position: absolute;\n outline: 0;\n right: 1rem;\n top: 1rem;\n width: 1rem;\n}\n.mc-notification-closable__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-notification-closable__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n padding: 2.5rem;\n}"}}},{"node":{"id":"1b1c8e63-a5aa-5018-9b32-a84e23aef683","path":"src/docs/Components/Notification/previews/notification-warning","codes":{"js":"","html":"
    \n
    \n
    \n

    Warning notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    ","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.notification';\n\n.example {\n padding: $mu250;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-notification {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n border-radius: 4px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 1.5rem 1.5rem 1.5rem 1rem;\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #000000;\n}\n.mc-notification::before {\n background-size: 2rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 2rem;\n flex: 0 0 2rem;\n height: 2rem;\n margin-right: 1rem;\n width: 2rem;\n}\n.mc-notification .mc-notification__content {\n padding-top: 0.25rem;\n}\n.mc-notification .mc-notification__title + .mc-notification__message {\n margin-top: 0.5rem;\n}\n.mc-notification::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification::before {\n background-color: transparent;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n}\n.mc-notification__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.mc-notification__title, .mc-notification__message {\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-notification__title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mc-notification__message {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mc-notification__link {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n margin-top: 0.5rem;\n}\n.mc-notification--information {\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n}\n.mc-notification--information::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--success {\n background: #eaf3e2;\n -webkit-box-shadow: inset 0 0 0 1px #78be20;\n box-shadow: inset 0 0 0 1px #78be20;\n}\n.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LDVBMTEsMTEsMCwxLDEsNSwxNiwxMSwxMSwwLDAsMSwxNiw1bTAtMkExMywxMywwLDEsMCwyOSwxNiwxMywxMywwLDAsMCwxNiwzWiIvPjxwYXRoIGQ9Ik0xNC4yLDIxLjQ1LDguNSwxNi4xOGExLDEsMCwxLDEsMS4zNS0xLjQ3bDQuMjgsNCw4LTguMDlhMSwxLDAsMCwxLDEuNDIsMCwxLDEsMCwwLDEsMCwxLjQxWiIvPjwvc3ZnPg==');\n}\n.mc-notification--warning {\n background: #fff5eb;\n -webkit-box-shadow: inset 0 0 0 1px #fc961e;\n box-shadow: inset 0 0 0 1px #fc961e;\n}\n.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZjOTYxZSI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDE4LjEzYTEsMSwwLDAsMS0xLTFWMTEuM2ExLDEsMCwwLDEsMiwwdjUuODNBMSwxLDAsMCwxLDE2LDE4LjEzWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjAuNyIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--danger {\n background: #feedee;\n -webkit-box-shadow: inset 0 0 0 1px #df382b;\n box-shadow: inset 0 0 0 1px #df382b;\n}\n.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2RmMzgyYiI+PHBhdGggZD0iTTE2LDNBMTMsMTMsMCwxLDAsMjksMTYsMTMsMTMsMCwwLDAsMTYsM1ptMCwyNEExMSwxMSwwLDEsMSwyNywxNiwxMSwxMSwwLDAsMSwxNiwyN1oiLz48cGF0aCBkPSJNMjAuNzEsMTEuMjlhMSwxLDAsMCwwLTEuNDIsMEwxNiwxNC41OWwtMy4yOS0zLjNhMSwxLDAsMCwwLTEuNDIsMS40MkwxNC41OSwxNmwtMy4zLDMuMjlhMSwxLDAsMCwwLDAsMS40MiwxLDEsMCwwLDAsMS40MiwwTDE2LDE3LjQxbDMuMjksMy4zYTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MkwxNy40MSwxNmwzLjMtMy4yOUExLDEsMCwwLDAsMjAuNzEsMTEuMjlaIi8+PC9zdmc+');\n}\n.mc-notification--s {\n padding: 0.75rem 0.75rem 1.5rem;\n}\n.mc-notification--s::before {\n background-size: 1.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 1.5rem;\n flex: 0 0 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n width: 1.5rem;\n}\n.mc-notification--s .mc-notification__content {\n padding-top: 0;\n}\n.mc-notification--s .mc-notification__title + .mc-notification__message {\n margin-top: 0.25rem;\n}\n.mc-notification--s::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMyNWE4ZDAiPjxwYXRoIGQ9Ik0xMiAyMmExMCAxMCAwIDExMTAtMTAgMTAgMTAgMCAwMS0xMCAxMHptMC0xOGE4IDggMCAxMDggOCA4IDggMCAwMC04LTh6Ii8+PHBhdGggZD0iTTEyIDE3YTEgMSAwIDAxLTEtMXYtNC4zOWExIDEgMCAwMTIgMFYxNmExIDEgMCAwMS0xIDF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3OGJlMjAiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNmYzk2MWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--s.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNkZjM4MmIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTE2LjIxIDcuODhhMSAxIDAgMDAtMS40MiAwbC0yLjc0IDIuNzQtMi44NC0yLjgzYTEgMSAwIDEwLTEuNDIgMS40MkwxMC42MyAxMmwtMi43NyAyLjc5YTEgMSAwIDAwMS40MSAxLjQybDIuNzgtMi43NyAyLjY4IDIuNjhhMSAxIDAgMDAxLjQxLTEuNDJMMTMuNDYgMTJsMi43NS0yLjdhMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-notification-closable {\n position: relative;\n}\n.mc-notification-closable__close {\n position: relative;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+') no-repeat;\n border: 0;\n cursor: pointer;\n display: block;\n height: 1rem;\n padding: 0;\n position: absolute;\n outline: 0;\n right: 1rem;\n top: 1rem;\n width: 1rem;\n}\n.mc-notification-closable__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-notification-closable__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n padding: 2.5rem;\n}"}}},{"node":{"id":"97c2c512-2c50-5fc3-bb77-ddd380688b9d","path":"src/docs/Components/Notification/previews/notification-types","codes":{"js":"","html":"
    \n
    \n
    \n
    \n

    Information notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    \n
    \n
    \n
    \n

    Success notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    \n
    \n
    \n
    \n

    Warning notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    \n
    \n
    \n
    \n

    Danger notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean\n commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.notification';\n\nbody {\n padding-bottom: $mu600;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n display: flex;\n flex-flow: row wrap;\n\n &__mc-notification {\n padding: $mu050;\n flex: 0 0 49%;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-notification {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n border-radius: 4px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 1.5rem 1.5rem 1.5rem 1rem;\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #000000;\n}\n.mc-notification::before {\n background-size: 2rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 2rem;\n flex: 0 0 2rem;\n height: 2rem;\n margin-right: 1rem;\n width: 2rem;\n}\n.mc-notification .mc-notification__content {\n padding-top: 0.25rem;\n}\n.mc-notification .mc-notification__title + .mc-notification__message {\n margin-top: 0.5rem;\n}\n.mc-notification::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification::before {\n background-color: transparent;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n}\n.mc-notification__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.mc-notification__title, .mc-notification__message {\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-notification__title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mc-notification__message {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mc-notification__link {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n margin-top: 0.5rem;\n}\n.mc-notification--information {\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n}\n.mc-notification--information::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--success {\n background: #eaf3e2;\n -webkit-box-shadow: inset 0 0 0 1px #78be20;\n box-shadow: inset 0 0 0 1px #78be20;\n}\n.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LDVBMTEsMTEsMCwxLDEsNSwxNiwxMSwxMSwwLDAsMSwxNiw1bTAtMkExMywxMywwLDEsMCwyOSwxNiwxMywxMywwLDAsMCwxNiwzWiIvPjxwYXRoIGQ9Ik0xNC4yLDIxLjQ1LDguNSwxNi4xOGExLDEsMCwxLDEsMS4zNS0xLjQ3bDQuMjgsNCw4LTguMDlhMSwxLDAsMCwxLDEuNDIsMCwxLDEsMCwwLDEsMCwxLjQxWiIvPjwvc3ZnPg==');\n}\n.mc-notification--warning {\n background: #fff5eb;\n -webkit-box-shadow: inset 0 0 0 1px #fc961e;\n box-shadow: inset 0 0 0 1px #fc961e;\n}\n.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZjOTYxZSI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDE4LjEzYTEsMSwwLDAsMS0xLTFWMTEuM2ExLDEsMCwwLDEsMiwwdjUuODNBMSwxLDAsMCwxLDE2LDE4LjEzWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjAuNyIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--danger {\n background: #feedee;\n -webkit-box-shadow: inset 0 0 0 1px #df382b;\n box-shadow: inset 0 0 0 1px #df382b;\n}\n.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2RmMzgyYiI+PHBhdGggZD0iTTE2LDNBMTMsMTMsMCwxLDAsMjksMTYsMTMsMTMsMCwwLDAsMTYsM1ptMCwyNEExMSwxMSwwLDEsMSwyNywxNiwxMSwxMSwwLDAsMSwxNiwyN1oiLz48cGF0aCBkPSJNMjAuNzEsMTEuMjlhMSwxLDAsMCwwLTEuNDIsMEwxNiwxNC41OWwtMy4yOS0zLjNhMSwxLDAsMCwwLTEuNDIsMS40MkwxNC41OSwxNmwtMy4zLDMuMjlhMSwxLDAsMCwwLDAsMS40MiwxLDEsMCwwLDAsMS40MiwwTDE2LDE3LjQxbDMuMjksMy4zYTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MkwxNy40MSwxNmwzLjMtMy4yOUExLDEsMCwwLDAsMjAuNzEsMTEuMjlaIi8+PC9zdmc+');\n}\n.mc-notification--s {\n padding: 0.75rem 0.75rem 1.5rem;\n}\n.mc-notification--s::before {\n background-size: 1.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 1.5rem;\n flex: 0 0 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n width: 1.5rem;\n}\n.mc-notification--s .mc-notification__content {\n padding-top: 0;\n}\n.mc-notification--s .mc-notification__title + .mc-notification__message {\n margin-top: 0.25rem;\n}\n.mc-notification--s::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMyNWE4ZDAiPjxwYXRoIGQ9Ik0xMiAyMmExMCAxMCAwIDExMTAtMTAgMTAgMTAgMCAwMS0xMCAxMHptMC0xOGE4IDggMCAxMDggOCA4IDggMCAwMC04LTh6Ii8+PHBhdGggZD0iTTEyIDE3YTEgMSAwIDAxLTEtMXYtNC4zOWExIDEgMCAwMTIgMFYxNmExIDEgMCAwMS0xIDF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3OGJlMjAiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNmYzk2MWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--s.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNkZjM4MmIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTE2LjIxIDcuODhhMSAxIDAgMDAtMS40MiAwbC0yLjc0IDIuNzQtMi44NC0yLjgzYTEgMSAwIDEwLTEuNDIgMS40MkwxMC42MyAxMmwtMi43NyAyLjc5YTEgMSAwIDAwMS40MSAxLjQybDIuNzgtMi43NyAyLjY4IDIuNjhhMSAxIDAgMDAxLjQxLTEuNDJMMTMuNDYgMTJsMi43NS0yLjdhMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-notification-closable {\n position: relative;\n}\n.mc-notification-closable__close {\n position: relative;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+') no-repeat;\n border: 0;\n cursor: pointer;\n display: block;\n height: 1rem;\n padding: 0;\n position: absolute;\n outline: 0;\n right: 1rem;\n top: 1rem;\n width: 1rem;\n}\n.mc-notification-closable__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-notification-closable__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\nbody {\n padding-bottom: 6rem;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n}\n.example__mc-notification {\n padding: 0.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 49%;\n flex: 0 0 49%;\n}"}}},{"node":{"id":"c52a4ff7-816d-54b2-8eed-26b6d39d047f","path":"src/docs/Foundations/Spacing/MarginAndPaddings/previews/margins","codes":{"js":"","html":"
    \n
    \n margin-bottom of 0.75mu
    \n margin-left of 3.5mu
    \n padding-top of 0.75mu
    \n padding-bottom of 2mu
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'utilities/_u.margin';\n@import 'utilities/_u.padding';\n\n.example {\n background-color: $color-primary-02-200;\n\n &__item {\n background-color: $color-primary-01-200;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mu-mt-025 {\n margin-top: 0.25rem !important;\n}\n\n.mu-mt-050 {\n margin-top: 0.5rem !important;\n}\n\n.mu-mt-075 {\n margin-top: 0.75rem !important;\n}\n\n.mu-mt-100 {\n margin-top: 1rem !important;\n}\n\n.mu-mt-125 {\n margin-top: 1.25rem !important;\n}\n\n.mu-mt-150 {\n margin-top: 1.5rem !important;\n}\n\n.mu-mt-200 {\n margin-top: 2rem !important;\n}\n\n.mu-mt-250 {\n margin-top: 2.5rem !important;\n}\n\n.mu-mt-300 {\n margin-top: 3rem !important;\n}\n\n.mu-mt-350 {\n margin-top: 3.5rem !important;\n}\n\n.mu-mt-400 {\n margin-top: 4rem !important;\n}\n\n.mu-mt-500 {\n margin-top: 5rem !important;\n}\n\n.mu-mt-600 {\n margin-top: 6rem !important;\n}\n\n.mu-mt-700 {\n margin-top: 7rem !important;\n}\n\n.mu-mt-800 {\n margin-top: 8rem !important;\n}\n\n.mu-mt-900 {\n margin-top: 9rem !important;\n}\n\n.mu-mt-1000 {\n margin-top: 10rem !important;\n}\n\n.mu-mr-025 {\n margin-right: 0.25rem !important;\n}\n\n.mu-mr-050 {\n margin-right: 0.5rem !important;\n}\n\n.mu-mr-075 {\n margin-right: 0.75rem !important;\n}\n\n.mu-mr-100 {\n margin-right: 1rem !important;\n}\n\n.mu-mr-125 {\n margin-right: 1.25rem !important;\n}\n\n.mu-mr-150 {\n margin-right: 1.5rem !important;\n}\n\n.mu-mr-200 {\n margin-right: 2rem !important;\n}\n\n.mu-mr-250 {\n margin-right: 2.5rem !important;\n}\n\n.mu-mr-300 {\n margin-right: 3rem !important;\n}\n\n.mu-mr-350 {\n margin-right: 3.5rem !important;\n}\n\n.mu-mr-400 {\n margin-right: 4rem !important;\n}\n\n.mu-mr-500 {\n margin-right: 5rem !important;\n}\n\n.mu-mr-600 {\n margin-right: 6rem !important;\n}\n\n.mu-mr-700 {\n margin-right: 7rem !important;\n}\n\n.mu-mr-800 {\n margin-right: 8rem !important;\n}\n\n.mu-mr-900 {\n margin-right: 9rem !important;\n}\n\n.mu-mr-1000 {\n margin-right: 10rem !important;\n}\n\n.mu-ml-025 {\n margin-left: 0.25rem !important;\n}\n\n.mu-ml-050 {\n margin-left: 0.5rem !important;\n}\n\n.mu-ml-075 {\n margin-left: 0.75rem !important;\n}\n\n.mu-ml-100 {\n margin-left: 1rem !important;\n}\n\n.mu-ml-125 {\n margin-left: 1.25rem !important;\n}\n\n.mu-ml-150 {\n margin-left: 1.5rem !important;\n}\n\n.mu-ml-200 {\n margin-left: 2rem !important;\n}\n\n.mu-ml-250 {\n margin-left: 2.5rem !important;\n}\n\n.mu-ml-300 {\n margin-left: 3rem !important;\n}\n\n.mu-ml-350 {\n margin-left: 3.5rem !important;\n}\n\n.mu-ml-400 {\n margin-left: 4rem !important;\n}\n\n.mu-ml-500 {\n margin-left: 5rem !important;\n}\n\n.mu-ml-600 {\n margin-left: 6rem !important;\n}\n\n.mu-ml-700 {\n margin-left: 7rem !important;\n}\n\n.mu-ml-800 {\n margin-left: 8rem !important;\n}\n\n.mu-ml-900 {\n margin-left: 9rem !important;\n}\n\n.mu-ml-1000 {\n margin-left: 10rem !important;\n}\n\n.mu-mb-025 {\n margin-bottom: 0.25rem !important;\n}\n\n.mu-mb-050 {\n margin-bottom: 0.5rem !important;\n}\n\n.mu-mb-075 {\n margin-bottom: 0.75rem !important;\n}\n\n.mu-mb-100 {\n margin-bottom: 1rem !important;\n}\n\n.mu-mb-125 {\n margin-bottom: 1.25rem !important;\n}\n\n.mu-mb-150 {\n margin-bottom: 1.5rem !important;\n}\n\n.mu-mb-200 {\n margin-bottom: 2rem !important;\n}\n\n.mu-mb-250 {\n margin-bottom: 2.5rem !important;\n}\n\n.mu-mb-300 {\n margin-bottom: 3rem !important;\n}\n\n.mu-mb-350 {\n margin-bottom: 3.5rem !important;\n}\n\n.mu-mb-400 {\n margin-bottom: 4rem !important;\n}\n\n.mu-mb-500 {\n margin-bottom: 5rem !important;\n}\n\n.mu-mb-600 {\n margin-bottom: 6rem !important;\n}\n\n.mu-mb-700 {\n margin-bottom: 7rem !important;\n}\n\n.mu-mb-800 {\n margin-bottom: 8rem !important;\n}\n\n.mu-mb-900 {\n margin-bottom: 9rem !important;\n}\n\n.mu-mb-1000 {\n margin-bottom: 10rem !important;\n}\n\n.mu-m-025 {\n margin: 0.25rem !important;\n}\n\n.mu-m-050 {\n margin: 0.5rem !important;\n}\n\n.mu-m-075 {\n margin: 0.75rem !important;\n}\n\n.mu-m-100 {\n margin: 1rem !important;\n}\n\n.mu-m-125 {\n margin: 1.25rem !important;\n}\n\n.mu-m-150 {\n margin: 1.5rem !important;\n}\n\n.mu-m-200 {\n margin: 2rem !important;\n}\n\n.mu-m-250 {\n margin: 2.5rem !important;\n}\n\n.mu-m-300 {\n margin: 3rem !important;\n}\n\n.mu-m-350 {\n margin: 3.5rem !important;\n}\n\n.mu-m-400 {\n margin: 4rem !important;\n}\n\n.mu-m-500 {\n margin: 5rem !important;\n}\n\n.mu-m-600 {\n margin: 6rem !important;\n}\n\n.mu-m-700 {\n margin: 7rem !important;\n}\n\n.mu-m-800 {\n margin: 8rem !important;\n}\n\n.mu-m-900 {\n margin: 9rem !important;\n}\n\n.mu-m-1000 {\n margin: 10rem !important;\n}\n.mu-pt-025 {\n padding-top: 0.25rem !important;\n}\n\n.mu-pt-050 {\n padding-top: 0.5rem !important;\n}\n\n.mu-pt-075 {\n padding-top: 0.75rem !important;\n}\n\n.mu-pt-100 {\n padding-top: 1rem !important;\n}\n\n.mu-pt-125 {\n padding-top: 1.25rem !important;\n}\n\n.mu-pt-150 {\n padding-top: 1.5rem !important;\n}\n\n.mu-pt-200 {\n padding-top: 2rem !important;\n}\n\n.mu-pt-250 {\n padding-top: 2.5rem !important;\n}\n\n.mu-pt-300 {\n padding-top: 3rem !important;\n}\n\n.mu-pt-350 {\n padding-top: 3.5rem !important;\n}\n\n.mu-pt-400 {\n padding-top: 4rem !important;\n}\n\n.mu-pt-500 {\n padding-top: 5rem !important;\n}\n\n.mu-pt-600 {\n padding-top: 6rem !important;\n}\n\n.mu-pt-700 {\n padding-top: 7rem !important;\n}\n\n.mu-pt-800 {\n padding-top: 8rem !important;\n}\n\n.mu-pt-900 {\n padding-top: 9rem !important;\n}\n\n.mu-pt-1000 {\n padding-top: 10rem !important;\n}\n\n.mu-pr-025 {\n padding-right: 0.25rem !important;\n}\n\n.mu-pr-050 {\n padding-right: 0.5rem !important;\n}\n\n.mu-pr-075 {\n padding-right: 0.75rem !important;\n}\n\n.mu-pr-100 {\n padding-right: 1rem !important;\n}\n\n.mu-pr-125 {\n padding-right: 1.25rem !important;\n}\n\n.mu-pr-150 {\n padding-right: 1.5rem !important;\n}\n\n.mu-pr-200 {\n padding-right: 2rem !important;\n}\n\n.mu-pr-250 {\n padding-right: 2.5rem !important;\n}\n\n.mu-pr-300 {\n padding-right: 3rem !important;\n}\n\n.mu-pr-350 {\n padding-right: 3.5rem !important;\n}\n\n.mu-pr-400 {\n padding-right: 4rem !important;\n}\n\n.mu-pr-500 {\n padding-right: 5rem !important;\n}\n\n.mu-pr-600 {\n padding-right: 6rem !important;\n}\n\n.mu-pr-700 {\n padding-right: 7rem !important;\n}\n\n.mu-pr-800 {\n padding-right: 8rem !important;\n}\n\n.mu-pr-900 {\n padding-right: 9rem !important;\n}\n\n.mu-pr-1000 {\n padding-right: 10rem !important;\n}\n\n.mu-pl-025 {\n padding-left: 0.25rem !important;\n}\n\n.mu-pl-050 {\n padding-left: 0.5rem !important;\n}\n\n.mu-pl-075 {\n padding-left: 0.75rem !important;\n}\n\n.mu-pl-100 {\n padding-left: 1rem !important;\n}\n\n.mu-pl-125 {\n padding-left: 1.25rem !important;\n}\n\n.mu-pl-150 {\n padding-left: 1.5rem !important;\n}\n\n.mu-pl-200 {\n padding-left: 2rem !important;\n}\n\n.mu-pl-250 {\n padding-left: 2.5rem !important;\n}\n\n.mu-pl-300 {\n padding-left: 3rem !important;\n}\n\n.mu-pl-350 {\n padding-left: 3.5rem !important;\n}\n\n.mu-pl-400 {\n padding-left: 4rem !important;\n}\n\n.mu-pl-500 {\n padding-left: 5rem !important;\n}\n\n.mu-pl-600 {\n padding-left: 6rem !important;\n}\n\n.mu-pl-700 {\n padding-left: 7rem !important;\n}\n\n.mu-pl-800 {\n padding-left: 8rem !important;\n}\n\n.mu-pl-900 {\n padding-left: 9rem !important;\n}\n\n.mu-pl-1000 {\n padding-left: 10rem !important;\n}\n\n.mu-pb-025 {\n padding-bottom: 0.25rem !important;\n}\n\n.mu-pb-050 {\n padding-bottom: 0.5rem !important;\n}\n\n.mu-pb-075 {\n padding-bottom: 0.75rem !important;\n}\n\n.mu-pb-100 {\n padding-bottom: 1rem !important;\n}\n\n.mu-pb-125 {\n padding-bottom: 1.25rem !important;\n}\n\n.mu-pb-150 {\n padding-bottom: 1.5rem !important;\n}\n\n.mu-pb-200 {\n padding-bottom: 2rem !important;\n}\n\n.mu-pb-250 {\n padding-bottom: 2.5rem !important;\n}\n\n.mu-pb-300 {\n padding-bottom: 3rem !important;\n}\n\n.mu-pb-350 {\n padding-bottom: 3.5rem !important;\n}\n\n.mu-pb-400 {\n padding-bottom: 4rem !important;\n}\n\n.mu-pb-500 {\n padding-bottom: 5rem !important;\n}\n\n.mu-pb-600 {\n padding-bottom: 6rem !important;\n}\n\n.mu-pb-700 {\n padding-bottom: 7rem !important;\n}\n\n.mu-pb-800 {\n padding-bottom: 8rem !important;\n}\n\n.mu-pb-900 {\n padding-bottom: 9rem !important;\n}\n\n.mu-pb-1000 {\n padding-bottom: 10rem !important;\n}\n\n.mu-p-025 {\n padding: 0.25rem !important;\n}\n\n.mu-p-050 {\n padding: 0.5rem !important;\n}\n\n.mu-p-075 {\n padding: 0.75rem !important;\n}\n\n.mu-p-100 {\n padding: 1rem !important;\n}\n\n.mu-p-125 {\n padding: 1.25rem !important;\n}\n\n.mu-p-150 {\n padding: 1.5rem !important;\n}\n\n.mu-p-200 {\n padding: 2rem !important;\n}\n\n.mu-p-250 {\n padding: 2.5rem !important;\n}\n\n.mu-p-300 {\n padding: 3rem !important;\n}\n\n.mu-p-350 {\n padding: 3.5rem !important;\n}\n\n.mu-p-400 {\n padding: 4rem !important;\n}\n\n.mu-p-500 {\n padding: 5rem !important;\n}\n\n.mu-p-600 {\n padding: 6rem !important;\n}\n\n.mu-p-700 {\n padding: 7rem !important;\n}\n\n.mu-p-800 {\n padding: 8rem !important;\n}\n\n.mu-p-900 {\n padding: 9rem !important;\n}\n\n.mu-p-1000 {\n padding: 10rem !important;\n}\n.example {\n background-color: #a5d1cb;\n}\n.example__item {\n background-color: #cbe3b5;\n}"}}},{"node":{"id":"30421b86-54ad-5516-9b77-e3797f29f2ab","path":"src/docs/Components/Notification/previews/sizes","codes":{"js":"","html":"
    \n
    \n Size M (default)\n
    \n\n
    \n
    \n

    Information notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n\n
    \n Size S\n
    \n\n
    \n
    \n

    Information notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo\n ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.notification';\n\n.example {\n padding: $mu250;\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n margin: $mu300 0 $mu100;\n padding: $mu100;\n text-align: center;\n\n &:first-child {\n margin: 0 0 $mu100;\n }\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-notification {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n border-radius: 4px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 1.5rem 1.5rem 1.5rem 1rem;\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #000000;\n}\n.mc-notification::before {\n background-size: 2rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 2rem;\n flex: 0 0 2rem;\n height: 2rem;\n margin-right: 1rem;\n width: 2rem;\n}\n.mc-notification .mc-notification__content {\n padding-top: 0.25rem;\n}\n.mc-notification .mc-notification__title + .mc-notification__message {\n margin-top: 0.5rem;\n}\n.mc-notification::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification::before {\n background-color: transparent;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n}\n.mc-notification__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.mc-notification__title, .mc-notification__message {\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-notification__title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mc-notification__message {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mc-notification__link {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n margin-top: 0.5rem;\n}\n.mc-notification--information {\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n}\n.mc-notification--information::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--success {\n background: #eaf3e2;\n -webkit-box-shadow: inset 0 0 0 1px #78be20;\n box-shadow: inset 0 0 0 1px #78be20;\n}\n.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LDVBMTEsMTEsMCwxLDEsNSwxNiwxMSwxMSwwLDAsMSwxNiw1bTAtMkExMywxMywwLDEsMCwyOSwxNiwxMywxMywwLDAsMCwxNiwzWiIvPjxwYXRoIGQ9Ik0xNC4yLDIxLjQ1LDguNSwxNi4xOGExLDEsMCwxLDEsMS4zNS0xLjQ3bDQuMjgsNCw4LTguMDlhMSwxLDAsMCwxLDEuNDIsMCwxLDEsMCwwLDEsMCwxLjQxWiIvPjwvc3ZnPg==');\n}\n.mc-notification--warning {\n background: #fff5eb;\n -webkit-box-shadow: inset 0 0 0 1px #fc961e;\n box-shadow: inset 0 0 0 1px #fc961e;\n}\n.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZjOTYxZSI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDE4LjEzYTEsMSwwLDAsMS0xLTFWMTEuM2ExLDEsMCwwLDEsMiwwdjUuODNBMSwxLDAsMCwxLDE2LDE4LjEzWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjAuNyIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--danger {\n background: #feedee;\n -webkit-box-shadow: inset 0 0 0 1px #df382b;\n box-shadow: inset 0 0 0 1px #df382b;\n}\n.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2RmMzgyYiI+PHBhdGggZD0iTTE2LDNBMTMsMTMsMCwxLDAsMjksMTYsMTMsMTMsMCwwLDAsMTYsM1ptMCwyNEExMSwxMSwwLDEsMSwyNywxNiwxMSwxMSwwLDAsMSwxNiwyN1oiLz48cGF0aCBkPSJNMjAuNzEsMTEuMjlhMSwxLDAsMCwwLTEuNDIsMEwxNiwxNC41OWwtMy4yOS0zLjNhMSwxLDAsMCwwLTEuNDIsMS40MkwxNC41OSwxNmwtMy4zLDMuMjlhMSwxLDAsMCwwLDAsMS40MiwxLDEsMCwwLDAsMS40MiwwTDE2LDE3LjQxbDMuMjksMy4zYTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MkwxNy40MSwxNmwzLjMtMy4yOUExLDEsMCwwLDAsMjAuNzEsMTEuMjlaIi8+PC9zdmc+');\n}\n.mc-notification--s {\n padding: 0.75rem 0.75rem 1.5rem;\n}\n.mc-notification--s::before {\n background-size: 1.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 1.5rem;\n flex: 0 0 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n width: 1.5rem;\n}\n.mc-notification--s .mc-notification__content {\n padding-top: 0;\n}\n.mc-notification--s .mc-notification__title + .mc-notification__message {\n margin-top: 0.25rem;\n}\n.mc-notification--s::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMyNWE4ZDAiPjxwYXRoIGQ9Ik0xMiAyMmExMCAxMCAwIDExMTAtMTAgMTAgMTAgMCAwMS0xMCAxMHptMC0xOGE4IDggMCAxMDggOCA4IDggMCAwMC04LTh6Ii8+PHBhdGggZD0iTTEyIDE3YTEgMSAwIDAxLTEtMXYtNC4zOWExIDEgMCAwMTIgMFYxNmExIDEgMCAwMS0xIDF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3OGJlMjAiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNmYzk2MWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--s.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNkZjM4MmIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTE2LjIxIDcuODhhMSAxIDAgMDAtMS40MiAwbC0yLjc0IDIuNzQtMi44NC0yLjgzYTEgMSAwIDEwLTEuNDIgMS40MkwxMC42MyAxMmwtMi43NyAyLjc5YTEgMSAwIDAwMS40MSAxLjQybDIuNzgtMi43NyAyLjY4IDIuNjhhMSAxIDAgMDAxLjQxLTEuNDJMMTMuNDYgMTJsMi43NS0yLjdhMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-notification-closable {\n position: relative;\n}\n.mc-notification-closable__close {\n position: relative;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+') no-repeat;\n border: 0;\n cursor: pointer;\n display: block;\n height: 1rem;\n padding: 0;\n position: absolute;\n outline: 0;\n right: 1rem;\n top: 1rem;\n width: 1rem;\n}\n.mc-notification-closable__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-notification-closable__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n padding: 2.5rem;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n margin: 3rem 0 1rem;\n padding: 1rem;\n text-align: center;\n}\n.example__title:first-child {\n margin: 0 0 1rem;\n}"}}},{"node":{"id":"ef2d408d-b66d-5ca5-96e5-6ce0509f319d","path":"src/docs/Components/Tabs/previews/tabs-dropdown","codes":{"js":"","html":"
    \n
    \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.tabs';\n@import 'components/_c.select';\n\n.example {\n @include set-font-face();\n\n margin: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-tabs {\n background-color: #ffffff;\n position: relative;\n width: 100%;\n}\n.mc-tabs::before {\n bottom: 0;\n -webkit-box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.1);\n content: \"\";\n display: block;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n z-index: 0;\n}\n.mc-tabs--no-shadow::before {\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__nav {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n margin-top: 0;\n margin-bottom: 0;\n}\n.mc-tabs__nav, .mc-tabs__select {\n position: relative;\n}\n.mc-tabs__link {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.125;\n position: relative;\n background: none;\n border: none;\n border-bottom: 0.125rem solid transparent;\n color: #222020;\n cursor: pointer;\n display: block;\n outline: none;\n padding: 1.1875rem 1.5rem 1.0625rem;\n text-decoration: none;\n}\n.mc-tabs__link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n bottom: -0.125rem;\n top: -0.125rem;\n}\n.mc-tabs__link:active, .mc-tabs__link--selected {\n color: #78be20;\n}\n.mc-tabs__link:focus, .mc-tabs__link:hover {\n color: #41a017;\n}\n.mc-tabs__link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-tabs__link--selected {\n border-bottom-color: #78be20;\n}\n.mc-tabs__link--selected:focus, .mc-tabs__link--selected:hover {\n border-bottom-color: #41a017;\n}\n.mc-tabs__link--disabled {\n cursor: not-allowed;\n}\n.mc-tabs__link--disabled, .mc-tabs__link--disabled:hover, .mc-tabs__link--disabled:focus, .mc-tabs__link--disabled:active {\n color: #6f676c;\n -webkit-box-shadow: none;\n box-shadow: none;\n}\n.mc-tabs__link--disabled.mc-tabs__link--selected {\n color: #cbe3b5;\n border-bottom-color: #cbe3b5;\n}\n.mc-tabs--dropdown {\n padding: 1rem;\n width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .mc-tabs {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-tabs--full, .mc-tabs--full-centered {\n width: 100%;\n }\n .mc-tabs--full-centered {\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n\n@media screen and (max-width: 679px) {\n .mc-tabs:not(.mc-tabs--dropdown)::before {\n bottom: 0.125rem;\n }\n .mc-tabs__nav {\n overflow-x: auto;\n white-space: nowrap;\n }\n .mc-tabs__item {\n padding: 0.125rem;\n }\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem;\n}"}}},{"node":{"id":"7f282db1-e755-59cd-a350-fdfcb3a98b1c","path":"src/docs/Components/Form/Select/previews/single","codes":{"js":"","html":"
    \n \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.select';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-select {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n border: 1px solid #6f676c;\n border-radius: 4px;\n color: #222020;\n -webkit-transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n transition: border-color 200ms ease, -webkit-box-shadow 200ms ease;\n -o-transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease;\n transition: border-color 200ms ease, box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n width: 100%;\n}\n.mc-select[type=number]::-webkit-inner-spin-button, .mc-select[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-select[type=number] {\n -moz-appearance: textfield;\n}\n.mc-select::-ms-expand {\n display: none;\n}\n.mc-select.is-hover,\n.mc-select:hover {\n border-color: #222020;\n}\n\n.mc-select.is-focus,\n.mc-select:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-select:disabled {\n background-color: #eeeef0;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM4ODdmODciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n border-color: #eeeef0;\n color: #887f87;\n cursor: not-allowed;\n}\n.mc-select.is-invalid {\n border-color: #b42a27;\n}\n.mc-select.is-valid {\n border-color: #78be20;\n}\n.mc-select--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n}\n.mc-select--m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n}\n\n@media screen and (min-width: 680px) {\n .mc-select--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-select--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-select--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-select--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 0.5rem center;\n padding: calc(0.5rem - 1px) 1.875rem calc(0.5rem - 1px) calc(0.5rem - 1px);\n }\n .mc-select--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"18732662-9a65-5885-95b7-17ffab04f254","path":"src/docs/Foundations/Spacing/MagicUnit/previews/mdu-magic-unit-grid","codes":{"js":"","html":"
    \n
    \n \n \n Medium button\n \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'dev-utils/_qdu.magic-unit-grid';\n@import 'components/_c.button';\n\n.container {\n padding: $mu200;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mdu-magic-unit-grid {\n -webkit-box-shadow: inset 0 0 0 1px #ececec;\n box-shadow: inset 0 0 0 1px #ececec;\n background-image: -o-linear-gradient(left, rgba(0, 100, 100, 0.1) 1px, transparent 1px), -o-linear-gradient(bottom, rgba(0, 100, 100, 0.1) 1px, transparent 1px), -o-linear-gradient(left, rgba(0, 100, 100, 0.03) 1px, transparent 1px), -o-linear-gradient(bottom, rgba(0, 100, 100, 0.03) 1px, transparent 1px), -o-linear-gradient(left, rgba(0, 100, 100, 0.03) 1px, transparent 1px), -o-linear-gradient(bottom, rgba(0, 100, 100, 0.03) 1px, transparent 1px);\n background-image: linear-gradient(90deg, rgba(0, 100, 100, 0.1) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 100, 100, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 100, 100, 0.03) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 100, 100, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 100, 100, 0.03) 1px, transparent 1px), linear-gradient(0deg, rgba(0, 100, 100, 0.03) 1px, transparent 1px);\n background-size: 1rem 1rem, 1rem 1rem, calc(1rem / 2) calc(1rem / 2), calc(1rem / 2) calc(1rem / 2), calc(1rem / 4) calc(1rem / 4), calc(1rem / 4) calc(1rem / 4);\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.container {\n padding: 2rem;\n}"}}},{"node":{"id":"8c34e32c-711f-5c6e-9f4c-f581d4eff7f7","path":"src/docs/Components/Layers/previews/border-scroll-bar","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Layer Title

    \n \n
    \n
    \n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}"}}},{"node":{"id":"0722124b-a1b2-5b54-8649-6d19fe430075","path":"src/docs/Components/Layers/previews/cta-two","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Layer Title

    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}"}}},{"node":{"id":"6f612b3f-d0c5-5d50-8e18-f79038bb2e17","path":"src/docs/Components/Layers/previews/default","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Layer Title

    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}"}}},{"node":{"id":"f65a21d3-19fe-5a40-bbc4-730fc5ab11b4","path":"src/docs/Components/Layers/previews/extended","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Layer Title

    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}"}}},{"node":{"id":"4caa7070-392b-544e-8ed6-1faedd3193fb","path":"src/docs/Components/Layers/previews/header-with-icon","codes":{"js":"","html":"
    \n \n
    \n
    \n \n \n \n

    Layer Title

    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n\n\n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}"}}},{"node":{"id":"c44aac53-8a61-5d28-8404-2c8e3432312a","path":"src/docs/Foundations/Layout/Grid/previews/basic","codes":{"js":"","html":"
    \n\t
    \n\t\t
    \n\t\t\tCol 1\n\t\t
    \n\t\t
    \n\t\t\tCol 2\n\t\t
    \n\t\t
    \n\t\t\tCol 3\n\t\t
    \n\t\t
    \n\t\t\tCol 4\n\t\t
    \n\t
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container'; // you generally want the container as well\n@import 'layouts/_l.flexy';\n\n\n.example {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n background-color: $color-primary-01-200;\n outline: 1px solid $color-primary-01-500;\n text-align: center;\n min-height: 3rem;\n padding-top: 2rem;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.example {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #cbe3b5;\n outline: 1px solid #78be20;\n text-align: center;\n min-height: 3rem;\n padding-top: 2rem;\n}"}}},{"node":{"id":"e556e889-18c3-5493-a88a-03486597ef7f","path":"src/docs/Foundations/Layout/Grid/previews/flexyWrap","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    1of3 (33%)
    \n
    \n
    \n
    1of3 (33%)
    \n
    \n
    \n
    1of3 (33%)
    \n
    \n
    \n
    1of3 (33%)
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n padding-top: $mu100;\n padding-bottom: $mu100;\n\n &__container {\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n }\n\n &__item {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n flex: 1;\n box-shadow: 0 0 0 1px $color-primary-01-500;\n padding: $mu100 0;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.example__container {\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__item {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n padding: 1rem 0;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"0b275bf5-27b7-5aec-9d7b-0cc9d9d8ea97","path":"src/docs/Foundations/Layout/Grid/previews/flexyDefaultCol","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    ml-flexy__col
    \n
    \n
    \n
    \n
    \n
    \n
    \n
    ml-flexy__col
    \n
    \n
    \n
    ml-flexy__col
    \n
    \n
    \n
    ml-flexy__col
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n padding-top: $mu100;\n padding-bottom: $mu100;\n\n &__container {\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n\n &:not(:last-child) {\n margin-bottom: $mu100;\n }\n }\n\n &__item {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n flex: 1;\n box-shadow: 0 0 0 1px $color-primary-01-500;\n padding: $mu100 0;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n.example__container {\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__container:not(:last-child) {\n margin-bottom: 1rem;\n}\n.example__item {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n padding: 1rem 0;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"12ea082f-8beb-52a1-8949-d3f98c5259cf","path":"src/docs/Foundations/Layout/Grid/previews/flexy","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n
    \n
    \n 1of12\n
    \n
    \n\n
    \n
    \n 1of6\n
    \n
    \n
    \n
    \n 1of6\n
    \n
    \n
    \n
    \n 1of6\n
    \n
    \n
    \n
    \n 1of6\n
    \n
    \n
    \n
    \n 1of6\n
    \n
    \n
    \n
    \n 1of6\n
    \n
    \n\n
    \n
    \n 1of6\n
    \n
    \n
    \n
    \n 5of6\n
    \n
    \n\n
    \n
    \n 1of4\n
    \n
    \n
    \n
    \n 1of4\n
    \n
    \n
    \n
    \n 1of4\n
    \n
    \n
    \n
    \n 1of4\n
    \n
    \n\n
    \n
    \n 1of4\n
    \n
    \n
    \n
    \n 3of4\n
    \n
    \n\n
    \n
    \n 1of3\n
    \n
    \n
    \n
    \n 1of3\n
    \n
    \n
    \n
    \n 1of3\n
    \n
    \n\n
    \n
    \n 1of3\n
    \n
    \n
    \n
    \n 2of3\n
    \n
    \n\n
    \n
    \n 1of2\n
    \n
    \n
    \n
    \n 1of2\n
    \n
    \n\n
    \n
    \n full\n
    \n
    \n\n
    \n
    \n initial\n
    \n
    \n\n
    \n
    \n fill\n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n &__container {\n margin-bottom: $mu100;\n margin-top: $mu100;\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n }\n\n &__col {\n box-shadow: 0 0 0 1px $color-primary-01-500;\n margin-bottom: $mu100;\n }\n\n &__item {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n box-shadow: 0 0 0 1px $color-primary-01-500;\n padding: $mu100 0;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example__container {\n margin-bottom: 1rem;\n margin-top: 1rem;\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__col {\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n margin-bottom: 1rem;\n}\n.example__item {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n padding: 1rem 0;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"635700d6-37b3-5c35-87e8-693b5ab05d7b","path":"src/docs/Foundations/Layout/Grid/previews/flexyResponsive","codes":{"js":"","html":"
    \n
    \n
    \n \n
    \n default: full
    \n 1 of 3 @ from m
    \n 1 of 4 @ from l
    \n
    \n
    \n \n
    \n default: full
    \n 2 of 3 @ from m
    \n 3 of 4 @ from l
    \n
    \n
    \n
    \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n &__container {\n margin-bottom: $mu100;\n margin-top: $mu100;\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n }\n\n &__col {\n box-shadow: 0 0 0 1px $color-primary-01-500;\n margin-bottom: $mu100;\n }\n\n &__item {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n box-shadow: 0 0 0 1px $color-primary-01-500;\n padding: $mu100 0;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example__container {\n margin-bottom: 1rem;\n margin-top: 1rem;\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__col {\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n margin-bottom: 1rem;\n}\n.example__item {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n padding: 1rem 0;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"7672df1b-8626-5ada-92df-99e96c11f4b2","path":"src/docs/Foundations/Layout/Grid/previews/flexyAlign","codes":{"js":"","html":"
    \n default :\n
    \n
    \n
    \n
    \n
    \n
    \n A\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n B\n
    \n
    \n
    \n
    \n
    \n C\n
    \n
    \n
    \n
    \n
    \n
    \n ml-flexy--items-end : \n
    \n
    \n
    \n
    \n
    \n
    \n A\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n B\n
    \n
    \n
    \n
    \n
    \n C\n
    \n
    \n
    \n
    \n
    \n
    \n ml-flexy--items-center : \n
    \n
    \n
    \n
    \n
    \n
    \n A\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n B\n
    \n
    \n
    \n
    \n
    \n C\n
    \n
    \n
    \n
    \n
    \n
    \n ml-flexy--items-stretch : \n
    \n
    \n
    \n
    \n
    \n
    \n A\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n B\n
    \n
    \n
    \n
    \n
    \n C\n
    \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n text-align: center;\n\n &__container {\n margin-bottom: $mu100;\n margin-top: $mu100;\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n }\n\n &__col {\n display: flex;\n flex-flow: column;\n }\n\n &__item {\n flex: 1 1 auto;\n align-self: stretch;\n min-height: $mu400;\n height: fit-content;\n box-shadow: 0 0 0 1px $color-primary-01-500;\n overflow: visible;\n padding: $mu100 0;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n text-align: center;\n}\n.example__container {\n margin-bottom: 1rem;\n margin-top: 1rem;\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__col {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-flow: column;\n flex-flow: column;\n}\n.example__item {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 auto;\n flex: 1 1 auto;\n -ms-flex-item-align: stretch;\n align-self: stretch;\n min-height: 4rem;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n overflow: visible;\n padding: 1rem 0;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"e648775b-eb7a-5887-8ff0-c2ea74a09023","path":"src/docs/Foundations/Layout/Grid/previews/flexyPush","codes":{"js":"","html":"
    \n

    to create empty spaces between columns

    \n
    \n
    \n \n
    \n 1 of 6\n
    \n
    \n \n
    \n fill / push 1 of 12\n
    \n
    \n
    \n \n

    for centering

    \n
    \n
    \n \n
    \n 2 of 3 / push 1 of 6\n
    \n
    \n
    \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\nbody {\n @include set-font-face();\n\n text-align: center;\n}\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n &__container {\n margin-bottom: $mu100;\n margin-top: $mu100;\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n }\n\n &__col {\n box-shadow: 0 0 0 1px $color-primary-01-500;\n margin-bottom: $mu100;\n }\n\n &__item {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n box-shadow: 0 0 0 1px $color-primary-01-500;\n padding: $mu100 0;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\nbody {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n text-align: center;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example__container {\n margin-bottom: 1rem;\n margin-top: 1rem;\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__col {\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n margin-bottom: 1rem;\n}\n.example__item {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n padding: 1rem 0;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"993d93d6-a4ac-5c4f-9d6b-ca1418384cbd","path":"src/docs/Foundations/Layout/Grid/previews/flexyCentered","codes":{"js":"","html":"
    \n
    \n Hello
    \n i'm centered\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n box-shadow: 0 0 0 1px $color-primary-01-500;\n margin: $mu100;\n min-height: magic-unit-rem(18);\n\n /* ie11 hack for centering */\n height: 0;\n\n &__item {\n box-shadow: 1px 1px 1px 0 $color-grey-500;\n background: #fff;\n padding-top: $mu200;\n min-height: $mu600;\n min-width: $mu800;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n margin: 1rem;\n min-height: 18rem;\n /* ie11 hack for centering */\n height: 0;\n}\n.example__item {\n -webkit-box-shadow: 1px 1px 1px 0 #887f87;\n box-shadow: 1px 1px 1px 0 #887f87;\n background: #fff;\n padding-top: 2rem;\n min-height: 6rem;\n min-width: 8rem;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"9f418781-9ebd-5e71-a6b3-35943a6843e2","path":"src/docs/Components/Notification/previews/notification-variations","codes":{"js":"","html":"
    \n
    \n
    \n

    Information notification

    \n

    \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.\n

    \n Link\n
    \n \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.links';\n@import 'components/_c.notification';\n\n.example {\n padding: $mu250;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-notification {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n border-radius: 4px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n padding: 1.5rem 1.5rem 1.5rem 1rem;\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n color: #000000;\n}\n.mc-notification::before {\n background-size: 2rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 2rem;\n flex: 0 0 2rem;\n height: 2rem;\n margin-right: 1rem;\n width: 2rem;\n}\n.mc-notification .mc-notification__content {\n padding-top: 0.25rem;\n}\n.mc-notification .mc-notification__title + .mc-notification__message {\n margin-top: 0.5rem;\n}\n.mc-notification::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification::before {\n background-color: transparent;\n background-repeat: no-repeat;\n content: \"\";\n display: block;\n}\n.mc-notification__content {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.mc-notification__title, .mc-notification__message {\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-notification__title {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mc-notification__message {\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mc-notification__link {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n margin-top: 0.5rem;\n}\n.mc-notification--information {\n background: #ecfcfd;\n -webkit-box-shadow: inset 0 0 0 1px #25a8d0;\n box-shadow: inset 0 0 0 1px #25a8d0;\n}\n.mc-notification--information::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzI1YThkMCI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDIxLjdhMSwxLDAsMCwxLTEtMVYxNC44N2ExLDEsMCwxLDEsMiwwVjIwLjdBMSwxLDAsMCwxLDE2LDIxLjdaIi8+PGNpcmNsZSBjeD0iMTYiIGN5PSIxMS4zIiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--success {\n background: #eaf3e2;\n -webkit-box-shadow: inset 0 0 0 1px #78be20;\n box-shadow: inset 0 0 0 1px #78be20;\n}\n.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2LDVBMTEsMTEsMCwxLDEsNSwxNiwxMSwxMSwwLDAsMSwxNiw1bTAtMkExMywxMywwLDEsMCwyOSwxNiwxMywxMywwLDAsMCwxNiwzWiIvPjxwYXRoIGQ9Ik0xNC4yLDIxLjQ1LDguNSwxNi4xOGExLDEsMCwxLDEsMS4zNS0xLjQ3bDQuMjgsNCw4LTguMDlhMSwxLDAsMCwxLDEuNDIsMCwxLDEsMCwwLDEsMCwxLjQxWiIvPjwvc3ZnPg==');\n}\n.mc-notification--warning {\n background: #fff5eb;\n -webkit-box-shadow: inset 0 0 0 1px #fc961e;\n box-shadow: inset 0 0 0 1px #fc961e;\n}\n.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2ZjOTYxZSI+PHBhdGggZD0iTTE2LDI5QTEzLDEzLDAsMSwxLDI5LDE2LDEzLDEzLDAsMCwxLDE2LDI5Wk0xNiw1QTExLDExLDAsMSwwLDI3LDE2LDExLDExLDAsMCwwLDE2LDVaIi8+PHBhdGggZD0iTTE2LDE4LjEzYTEsMSwwLDAsMS0xLTFWMTEuM2ExLDEsMCwwLDEsMiwwdjUuODNBMSwxLDAsMCwxLDE2LDE4LjEzWiIvPjxjaXJjbGUgY3g9IjE2IiBjeT0iMjAuNyIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--danger {\n background: #feedee;\n -webkit-box-shadow: inset 0 0 0 1px #df382b;\n box-shadow: inset 0 0 0 1px #df382b;\n}\n.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iI2RmMzgyYiI+PHBhdGggZD0iTTE2LDNBMTMsMTMsMCwxLDAsMjksMTYsMTMsMTMsMCwwLDAsMTYsM1ptMCwyNEExMSwxMSwwLDEsMSwyNywxNiwxMSwxMSwwLDAsMSwxNiwyN1oiLz48cGF0aCBkPSJNMjAuNzEsMTEuMjlhMSwxLDAsMCwwLTEuNDIsMEwxNiwxNC41OWwtMy4yOS0zLjNhMSwxLDAsMCwwLTEuNDIsMS40MkwxNC41OSwxNmwtMy4zLDMuMjlhMSwxLDAsMCwwLDAsMS40MiwxLDEsMCwwLDAsMS40MiwwTDE2LDE3LjQxbDMuMjksMy4zYTEsMSwwLDAsMCwxLjQyLDAsMSwxLDAsMCwwLDAtMS40MkwxNy40MSwxNmwzLjMtMy4yOUExLDEsMCwwLDAsMjAuNzEsMTEuMjlaIi8+PC9zdmc+');\n}\n.mc-notification--s {\n padding: 0.75rem 0.75rem 1.5rem;\n}\n.mc-notification--s::before {\n background-size: 1.5rem;\n -webkit-box-flex: 0;\n -ms-flex: 0 0 1.5rem;\n flex: 0 0 1.5rem;\n height: 1.5rem;\n margin-right: 0.5rem;\n width: 1.5rem;\n}\n.mc-notification--s .mc-notification__content {\n padding-top: 0;\n}\n.mc-notification--s .mc-notification__title + .mc-notification__message {\n margin-top: 0.25rem;\n}\n.mc-notification--s::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMyNWE4ZDAiPjxwYXRoIGQ9Ik0xMiAyMmExMCAxMCAwIDExMTAtMTAgMTAgMTAgMCAwMS0xMCAxMHptMC0xOGE4IDggMCAxMDggOCA4IDggMCAwMC04LTh6Ii8+PHBhdGggZD0iTTEyIDE3YTEgMSAwIDAxLTEtMXYtNC4zOWExIDEgMCAwMTIgMFYxNmExIDEgMCAwMS0xIDF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSI4IiByPSIxIi8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--success::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiM3OGJlMjAiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+');\n}\n.mc-notification--s.mc-notification--warning::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNmYzk2MWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==');\n}\n.mc-notification--s.mc-notification--danger::before {\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNkZjM4MmIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTE2LjIxIDcuODhhMSAxIDAgMDAtMS40MiAwbC0yLjc0IDIuNzQtMi44NC0yLjgzYTEgMSAwIDEwLTEuNDIgMS40MkwxMC42MyAxMmwtMi43NyAyLjc5YTEgMSAwIDAwMS40MSAxLjQybDIuNzgtMi43NyAyLjY4IDIuNjhhMSAxIDAgMDAxLjQxLTEuNDJMMTMuNDYgMTJsMi43NS0yLjdhMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-notification-closable {\n position: relative;\n}\n.mc-notification-closable__close {\n position: relative;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMwMDAwMDAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+') no-repeat;\n border: 0;\n cursor: pointer;\n display: block;\n height: 1rem;\n padding: 0;\n position: absolute;\n outline: 0;\n right: 1rem;\n top: 1rem;\n width: 1rem;\n}\n.mc-notification-closable__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-notification-closable__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.example {\n padding: 2.5rem;\n}"}}},{"node":{"id":"0e6ca0d8-187c-5d4a-896c-34794aabd4ef","path":"src/docs/Foundations/Typography/HeroStyles/previews/typographyHero","codes":{"js":"","html":"
    \n

    \n The quick brown fox jumps over the lazy dog.\n

    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.heros';\n\n// for example purpose only\n@import 'layouts/_l.flexy';\n\n.example {\n padding: $mu200;\n max-width: magic-unit-rem(38);\n margin: 0 auto;\n\n p {\n margin: $mu100 0;\n }\n\n &__title {\n @include set-font-scale('07', 'm');\n @include set-font-face('semi-bold');\n\n background: $color-grey-100;\n text-align: center;\n padding: $mu100;\n margin: $mu300 0 $mu100;\n\n &:first-child {\n margin: 0 0 $mu100;\n }\n }\n\n &__modifier {\n @include set-font-scale('04', 's');\n\n margin-top: $mu200;\n font-family: monospace;\n display: inline-block;\n padding: $mu025 $mu050;\n box-shadow: inset 0 0 0 1px $color-grey-200;\n border-radius: $radius-s * 1px;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.example {\n padding: 2rem;\n max-width: 38rem;\n margin: 0 auto;\n}\n.example p {\n margin: 1rem 0;\n}\n.example__title {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n background: #eeeef0;\n text-align: center;\n padding: 1rem;\n margin: 3rem 0 1rem;\n}\n.example__title:first-child {\n margin: 0 0 1rem;\n}\n.example__modifier {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n margin-top: 2rem;\n font-family: monospace;\n display: inline-block;\n padding: 0.25rem 0.5rem;\n -webkit-box-shadow: inset 0 0 0 1px #d3d2d6;\n box-shadow: inset 0 0 0 1px #d3d2d6;\n border-radius: 2px;\n}"}}},{"node":{"id":"dfec52e4-bb3e-5cc5-9710-72f64e22e4ef","path":"src/docs/Components/Form/PhoneNumberInput/previews/label","codes":{"js":"","html":"\n\n \n \n \n Input phone number with label\n \n \n \n
    \n
    \n \n
    \n
    \n \n \n \n \n +33\n \n \n
  • \n \n \n \n France, \n +33\n
    • \n
  • \n \n \n \n Italie, \n +39\n
    • \n
  • \n \n \n \n Belgique, \n +32\n
    • \n
  • \n \n \n \n Allemagne, \n +49\n
    • \n
  • \n \n \n \n Holland, \n +31\n
    • \n
  • \n \n \n \n Russie, \n +7\n
    • \n
  • \n \n \n \n Luxembourg, \n +352\n
    • \n \n
    \n \n
    \n
    \n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n\n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n@import 'components/_c.phone-number';\n\n.example {\n @include set-font-face();\n\n height: 11rem;\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.mc-phone-number {\n font-family: \"LeroyMerlin\", sans-serif;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n max-width: 21rem;\n position: relative;\n}\n.mc-phone-number__button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n font-size: 1rem;\n line-height: 1.125;\n background-color: #ffffff;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiMyMjIwMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTggMTEuNWExIDEgMCAwMS0uNzEtLjI5bC01LTVhMSAxIDAgMDExLjQyLTEuNDJMOCA5LjA5bDQuMjktNC4zYTEgMSAwIDExMS40MiAxLjQybC01IDVhMSAxIDAgMDEtLjcxLjI5eiIvPjwvc3ZnPg==');\n background-repeat: no-repeat;\n background-size: 1rem;\n background-position: right 1rem center;\n padding: calc(0.9375rem - 1px) 2.875rem calc(0.9375rem - 1px) calc(0.75rem - 1px);\n font-weight: 600;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n color: #222020;\n border: 1px solid #6f676c;\n border-radius: 0.25rem 0 0 0.25rem;\n border-right: none;\n padding-left: 1rem;\n}\n.mc-phone-number__button .mc-phone-number__country {\n display: none;\n}\n.mc-phone-number__flag {\n margin-right: 0.5rem;\n width: 1rem;\n height: 1rem;\n}\n.mc-phone-number__list {\n list-style: none;\n margin-left: 0;\n padding-left: 0;\n -webkit-box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n margin: 0;\n position: absolute;\n width: 100%;\n max-height: 12rem;\n border-radius: 0.25rem 0 0 0.25rem;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-phone-number__list::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-phone-number__list::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-phone-number__list:focus {\n outline: none;\n}\n.mc-phone-number__list--hidden {\n display: none;\n}\n.mc-phone-number__item {\n font-size: 1rem;\n line-height: 1.125;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n min-height: 3rem;\n padding-left: 0.75rem;\n border-bottom: 1px solid #bab6bc;\n}\n.mc-phone-number__item--focused {\n background: #eeeef0;\n}\n.mc-phone-number__input {\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n}\n.mc-phone-number--focused .mc-phone-number__button {\n border-color: #25a8d0;\n}\n.mc-phone-number--focused .mc-phone-number__input {\n border-top-color: #25a8d0;\n border-right-color: #25a8d0;\n border-bottom-color: #25a8d0;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n height: 11rem;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"106496eb-9bae-5de9-9100-2431489a5c6f","path":"src/docs/Components/Cards/previews/card-ratios","codes":{"js":"","html":"
    \n
    \n
    \n
    \n \n
    \n
    \n

    Card 1x1

    \n
    \n

    A card with the image ratio of 1:1

    \n
    \n \n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n

    Card 4x3

    \n
    \n

    A card with the image ratio of 4:3

    \n
    \n \n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n

    Card 16x9

    \n
    \n

    A card with the image ratio of 16:9

    \n
    \n \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n@import 'components/_c.links';\n@import 'components/_c.card';\n\n.example {\n @include set-from-screen('m') {\n display: flex;\n flex-wrap: wrap;\n }\n\n &__item {\n flex-shrink: 0;\n padding: $mu200;\n }\n\n p {\n margin: 0;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-card {\n font-family: \"LeroyMerlin\", sans-serif;\n max-width: 17.75rem;\n}\n.mc-card,\n.mc-card * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 680px) {\n .mc-card {\n max-width: 14.875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-card {\n max-width: 18rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-card {\n max-width: 17.5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-card {\n max-width: 27.25rem;\n }\n}\n.mc-card__visual {\n margin: 0;\n overflow: hidden;\n position: relative;\n}\n.mc-card__visual::before {\n content: \"\";\n display: block;\n width: 100%;\n padding-top: 75%;\n}\n.mc-card__visual--1x1::before {\n padding-top: 100%;\n}\n.mc-card__visual--16x9::before {\n padding-top: 56.25%;\n}\n.mc-card__img {\n height: auto;\n left: 0;\n position: absolute;\n top: 50%;\n width: 100%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-card__content {\n padding-top: 1rem;\n}\n.mc-card__title, .mc-card__subtitle {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n.mc-card__title {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n}\n.mc-card__subtitle {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #3c3738;\n}\n.mc-card__body {\n font-size: 1rem;\n line-height: 1.375;\n color: #222020;\n margin-bottom: 1rem;\n}\n.mc-card--bordered {\n background: #ffffff;\n border: 2px solid #222020;\n border-radius: 0.25rem;\n overflow: hidden;\n}\n@media (min-width: 680px) and (max-width: 1023px) {\n .mc-card--bordered {\n max-width: 18.25rem;\n }\n}\n.mc-card--bordered .mc-card__content {\n padding-bottom: 1.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.mc-card--fluid {\n max-width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n }\n}\n.example__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n padding: 2rem;\n}\n.example p {\n margin: 0;\n}"}}},{"node":{"id":"185de321-9cdf-52b4-9b14-550bbb6fa906","path":"src/docs/Components/Cards/previews/two-cards","codes":{"js":"","html":"
    \n
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n \n
    \n
    \n
    \n\n
    \n
    \n
    \n \n
    \n
    \n

    Card title

    \n

    There can be a subtitle here.

    \n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n

    \n
    \n
    \n \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.button';\n@import 'components/_c.links';\n@import 'components/_c.card';\n\n.example {\n @include set-from-screen('m') {\n display: flex;\n justify-content: center;\n }\n\n &__item {\n flex-shrink: 0;\n padding: $mu200;\n }\n\n p {\n margin: 0;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.mc-card {\n font-family: \"LeroyMerlin\", sans-serif;\n max-width: 17.75rem;\n}\n.mc-card,\n.mc-card * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 680px) {\n .mc-card {\n max-width: 14.875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-card {\n max-width: 18rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-card {\n max-width: 17.5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-card {\n max-width: 27.25rem;\n }\n}\n.mc-card__visual {\n margin: 0;\n overflow: hidden;\n position: relative;\n}\n.mc-card__visual::before {\n content: \"\";\n display: block;\n width: 100%;\n padding-top: 75%;\n}\n.mc-card__visual--1x1::before {\n padding-top: 100%;\n}\n.mc-card__visual--16x9::before {\n padding-top: 56.25%;\n}\n.mc-card__img {\n height: auto;\n left: 0;\n position: absolute;\n top: 50%;\n width: 100%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n}\n.mc-card__content {\n padding-top: 1rem;\n}\n.mc-card__title, .mc-card__subtitle {\n margin-top: 0;\n margin-bottom: 0.5rem;\n}\n.mc-card__title {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n}\n.mc-card__subtitle {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #3c3738;\n}\n.mc-card__body {\n font-size: 1rem;\n line-height: 1.375;\n color: #222020;\n margin-bottom: 1rem;\n}\n.mc-card--bordered {\n background: #ffffff;\n border: 2px solid #222020;\n border-radius: 0.25rem;\n overflow: hidden;\n}\n@media (min-width: 680px) and (max-width: 1023px) {\n .mc-card--bordered {\n max-width: 18.25rem;\n }\n}\n.mc-card--bordered .mc-card__content {\n padding-bottom: 1.5rem;\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.mc-card--fluid {\n max-width: auto;\n}\n\n@media screen and (min-width: 680px) {\n .example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n }\n}\n.example__item {\n -ms-flex-negative: 0;\n flex-shrink: 0;\n padding: 2rem;\n}\n.example p {\n margin: 0;\n}"}}},{"node":{"id":"f67c5fe6-5722-54db-9ba5-b40192651667","path":"src/docs/Components/Form/QuantitySelector/previews/basic","codes":{"js":"","html":"
    \n
    \n \n \n \n \n \n\n \n\n \n \n \n \n \n
    \n
    \n\n
    \n
    \n \n \n \n \n \n\n \n\n \n \n \n \n \n
    \n
    \n\n\n \n \n \n \n \n \n\n\n\n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.button';\n@import 'components/_c.quantity-selector';\n\n.example {\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 2rem;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-quantity-selector {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n.mc-quantity-selector__button-right, .mc-quantity-selector__button-left {\n position: relative;\n}\n.mc-quantity-selector__button-right::after, .mc-quantity-selector__button-left::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.25rem;\n right: -0.25rem;\n bottom: -0.25rem;\n left: -0.25rem;\n}\n.mc-quantity-selector__button-right:focus, .mc-quantity-selector__button-left:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n z-index: 1;\n}\n.mc-quantity-selector__button-right:focus::after, .mc-quantity-selector__button-left:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-quantity-selector__button-right {\n border-radius: 0 0.25rem 0.25rem 0;\n}\n.mc-quantity-selector__button-right:focus::after {\n border-radius: 0.25rem 0.375rem 0.375rem 0.25rem;\n}\n.mc-quantity-selector__button-left {\n border-radius: 0.25rem 0 0 0.25rem;\n}\n.mc-quantity-selector__button-left:focus::after {\n border-radius: 0.375rem 0.25rem 0.25rem 0.375rem;\n}\n.mc-quantity-selector__input {\n border-radius: 0;\n border-left: none;\n border-right: none;\n}\n.mc-quantity-selector__input::-webkit-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-moz-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input, .mc-quantity-selector__input::placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n position: relative;\n z-index: 1;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right {\n position: static;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n border-radius: 0.125rem;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n top: -2px;\n right: 46px;\n bottom: -2px;\n left: 46px;\n}\n\n.example {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 2rem;\n}"}}},{"node":{"id":"3421cd89-bbd3-5ee7-866d-a74f612ac8c5","path":"src/docs/Components/Form/TextInput/previews/input-small-left-icon","codes":{"js":"","html":"
    \n
    \n \n\n
    \n \n \n \n \n
    \n
    \n
    \n\n\n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.left-icon-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-left-icon-input {\n position: relative;\n}\n.mc-left-icon-input__icon {\n position: absolute;\n z-index: 1;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n fill: #6f676c;\n pointer-events: none;\n}\n.mc-left-icon-input .mc-left-icon-input__icon {\n left: 0.75rem;\n top: 50%;\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-left-icon-input .mc-left-icon-input__input {\n padding-left: 2.9375rem;\n}\n.mc-left-icon-input--s .mc-left-icon-input__icon {\n left: 0.5rem;\n top: 50%;\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-left-icon-input--s .mc-left-icon-input__input {\n padding-left: 2.4375rem;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"35e06a20-3291-543e-9fdc-15dc27a9e29c","path":"src/docs/Components/Form/TextInput/previews/left-icon-input","codes":{"js":"","html":"
    \n
    \n \n\n
    \n \n \n \n \n
    \n
    \n
    \n\n\n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.left-icon-input';\n@import 'components/_c.fields';\n\n.example {\n @include set-font-face();\n\n margin: $mu200 0;\n padding: 0 $mu200;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-left-icon-input {\n position: relative;\n}\n.mc-left-icon-input__icon {\n position: absolute;\n z-index: 1;\n top: 50%;\n -webkit-transform: translateY(-50%);\n -ms-transform: translateY(-50%);\n transform: translateY(-50%);\n fill: #6f676c;\n pointer-events: none;\n}\n.mc-left-icon-input .mc-left-icon-input__icon {\n left: 0.75rem;\n top: 50%;\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-left-icon-input .mc-left-icon-input__input {\n padding-left: 2.9375rem;\n}\n.mc-left-icon-input--s .mc-left-icon-input__icon {\n left: 0.5rem;\n top: 50%;\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-left-icon-input--s .mc-left-icon-input__input {\n padding-left: 2.4375rem;\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem 0;\n padding: 0 2rem;\n}"}}},{"node":{"id":"4303e2da-37ca-5728-bb51-690f1d8a3c0d","path":"src/docs/Foundations/Layout/Grid/previews/flexyOrder","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n A - order last\n
    \n
    \n
    \n
    \n B\n
    \n
    \n
    \n
    \n C - order first\n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n// for example purpose only\n@import 'utilities/_u.margin';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n padding-top: $mu200;\n\n &__container {\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n }\n\n &__item {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n flex: 1;\n box-shadow: 0 0 0 1px $color-primary-01-500;\n padding: $mu100 0;\n margin-bottom: $mu100;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mu-mt-025 {\n margin-top: 0.25rem !important;\n}\n\n.mu-mt-050 {\n margin-top: 0.5rem !important;\n}\n\n.mu-mt-075 {\n margin-top: 0.75rem !important;\n}\n\n.mu-mt-100 {\n margin-top: 1rem !important;\n}\n\n.mu-mt-125 {\n margin-top: 1.25rem !important;\n}\n\n.mu-mt-150 {\n margin-top: 1.5rem !important;\n}\n\n.mu-mt-200 {\n margin-top: 2rem !important;\n}\n\n.mu-mt-250 {\n margin-top: 2.5rem !important;\n}\n\n.mu-mt-300 {\n margin-top: 3rem !important;\n}\n\n.mu-mt-350 {\n margin-top: 3.5rem !important;\n}\n\n.mu-mt-400 {\n margin-top: 4rem !important;\n}\n\n.mu-mt-500 {\n margin-top: 5rem !important;\n}\n\n.mu-mt-600 {\n margin-top: 6rem !important;\n}\n\n.mu-mt-700 {\n margin-top: 7rem !important;\n}\n\n.mu-mt-800 {\n margin-top: 8rem !important;\n}\n\n.mu-mt-900 {\n margin-top: 9rem !important;\n}\n\n.mu-mt-1000 {\n margin-top: 10rem !important;\n}\n\n.mu-mr-025 {\n margin-right: 0.25rem !important;\n}\n\n.mu-mr-050 {\n margin-right: 0.5rem !important;\n}\n\n.mu-mr-075 {\n margin-right: 0.75rem !important;\n}\n\n.mu-mr-100 {\n margin-right: 1rem !important;\n}\n\n.mu-mr-125 {\n margin-right: 1.25rem !important;\n}\n\n.mu-mr-150 {\n margin-right: 1.5rem !important;\n}\n\n.mu-mr-200 {\n margin-right: 2rem !important;\n}\n\n.mu-mr-250 {\n margin-right: 2.5rem !important;\n}\n\n.mu-mr-300 {\n margin-right: 3rem !important;\n}\n\n.mu-mr-350 {\n margin-right: 3.5rem !important;\n}\n\n.mu-mr-400 {\n margin-right: 4rem !important;\n}\n\n.mu-mr-500 {\n margin-right: 5rem !important;\n}\n\n.mu-mr-600 {\n margin-right: 6rem !important;\n}\n\n.mu-mr-700 {\n margin-right: 7rem !important;\n}\n\n.mu-mr-800 {\n margin-right: 8rem !important;\n}\n\n.mu-mr-900 {\n margin-right: 9rem !important;\n}\n\n.mu-mr-1000 {\n margin-right: 10rem !important;\n}\n\n.mu-ml-025 {\n margin-left: 0.25rem !important;\n}\n\n.mu-ml-050 {\n margin-left: 0.5rem !important;\n}\n\n.mu-ml-075 {\n margin-left: 0.75rem !important;\n}\n\n.mu-ml-100 {\n margin-left: 1rem !important;\n}\n\n.mu-ml-125 {\n margin-left: 1.25rem !important;\n}\n\n.mu-ml-150 {\n margin-left: 1.5rem !important;\n}\n\n.mu-ml-200 {\n margin-left: 2rem !important;\n}\n\n.mu-ml-250 {\n margin-left: 2.5rem !important;\n}\n\n.mu-ml-300 {\n margin-left: 3rem !important;\n}\n\n.mu-ml-350 {\n margin-left: 3.5rem !important;\n}\n\n.mu-ml-400 {\n margin-left: 4rem !important;\n}\n\n.mu-ml-500 {\n margin-left: 5rem !important;\n}\n\n.mu-ml-600 {\n margin-left: 6rem !important;\n}\n\n.mu-ml-700 {\n margin-left: 7rem !important;\n}\n\n.mu-ml-800 {\n margin-left: 8rem !important;\n}\n\n.mu-ml-900 {\n margin-left: 9rem !important;\n}\n\n.mu-ml-1000 {\n margin-left: 10rem !important;\n}\n\n.mu-mb-025 {\n margin-bottom: 0.25rem !important;\n}\n\n.mu-mb-050 {\n margin-bottom: 0.5rem !important;\n}\n\n.mu-mb-075 {\n margin-bottom: 0.75rem !important;\n}\n\n.mu-mb-100 {\n margin-bottom: 1rem !important;\n}\n\n.mu-mb-125 {\n margin-bottom: 1.25rem !important;\n}\n\n.mu-mb-150 {\n margin-bottom: 1.5rem !important;\n}\n\n.mu-mb-200 {\n margin-bottom: 2rem !important;\n}\n\n.mu-mb-250 {\n margin-bottom: 2.5rem !important;\n}\n\n.mu-mb-300 {\n margin-bottom: 3rem !important;\n}\n\n.mu-mb-350 {\n margin-bottom: 3.5rem !important;\n}\n\n.mu-mb-400 {\n margin-bottom: 4rem !important;\n}\n\n.mu-mb-500 {\n margin-bottom: 5rem !important;\n}\n\n.mu-mb-600 {\n margin-bottom: 6rem !important;\n}\n\n.mu-mb-700 {\n margin-bottom: 7rem !important;\n}\n\n.mu-mb-800 {\n margin-bottom: 8rem !important;\n}\n\n.mu-mb-900 {\n margin-bottom: 9rem !important;\n}\n\n.mu-mb-1000 {\n margin-bottom: 10rem !important;\n}\n\n.mu-m-025 {\n margin: 0.25rem !important;\n}\n\n.mu-m-050 {\n margin: 0.5rem !important;\n}\n\n.mu-m-075 {\n margin: 0.75rem !important;\n}\n\n.mu-m-100 {\n margin: 1rem !important;\n}\n\n.mu-m-125 {\n margin: 1.25rem !important;\n}\n\n.mu-m-150 {\n margin: 1.5rem !important;\n}\n\n.mu-m-200 {\n margin: 2rem !important;\n}\n\n.mu-m-250 {\n margin: 2.5rem !important;\n}\n\n.mu-m-300 {\n margin: 3rem !important;\n}\n\n.mu-m-350 {\n margin: 3.5rem !important;\n}\n\n.mu-m-400 {\n margin: 4rem !important;\n}\n\n.mu-m-500 {\n margin: 5rem !important;\n}\n\n.mu-m-600 {\n margin: 6rem !important;\n}\n\n.mu-m-700 {\n margin: 7rem !important;\n}\n\n.mu-m-800 {\n margin: 8rem !important;\n}\n\n.mu-m-900 {\n margin: 9rem !important;\n}\n\n.mu-m-1000 {\n margin: 10rem !important;\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n padding-top: 2rem;\n}\n.example__container {\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__item {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n padding: 1rem 0;\n margin-bottom: 1rem;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"4354e9c7-7dd0-522d-afc4-b4c1cf518471","path":"src/docs/Foundations/Layout/Grid/previews/flexyNested","codes":{"js":"","html":"
    \n
    \n
    \n \n
    \n \n
    \n
    \n nested flexy - col full\n
    \n
    \n
    \n
    \n nested flexy - col 1of2\n
    \n
    \n
    \n
    \n nested flexy - col 1of2\n
    \n
    \n
    \n
    \n nested flexy - col full\n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n\n// for example purpose only\n@import 'utilities/_u.margin';\n\n* {\n box-sizing: border-box;\n}\n\n.example {\n padding-top: $mu200;\n\n &__container {\n margin-bottom: $mu100;\n margin-top: $mu100;\n box-shadow: 0 0 0 1px $color-secondary-red-500;\n }\n\n &__item {\n @include set-font-scale('04', 's');\n @include set-font-face('regular');\n\n flex: 1;\n align-self: stretch;\n height: fit-content;\n box-shadow: 0 0 0 1px $color-primary-01-500;\n padding: $mu100 0;\n margin-bottom: $mu100;\n text-align: center;\n letter-spacing: 0.05em;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mu-mt-025 {\n margin-top: 0.25rem !important;\n}\n\n.mu-mt-050 {\n margin-top: 0.5rem !important;\n}\n\n.mu-mt-075 {\n margin-top: 0.75rem !important;\n}\n\n.mu-mt-100 {\n margin-top: 1rem !important;\n}\n\n.mu-mt-125 {\n margin-top: 1.25rem !important;\n}\n\n.mu-mt-150 {\n margin-top: 1.5rem !important;\n}\n\n.mu-mt-200 {\n margin-top: 2rem !important;\n}\n\n.mu-mt-250 {\n margin-top: 2.5rem !important;\n}\n\n.mu-mt-300 {\n margin-top: 3rem !important;\n}\n\n.mu-mt-350 {\n margin-top: 3.5rem !important;\n}\n\n.mu-mt-400 {\n margin-top: 4rem !important;\n}\n\n.mu-mt-500 {\n margin-top: 5rem !important;\n}\n\n.mu-mt-600 {\n margin-top: 6rem !important;\n}\n\n.mu-mt-700 {\n margin-top: 7rem !important;\n}\n\n.mu-mt-800 {\n margin-top: 8rem !important;\n}\n\n.mu-mt-900 {\n margin-top: 9rem !important;\n}\n\n.mu-mt-1000 {\n margin-top: 10rem !important;\n}\n\n.mu-mr-025 {\n margin-right: 0.25rem !important;\n}\n\n.mu-mr-050 {\n margin-right: 0.5rem !important;\n}\n\n.mu-mr-075 {\n margin-right: 0.75rem !important;\n}\n\n.mu-mr-100 {\n margin-right: 1rem !important;\n}\n\n.mu-mr-125 {\n margin-right: 1.25rem !important;\n}\n\n.mu-mr-150 {\n margin-right: 1.5rem !important;\n}\n\n.mu-mr-200 {\n margin-right: 2rem !important;\n}\n\n.mu-mr-250 {\n margin-right: 2.5rem !important;\n}\n\n.mu-mr-300 {\n margin-right: 3rem !important;\n}\n\n.mu-mr-350 {\n margin-right: 3.5rem !important;\n}\n\n.mu-mr-400 {\n margin-right: 4rem !important;\n}\n\n.mu-mr-500 {\n margin-right: 5rem !important;\n}\n\n.mu-mr-600 {\n margin-right: 6rem !important;\n}\n\n.mu-mr-700 {\n margin-right: 7rem !important;\n}\n\n.mu-mr-800 {\n margin-right: 8rem !important;\n}\n\n.mu-mr-900 {\n margin-right: 9rem !important;\n}\n\n.mu-mr-1000 {\n margin-right: 10rem !important;\n}\n\n.mu-ml-025 {\n margin-left: 0.25rem !important;\n}\n\n.mu-ml-050 {\n margin-left: 0.5rem !important;\n}\n\n.mu-ml-075 {\n margin-left: 0.75rem !important;\n}\n\n.mu-ml-100 {\n margin-left: 1rem !important;\n}\n\n.mu-ml-125 {\n margin-left: 1.25rem !important;\n}\n\n.mu-ml-150 {\n margin-left: 1.5rem !important;\n}\n\n.mu-ml-200 {\n margin-left: 2rem !important;\n}\n\n.mu-ml-250 {\n margin-left: 2.5rem !important;\n}\n\n.mu-ml-300 {\n margin-left: 3rem !important;\n}\n\n.mu-ml-350 {\n margin-left: 3.5rem !important;\n}\n\n.mu-ml-400 {\n margin-left: 4rem !important;\n}\n\n.mu-ml-500 {\n margin-left: 5rem !important;\n}\n\n.mu-ml-600 {\n margin-left: 6rem !important;\n}\n\n.mu-ml-700 {\n margin-left: 7rem !important;\n}\n\n.mu-ml-800 {\n margin-left: 8rem !important;\n}\n\n.mu-ml-900 {\n margin-left: 9rem !important;\n}\n\n.mu-ml-1000 {\n margin-left: 10rem !important;\n}\n\n.mu-mb-025 {\n margin-bottom: 0.25rem !important;\n}\n\n.mu-mb-050 {\n margin-bottom: 0.5rem !important;\n}\n\n.mu-mb-075 {\n margin-bottom: 0.75rem !important;\n}\n\n.mu-mb-100 {\n margin-bottom: 1rem !important;\n}\n\n.mu-mb-125 {\n margin-bottom: 1.25rem !important;\n}\n\n.mu-mb-150 {\n margin-bottom: 1.5rem !important;\n}\n\n.mu-mb-200 {\n margin-bottom: 2rem !important;\n}\n\n.mu-mb-250 {\n margin-bottom: 2.5rem !important;\n}\n\n.mu-mb-300 {\n margin-bottom: 3rem !important;\n}\n\n.mu-mb-350 {\n margin-bottom: 3.5rem !important;\n}\n\n.mu-mb-400 {\n margin-bottom: 4rem !important;\n}\n\n.mu-mb-500 {\n margin-bottom: 5rem !important;\n}\n\n.mu-mb-600 {\n margin-bottom: 6rem !important;\n}\n\n.mu-mb-700 {\n margin-bottom: 7rem !important;\n}\n\n.mu-mb-800 {\n margin-bottom: 8rem !important;\n}\n\n.mu-mb-900 {\n margin-bottom: 9rem !important;\n}\n\n.mu-mb-1000 {\n margin-bottom: 10rem !important;\n}\n\n.mu-m-025 {\n margin: 0.25rem !important;\n}\n\n.mu-m-050 {\n margin: 0.5rem !important;\n}\n\n.mu-m-075 {\n margin: 0.75rem !important;\n}\n\n.mu-m-100 {\n margin: 1rem !important;\n}\n\n.mu-m-125 {\n margin: 1.25rem !important;\n}\n\n.mu-m-150 {\n margin: 1.5rem !important;\n}\n\n.mu-m-200 {\n margin: 2rem !important;\n}\n\n.mu-m-250 {\n margin: 2.5rem !important;\n}\n\n.mu-m-300 {\n margin: 3rem !important;\n}\n\n.mu-m-350 {\n margin: 3.5rem !important;\n}\n\n.mu-m-400 {\n margin: 4rem !important;\n}\n\n.mu-m-500 {\n margin: 5rem !important;\n}\n\n.mu-m-600 {\n margin: 6rem !important;\n}\n\n.mu-m-700 {\n margin: 7rem !important;\n}\n\n.mu-m-800 {\n margin: 8rem !important;\n}\n\n.mu-m-900 {\n margin: 9rem !important;\n}\n\n.mu-m-1000 {\n margin: 10rem !important;\n}\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.example {\n padding-top: 2rem;\n}\n.example__container {\n margin-bottom: 1rem;\n margin-top: 1rem;\n -webkit-box-shadow: 0 0 0 1px #df382b;\n box-shadow: 0 0 0 1px #df382b;\n}\n.example__item {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-flex: 1;\n -ms-flex: 1;\n flex: 1;\n -ms-flex-item-align: stretch;\n align-self: stretch;\n height: -webkit-fit-content;\n height: -moz-fit-content;\n height: fit-content;\n -webkit-box-shadow: 0 0 0 1px #78be20;\n box-shadow: 0 0 0 1px #78be20;\n padding: 1rem 0;\n margin-bottom: 1rem;\n text-align: center;\n letter-spacing: 0.05em;\n}"}}},{"node":{"id":"1997c89b-ed68-5a4e-8382-23ed4ccdd04b","path":"src/docs/Components/Layers/previews/cta-link","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Layer Title

    \n \n
    \n
    \n
    \n \n
    \n
    \n
    \n \n Default link\n
    \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n@import 'components/_c.button';\n@import 'components/_c.links';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n\n.mc-layer__content {\n background-color: #eeeef0;\n min-height: 100%;\n}"}}},{"node":{"id":"8687eda4-30b3-59ad-88e8-b13f237d9be7","path":"src/docs/Components/Modals/previews/big-content","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Modal Title

    \n \n
    \n
    \n
    \n

    Title

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores,\n aliquid! Illo quam, est nostrum eos ad dignissimos ullam omnis,\n impedit fugiat necessitatibus dolores odit, earum distinctio magni\n amet inventore suscipit.\n

    \n
    \n
    \n
    \n \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.bodys';\n@import 'components/_c.modal';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mc-modal {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n height: 100%;\n left: 0;\n outline: 0;\n padding: 1rem 1.125rem;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n overflow-x: hidden;\n overflow-y: auto;\n}\n@media screen and (min-width: 680px) {\n .mc-modal {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n }\n}\n.mc-modal__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 38.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-modal__dialog {\n max-height: 66vh;\n max-width: 48rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-modal__dialog {\n max-width: 50rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 56.5rem;\n }\n}\n.mc-modal__header, .mc-modal__body {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header, .mc-modal__body {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n.mc-modal__header {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-top: 0.75rem;\n margin-bottom: 1.5rem;\n min-height: 2.25rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header {\n padding-top: 1rem;\n }\n}\n.mc-modal__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: 2rem;\n width: 2rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n}\n.mc-modal__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-modal__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-modal__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-modal__body {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n color: #222020;\n overflow: hidden;\n}\n.mc-modal__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-modal__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-modal__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-modal__heading {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__footer {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child {\n margin-right: 1rem;\n }\n}\n.mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n }\n}\n.mc-modal-open {\n overflow: hidden;\n}\n.mc-modal--overflow .mc-modal__dialog {\n height: 100%;\n}\n.mc-modal--overflow .mc-modal__footer {\n -webkit-box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n}\n.mc-modal-overlay {\n -webkit-filter: blur(1px);\n filter: blur(1px);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(34, 32, 32, 0.7);\n z-index: 1999999998;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}"}}},{"node":{"id":"f727c69e-b5ee-5a92-8e51-f79352741d21","path":"src/docs/Components/Modals/previews/cta-two","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Modal Title

    \n \n
    \n
    \n
    \n

    Title

    \n

    Content paragraph

    \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.bodys';\n@import 'components/_c.modal';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mc-modal {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n height: 100%;\n left: 0;\n outline: 0;\n padding: 1rem 1.125rem;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n overflow-x: hidden;\n overflow-y: auto;\n}\n@media screen and (min-width: 680px) {\n .mc-modal {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n }\n}\n.mc-modal__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 38.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-modal__dialog {\n max-height: 66vh;\n max-width: 48rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-modal__dialog {\n max-width: 50rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 56.5rem;\n }\n}\n.mc-modal__header, .mc-modal__body {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header, .mc-modal__body {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n.mc-modal__header {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-top: 0.75rem;\n margin-bottom: 1.5rem;\n min-height: 2.25rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header {\n padding-top: 1rem;\n }\n}\n.mc-modal__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: 2rem;\n width: 2rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n}\n.mc-modal__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-modal__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-modal__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-modal__body {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n color: #222020;\n overflow: hidden;\n}\n.mc-modal__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-modal__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-modal__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-modal__heading {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__footer {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child {\n margin-right: 1rem;\n }\n}\n.mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n }\n}\n.mc-modal-open {\n overflow: hidden;\n}\n.mc-modal--overflow .mc-modal__dialog {\n height: 100%;\n}\n.mc-modal--overflow .mc-modal__footer {\n -webkit-box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n}\n.mc-modal-overlay {\n -webkit-filter: blur(1px);\n filter: blur(1px);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(34, 32, 32, 0.7);\n z-index: 1999999998;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}"}}},{"node":{"id":"d68d5e62-1690-5794-b3ff-121f394ee4b0","path":"src/docs/Components/Modals/previews/default","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Modal Title

    \n \n
    \n
    \n
    \n

    Title

    \n

    Content paragraph

    \n
    \n
    \n
    \n \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.bodys';\n@import 'components/_c.modal';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mc-modal {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n height: 100%;\n left: 0;\n outline: 0;\n padding: 1rem 1.125rem;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n overflow-x: hidden;\n overflow-y: auto;\n}\n@media screen and (min-width: 680px) {\n .mc-modal {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n }\n}\n.mc-modal__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 38.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-modal__dialog {\n max-height: 66vh;\n max-width: 48rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-modal__dialog {\n max-width: 50rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 56.5rem;\n }\n}\n.mc-modal__header, .mc-modal__body {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header, .mc-modal__body {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n.mc-modal__header {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-top: 0.75rem;\n margin-bottom: 1.5rem;\n min-height: 2.25rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header {\n padding-top: 1rem;\n }\n}\n.mc-modal__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: 2rem;\n width: 2rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n}\n.mc-modal__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-modal__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-modal__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-modal__body {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n color: #222020;\n overflow: hidden;\n}\n.mc-modal__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-modal__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-modal__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-modal__heading {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__footer {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child {\n margin-right: 1rem;\n }\n}\n.mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n }\n}\n.mc-modal-open {\n overflow: hidden;\n}\n.mc-modal--overflow .mc-modal__dialog {\n height: 100%;\n}\n.mc-modal--overflow .mc-modal__footer {\n -webkit-box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n}\n.mc-modal-overlay {\n -webkit-filter: blur(1px);\n filter: blur(1px);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(34, 32, 32, 0.7);\n z-index: 1999999998;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}"}}},{"node":{"id":"4194306a-184b-5912-9b76-bfde02aa66c2","path":"src/docs/Components/Modals/previews/opening","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Modal Title

    \n \n
    \n
    \n
    \n

    Title

    \n

    Content paragraph

    \n
    \n
    \n
    \n \n
    \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.bodys';\n@import 'components/_c.modal';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mc-modal {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n height: 100%;\n left: 0;\n outline: 0;\n padding: 1rem 1.125rem;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n overflow-x: hidden;\n overflow-y: auto;\n}\n@media screen and (min-width: 680px) {\n .mc-modal {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n }\n}\n.mc-modal__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 38.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-modal__dialog {\n max-height: 66vh;\n max-width: 48rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-modal__dialog {\n max-width: 50rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 56.5rem;\n }\n}\n.mc-modal__header, .mc-modal__body {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header, .mc-modal__body {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n.mc-modal__header {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-top: 0.75rem;\n margin-bottom: 1.5rem;\n min-height: 2.25rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header {\n padding-top: 1rem;\n }\n}\n.mc-modal__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: 2rem;\n width: 2rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n}\n.mc-modal__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-modal__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-modal__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-modal__body {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n color: #222020;\n overflow: hidden;\n}\n.mc-modal__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-modal__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-modal__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-modal__heading {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__footer {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child {\n margin-right: 1rem;\n }\n}\n.mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n }\n}\n.mc-modal-open {\n overflow: hidden;\n}\n.mc-modal--overflow .mc-modal__dialog {\n height: 100%;\n}\n.mc-modal--overflow .mc-modal__footer {\n -webkit-box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n}\n.mc-modal-overlay {\n -webkit-filter: blur(1px);\n filter: blur(1px);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(34, 32, 32, 0.7);\n z-index: 1999999998;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}"}}},{"node":{"id":"0548dc70-6e88-50b6-8aff-807c3e7ab4b7","path":"src/docs/Components/Modals/previews/withouttitle","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Modal Title

    \n \n
    \n
    \n
    \n

    Content paragraph

    \n
    \n
    \n
    \n \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.bodys';\n@import 'components/_c.modal';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mc-modal {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n height: 100%;\n left: 0;\n outline: 0;\n padding: 1rem 1.125rem;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n overflow-x: hidden;\n overflow-y: auto;\n}\n@media screen and (min-width: 680px) {\n .mc-modal {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n }\n}\n.mc-modal__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 38.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-modal__dialog {\n max-height: 66vh;\n max-width: 48rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-modal__dialog {\n max-width: 50rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 56.5rem;\n }\n}\n.mc-modal__header, .mc-modal__body {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header, .mc-modal__body {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n.mc-modal__header {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-top: 0.75rem;\n margin-bottom: 1.5rem;\n min-height: 2.25rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header {\n padding-top: 1rem;\n }\n}\n.mc-modal__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: 2rem;\n width: 2rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n}\n.mc-modal__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-modal__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-modal__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-modal__body {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n color: #222020;\n overflow: hidden;\n}\n.mc-modal__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-modal__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-modal__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-modal__heading {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__footer {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child {\n margin-right: 1rem;\n }\n}\n.mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n }\n}\n.mc-modal-open {\n overflow: hidden;\n}\n.mc-modal--overflow .mc-modal__dialog {\n height: 100%;\n}\n.mc-modal--overflow .mc-modal__footer {\n -webkit-box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n}\n.mc-modal-overlay {\n -webkit-filter: blur(1px);\n filter: blur(1px);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(34, 32, 32, 0.7);\n z-index: 1999999998;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}"}}},{"node":{"id":"acbecd2b-d42e-58e8-8e24-9a5a5ed94b33","path":"src/docs/Components/Layers/previews/scrolling-content","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Layer Title

    \n \n
    \n
    \n
    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n

    \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod itaque\n odit, eligendi non, minus soluta dicta, excepturi harum tempora\n possimus dignissimos dolor rerum natus voluptatum quia. Architecto\n temporibus repellendus sed.\n

    \n
    \n
    \n
    \n \n \n
    \n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.layer';\n@import 'components/_c.button';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-layer {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n bottom: 0;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: end;\n -ms-flex-pack: end;\n justify-content: flex-end;\n left: 0;\n outline: 0;\n overflow: hidden;\n position: fixed;\n right: 0;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n}\n.mc-layer * {\n -webkit-box-sizing: inherit;\n box-sizing: inherit;\n}\n.mc-layer__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n height: 100%;\n max-width: calc(100% - 2rem);\n padding-bottom: 1rem;\n -webkit-transform: translate(100%, 0);\n -ms-transform: translate(100%, 0);\n transform: translate(100%, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog {\n max-width: 25rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog {\n max-width: 28.6875rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog {\n max-width: 28rem;\n padding-bottom: 1.5rem;\n }\n}\n.mc-layer__dialog.is-open {\n -webkit-transform: translate(0, 0);\n -ms-transform: translate(0, 0);\n transform: translate(0, 0);\n -webkit-transition: -webkit-transform 0.4s ease-in-out;\n transition: -webkit-transform 0.4s ease-in-out;\n -o-transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out;\n transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;\n}\n@media screen and (min-width: 680px) {\n .mc-layer__dialog--extend {\n max-width: 31.75rem;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-layer__dialog--extend {\n max-width: 36.3125rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__dialog--extend {\n max-width: 43rem;\n }\n}\n.mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header, .mc-layer__body, .mc-layer__footer {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__header {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding-bottom: 0.5rem;\n padding-top: 1rem;\n margin-bottom: 0.75rem;\n min-height: 3.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__header {\n padding-bottom: 0.75rem;\n padding-top: 1.25rem;\n margin-bottom: 1.5rem;\n min-height: 4.25rem;\n }\n}\n.mc-layer__icon {\n fill: #6f676c;\n height: 1.5rem;\n margin-right: 0.75rem;\n width: 1.5rem;\n}\n.mc-layer__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-layer__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-item-align: start;\n align-self: flex-start;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n cursor: pointer;\n height: 2rem;\n margin-left: auto;\n width: 2rem;\n}\n.mc-layer__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-layer__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-layer__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-layer__body {\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n overflow: hidden;\n}\n.mc-layer__body--overflowing, .mc-layer__body--overflowing-scroll-edge {\n border-bottom: 1px solid #d3d2d6;\n position: relative;\n}\n.mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n content: \"\";\n background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));\n background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));\n bottom: 0;\n position: absolute;\n height: 1.875rem;\n left: 0;\n right: 0;\n}\n@media screen and (min-width: 0px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.625rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing::after, .mc-layer__body--overflowing-scroll-edge::after {\n height: 2.25rem;\n }\n}\n.mc-layer__body--overflowing-scroll-edge {\n padding-left: 0;\n padding-right: 0;\n}\n.mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 1rem;\n padding-right: 1.125rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__body--overflowing-scroll-edge .mc-layer__content {\n padding-left: 2rem;\n padding-right: 2rem;\n }\n}\n.mc-layer__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-layer__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-layer__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-layer__footer {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n padding-top: 1rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding-top: 1.5rem;\n }\n}\n.mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 1024px) {\n .mc-layer__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n.mc-layer-open {\n overflow: hidden;\n}\n.mc-layer-overlay {\n background-color: rgba(34, 32, 32, 0.7);\n bottom: 0;\n cursor: pointer;\n display: block;\n -webkit-filter: blur(1px);\n filter: blur(1px);\n left: 0;\n opacity: 0;\n position: fixed;\n pointer-events: none;\n right: 0;\n top: 0;\n -webkit-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n -o-transition: opacity 0.4s ease, visibility 0ms 0.4s;\n transition: opacity 0.4s ease, visibility 0ms 0.4s;\n z-index: 1999999998;\n}\n.mc-layer-overlay.is-visible {\n opacity: 1;\n pointer-events: all;\n -webkit-transition: opacity 0.4s ease, visibility 0ms;\n -o-transition: opacity 0.4s ease, visibility 0ms;\n transition: opacity 0.4s ease, visibility 0ms;\n visibility: visible;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 700px;\n height: 100vh;\n}"}}},{"node":{"id":"6394dfec-5828-5bec-9530-521a84a54220","path":"src/docs/Foundations/Utilities/BorderRadius/previews/large","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis iure harum, non ipsum officia ipsam temporibus quibusdam quia enim culpa unde nihil ipsa voluptates cumque laborum aspernatur optio aut recusandae?\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__radius {\n @include set-border-radius('l');\n\n padding: $mu100;\n width: 50%;\n margin: $mu250 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__radius {\n border-radius: 6px;\n padding: 1rem;\n width: 50%;\n margin: 2.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"ed71e08f-f7c8-581e-89a8-a67aed345e14","path":"src/docs/Foundations/Utilities/BorderRadius/previews/medium","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis iure harum, non ipsum officia ipsam temporibus quibusdam quia enim culpa unde nihil ipsa voluptates cumque laborum aspernatur optio aut recusandae?\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__radius {\n @include set-border-radius('m');\n\n padding: $mu100;\n width: 50%;\n margin: $mu250 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__radius {\n border-radius: 4px;\n padding: 1rem;\n width: 50%;\n margin: 2.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"02fb93e1-8651-5270-9dc5-9eb1b60555a4","path":"src/docs/Foundations/Utilities/BorderRadius/previews/small","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis iure harum, non ipsum officia ipsam temporibus quibusdam quia enim culpa unde nihil ipsa voluptates cumque laborum aspernatur optio aut recusandae?\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__radius {\n @include set-border-radius('s');\n\n padding: $mu100;\n width: 50%;\n margin: $mu250 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__radius {\n border-radius: 2px;\n padding: 1rem;\n width: 50%;\n margin: 2.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"17fe82a1-f7bc-51e9-af59-dd8e51d7957d","path":"src/docs/Foundations/Utilities/BorderRadius/previews/example","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis iure harum, non ipsum officia ipsam temporibus quibusdam quia enim culpa unde nihil ipsa voluptates cumque laborum aspernatur optio aut recusandae?\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__radius {\n @include set-border-radius('s');\n\n padding: $mu100;\n width: 50%;\n margin: $mu250 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__radius {\n border-radius: 2px;\n padding: 1rem;\n width: 50%;\n margin: 2.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"464234dc-0a3d-5fc8-b0b6-e04039396a5b","path":"src/docs/Foundations/Utilities/Shadows/previews/example","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis iure harum, non ipsum officia ipsam temporibus quibusdam quia enim culpa unde nihil ipsa voluptates cumque laborum aspernatur optio aut recusandae?\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__shadow {\n @include set-box-shadow('s');\n\n padding: $mu100;\n width: 50%;\n margin: $mu250 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__shadow {\n -webkit-box-shadow: 0px 1px 5px 0px rgba(34, 32, 32, 0.2);\n box-shadow: 0px 1px 5px 0px rgba(34, 32, 32, 0.2);\n padding: 1rem;\n width: 50%;\n margin: 2.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"e454d48b-9ee0-54c7-9cd9-1cffcd9f3d91","path":"src/docs/Foundations/Utilities/Shadows/previews/large","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__shadow {\n @include set-box-shadow('l');\n\n padding: $mu100;\n width: 50%;\n margin: $mu050 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__shadow {\n -webkit-box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n box-shadow: 0px 4px 20px 0px rgba(34, 32, 32, 0.2);\n padding: 1rem;\n width: 50%;\n margin: 0.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"56407046-4164-5f58-85c9-f358bdec8289","path":"src/docs/Foundations/Utilities/Shadows/previews/medium","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__shadow {\n @include set-box-shadow('m');\n\n padding: $mu100;\n width: 50%;\n margin: $mu050 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__shadow {\n -webkit-box-shadow: 0px 2px 10px 0px rgba(34, 32, 32, 0.2);\n box-shadow: 0px 2px 10px 0px rgba(34, 32, 32, 0.2);\n padding: 1rem;\n width: 50%;\n margin: 0.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"7ee2e2c9-f6f7-5c7f-8858-85e7dcafa310","path":"src/docs/Foundations/Utilities/Shadows/previews/small","codes":{"js":"","html":"
    \n
    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n\n.example {\n background: $color-grey-100;\n padding: $mu150;\n\n &__shadow {\n @include set-box-shadow('s');\n\n padding: $mu100;\n width: 50%;\n margin: $mu050 auto;\n background: $color-grey-000;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.example {\n background: #eeeef0;\n padding: 1.5rem;\n}\n.example__shadow {\n -webkit-box-shadow: 0px 1px 5px 0px rgba(34, 32, 32, 0.2);\n box-shadow: 0px 1px 5px 0px rgba(34, 32, 32, 0.2);\n padding: 1rem;\n width: 50%;\n margin: 0.5rem auto;\n background: #ffffff;\n}"}}},{"node":{"id":"70690ff1-e414-593e-8920-d2986a94f43b","path":"src/docs/Components/Form/QuantitySelector/previews/medium-input","codes":{"js":"","html":"
    \n
    \n \n
    \n \n \n \n \n \n\n \n\n \n \n \n \n \n
    \n
    \n
    \n\n\n \n \n \n \n \n \n\n\n\n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n@import 'components/_c.button';\n@import 'components/_c.quantity-selector';\n\n.example {\n @include set-font-face();\n\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 2rem;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-quantity-selector {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n.mc-quantity-selector__button-right, .mc-quantity-selector__button-left {\n position: relative;\n}\n.mc-quantity-selector__button-right::after, .mc-quantity-selector__button-left::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.25rem;\n right: -0.25rem;\n bottom: -0.25rem;\n left: -0.25rem;\n}\n.mc-quantity-selector__button-right:focus, .mc-quantity-selector__button-left:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n z-index: 1;\n}\n.mc-quantity-selector__button-right:focus::after, .mc-quantity-selector__button-left:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-quantity-selector__button-right {\n border-radius: 0 0.25rem 0.25rem 0;\n}\n.mc-quantity-selector__button-right:focus::after {\n border-radius: 0.25rem 0.375rem 0.375rem 0.25rem;\n}\n.mc-quantity-selector__button-left {\n border-radius: 0.25rem 0 0 0.25rem;\n}\n.mc-quantity-selector__button-left:focus::after {\n border-radius: 0.375rem 0.25rem 0.25rem 0.375rem;\n}\n.mc-quantity-selector__input {\n border-radius: 0;\n border-left: none;\n border-right: none;\n}\n.mc-quantity-selector__input::-webkit-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-moz-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input, .mc-quantity-selector__input::placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n position: relative;\n z-index: 1;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right {\n position: static;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n border-radius: 0.125rem;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n top: -2px;\n right: 46px;\n bottom: -2px;\n left: 46px;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 2rem;\n}"}}},{"node":{"id":"fafc38d3-87a1-5097-a232-9f18c1de8b55","path":"src/docs/Components/Form/QuantitySelector/previews/minimal","codes":{"js":"","html":"
    \n
    \n \n \n \n \n \n\n \n\n \n \n \n \n \n
    \n
    \n\n
    \n
    \n \n \n \n \n \n\n \n\n \n \n \n \n \n
    \n
    \n\n\n \n \n \n \n \n \n\n\n\n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n@import 'components/_c.button';\n@import 'components/_c.quantity-selector';\n\n\n\n.example {\n @include set-font-face();\n\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 2rem;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-quantity-selector {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n.mc-quantity-selector__button-right, .mc-quantity-selector__button-left {\n position: relative;\n}\n.mc-quantity-selector__button-right::after, .mc-quantity-selector__button-left::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.25rem;\n right: -0.25rem;\n bottom: -0.25rem;\n left: -0.25rem;\n}\n.mc-quantity-selector__button-right:focus, .mc-quantity-selector__button-left:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n z-index: 1;\n}\n.mc-quantity-selector__button-right:focus::after, .mc-quantity-selector__button-left:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-quantity-selector__button-right {\n border-radius: 0 0.25rem 0.25rem 0;\n}\n.mc-quantity-selector__button-right:focus::after {\n border-radius: 0.25rem 0.375rem 0.375rem 0.25rem;\n}\n.mc-quantity-selector__button-left {\n border-radius: 0.25rem 0 0 0.25rem;\n}\n.mc-quantity-selector__button-left:focus::after {\n border-radius: 0.375rem 0.25rem 0.25rem 0.375rem;\n}\n.mc-quantity-selector__input {\n border-radius: 0;\n border-left: none;\n border-right: none;\n}\n.mc-quantity-selector__input::-webkit-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-moz-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input, .mc-quantity-selector__input::placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n position: relative;\n z-index: 1;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right {\n position: static;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n border-radius: 0.125rem;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n top: -2px;\n right: 46px;\n bottom: -2px;\n left: 46px;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 2rem;\n}"}}},{"node":{"id":"f1453587-01f6-5232-8598-947652deb9c2","path":"src/docs/Components/Form/QuantitySelector/previews/with-label","codes":{"js":"","html":"
    \n
    \n \n
    \n \n \n \n \n \n\n \n\n \n \n \n \n \n
    \n
    \n
    \n\n
    \n
    \n \n
    \n \n \n \n \n \n\n \n\n \n \n \n \n \n
    \n
    \n
    \n\n\n \n \n \n \n \n \n\n\n\n \n \n \n \n \n \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.text-input';\n@import 'components/_c.fields';\n@import 'components/_c.button';\n@import 'components/_c.quantity-selector';\n\n\n\n.example {\n @include set-font-face();\n\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 2rem;\n}\n","css":"@charset \"UTF-8\";\n/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mc-text-input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n display: block;\n width: 100%;\n position: relative;\n border: 1px solid #6f676c;\n color: #222020;\n background-color: #ffffff;\n border-radius: 4px;\n}\n.mc-text-input[type=number]::-webkit-inner-spin-button, .mc-text-input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-text-input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-text-input::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input::-webkit-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-moz-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input:-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::-ms-input-placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input::placeholder {\n margin: 0;\n color: #887f87;\n opacity: 1;\n}\n.mc-text-input.is-valid, .mc-text-input.is-invalid {\n background-repeat: no-repeat;\n background-size: 1rem 1rem;\n background-position: right 0.5rem center;\n padding-right: 2.5rem;\n}\n.mc-text-input.is-valid {\n border-color: #78be20;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiM3OGJlMjAiIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTcuNjMgMTEuMjFhMSAxIDAgMCAxLTEuMzggMGwtMi45Mi0yLjZhMSAxIDAgMSAxIDEuMzQtMS40OGwyLjIyIDIgNC40MS00LjM0YTEgMSAwIDEgMSAxLjQgMS40MnoiLz48L3N2Zz4=');\n}\n.mc-text-input.is-valid:hover, .mc-text-input.is-valid.is-hover {\n border-color: #0a601b;\n}\n.mc-text-input.is-invalid {\n border-color: #b42a27;\n background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMXJlbSIgd2lkdGg9IjFyZW0iIGZpbGw9IiNiNDJhMjciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZD0iTTkuNDEgOGwzLjMtMy4yOWExIDEgMCAxMC0xLjQyLTEuNDJMOCA2LjU5bC0zLjI5LTMuM2ExIDEgMCAwMC0xLjQyIDEuNDJMNi41OSA4bC0zLjMgMy4yOWExIDEgMCAwMDAgMS40MiAxIDEgMCAwMDEuNDIgMEw4IDkuNDFsMy4yOSAzLjNhMSAxIDAgMDAxLjQyIDAgMSAxIDAgMDAwLTEuNDJ6Ii8+PC9zdmc+');\n}\n.mc-text-input.is-invalid:hover, .mc-text-input.is-invalid.is-hover {\n border-color: #641b21;\n}\n.mc-text-input.is-hover,\n.mc-text-input:hover {\n border-color: #222020;\n}\n\n.mc-text-input.is-focus,\n.mc-text-input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-text-input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-text-input--s {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n}\n.mc-text-input--s::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--s::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-text-input--m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n}\n.mc-text-input--m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n.mc-text-input--m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n}\n\n@media screen and (min-width: 680px) {\n .mc-text-input--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-m::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-m::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-m {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-m::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-m::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-text-input--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-l::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-l::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-l {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-l::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-l::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-text-input--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-text-input--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n height: 2rem;\n padding: 0.4375rem 0.4375rem;\n }\n .mc-text-input--s\\@from-xxl::-webkit-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-moz-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl:-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::-ms-input-placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--s\\@from-xxl::placeholder {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n }\n .mc-text-input--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.125;\n height: 3rem;\n padding: 0.875rem 0.6875rem;\n }\n .mc-text-input--m\\@from-xxl::-webkit-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-moz-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl:-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::-ms-input-placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n .mc-text-input--m\\@from-xxl::placeholder {\n font-size: 1rem;\n line-height: 1.125;\n }\n}\n.mc-field__label, .mc-field__legend {\n color: #3c3738;\n}\n.mc-field__label {\n font-size: 0.875rem;\n line-height: 1.1428571429;\n}\n.mc-field__legend {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding-left: 0;\n padding-right: 0;\n}\n.mc-field__requirement, .mc-field__help {\n font-size: 0.75rem;\n line-height: 1.1666666667;\n color: #6f676c;\n}\n.mc-field__requirement::before {\n content: \" - \";\n}\n.mc-field__help {\n display: block;\n margin-top: 0.25rem;\n}\n.mc-field__input, .mc-field__element {\n margin-top: 0.5rem;\n}\n.mc-field__container {\n margin-top: 1rem;\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n }\n}\n@media screen and (min-width: 769px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-bottom: 0;\n margin-right: 1rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-field__container--inline .mc-field__item:not(:last-child) {\n margin-right: 2rem;\n }\n}\n.mc-field__item:not(:last-child) {\n margin-bottom: 1rem;\n}\n.mc-field__error-message {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n color: #b42a27;\n display: inline-block;\n margin-top: 0.25rem;\n}\n.mc-field--group {\n border: none;\n margin-left: 0;\n margin-right: 0;\n padding: 0;\n}\n.mc-field--group .mc-field__error-message {\n margin-top: 0.5rem;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-quantity-selector {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n position: relative;\n}\n.mc-quantity-selector__button-right, .mc-quantity-selector__button-left {\n position: relative;\n}\n.mc-quantity-selector__button-right::after, .mc-quantity-selector__button-left::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n top: -0.25rem;\n right: -0.25rem;\n bottom: -0.25rem;\n left: -0.25rem;\n}\n.mc-quantity-selector__button-right:focus, .mc-quantity-selector__button-left:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n z-index: 1;\n}\n.mc-quantity-selector__button-right:focus::after, .mc-quantity-selector__button-left:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n}\n.mc-quantity-selector__button-right {\n border-radius: 0 0.25rem 0.25rem 0;\n}\n.mc-quantity-selector__button-right:focus::after {\n border-radius: 0.25rem 0.375rem 0.375rem 0.25rem;\n}\n.mc-quantity-selector__button-left {\n border-radius: 0.25rem 0 0 0.25rem;\n}\n.mc-quantity-selector__button-left:focus::after {\n border-radius: 0.375rem 0.25rem 0.25rem 0.375rem;\n}\n.mc-quantity-selector__input {\n border-radius: 0;\n border-left: none;\n border-right: none;\n}\n.mc-quantity-selector__input::-webkit-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-moz-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input::-ms-input-placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input, .mc-quantity-selector__input::placeholder {\n text-align: center;\n}\n.mc-quantity-selector__input:focus {\n -webkit-box-shadow: none;\n box-shadow: none;\n position: relative;\n z-index: 1;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right {\n position: static;\n}\n.mc-quantity-selector__input:focus ~ .mc-quantity-selector__button-right::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n border-radius: 0.125rem;\n -webkit-box-shadow: 0 0 0 0.125rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #25a8d0;\n top: -2px;\n right: 46px;\n bottom: -2px;\n left: 46px;\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n margin: 2rem;\n}"}}},{"node":{"id":"f9a7a376-28d3-568f-b2e9-499d136631d7","path":"src/docs/Components/Modals/previews/cta-link","codes":{"js":"","html":"
    \n \n
    \n
    \n

    Modal Title

    \n \n
    \n
    \n
    \n

    Title

    \n

    Content paragraph

    \n
    \n
    \n
    \n \n Default link\n
    \n
    \n
    \n\n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.bodys';\n@import 'components/_c.modal';\n@import 'components/_c.button';\n@import 'components/_c.links';\n\n.example {\n @include set-font-face('regular');\n\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mc-modal {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n height: 100%;\n left: 0;\n outline: 0;\n padding: 1rem 1.125rem;\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 1999999999;\n overflow-x: hidden;\n overflow-y: auto;\n}\n@media screen and (min-width: 680px) {\n .mc-modal {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n }\n}\n.mc-modal__dialog {\n background: #ffffff;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 38.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-modal__dialog {\n max-height: 66vh;\n max-width: 48rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-modal__dialog {\n max-width: 50rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-modal__dialog {\n max-height: 50vh;\n max-width: 56.5rem;\n }\n}\n.mc-modal__header, .mc-modal__body {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header, .mc-modal__body {\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n }\n}\n.mc-modal__header {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n padding-top: 0.75rem;\n margin-bottom: 1.5rem;\n min-height: 2.25rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__header {\n padding-top: 1rem;\n }\n}\n.mc-modal__title {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n font-weight: 400;\n color: #6f676c;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__close {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n position: relative;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n height: 2rem;\n width: 2rem;\n background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMnJlbSIgd2lkdGg9IjJyZW0iIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0iIzg4N2Y4NyI+PHBhdGggZD0iTTE3LjQxIDE2bDguOC04Ljc5YTEgMSAwIDEwLTEuNDItMS40MkwxNiAxNC41OWwtOC43OS04LjhhMSAxIDAgMDAtMS40MiAxLjQybDguOCA4Ljc5LTguOCA4Ljc5YTEgMSAwIDAwMCAxLjQyIDEgMSAwIDAwMS40MiAwbDguNzktOC44IDguNzkgOC44YTEgMSAwIDAwMS40MiAwIDEgMSAwIDAwMC0xLjQyeiIvPjwvc3ZnPg==') no-repeat;\n background-size: contain;\n}\n.mc-modal__close::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-modal__close-text {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n visibility: visible;\n white-space: nowrap;\n}\n.mc-modal__close:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-modal__body {\n font-size: 1rem;\n line-height: 1.375;\n -webkit-box-flex: 1;\n -ms-flex: 1 1;\n flex: 1 1;\n color: #222020;\n overflow: hidden;\n}\n.mc-modal__content {\n max-height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n scrollbar-color: #6f676c #eeeef0;\n scrollbar-width: thin;\n}\n.mc-modal__content::-webkit-scrollbar {\n background-color: #eeeef0;\n width: 0.25rem;\n}\n.mc-modal__content::-webkit-scrollbar-thumb {\n background: #6f676c;\n}\n.mc-modal__heading {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n font-weight: 600;\n color: #000000;\n margin-bottom: 0;\n margin-top: 0;\n}\n.mc-modal__footer {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n padding: 1rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child {\n margin-right: 1rem;\n }\n}\n.mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0.75rem;\n}\n@media screen and (min-width: 680px) {\n .mc-modal__footer > :first-child:not(:only-child) {\n margin-bottom: 0;\n }\n}\n.mc-modal-open {\n overflow: hidden;\n}\n.mc-modal--overflow .mc-modal__dialog {\n height: 100%;\n}\n.mc-modal--overflow .mc-modal__footer {\n -webkit-box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n box-shadow: 0 0.25rem 1.25rem 0 rgba(34, 32, 32, 0.2);\n}\n.mc-modal-overlay {\n -webkit-filter: blur(1px);\n filter: blur(1px);\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(34, 32, 32, 0.7);\n z-index: 1999999998;\n}\n.mc-button {\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n text-decoration: none;\n outline: none;\n border: none;\n padding: 0;\n cursor: pointer;\n color: #ffffff;\n background-color: #78be20;\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n cursor: pointer;\n border-radius: 4px;\n text-align: center;\n border: 2px solid transparent;\n -webkit-transition: all ease 200ms;\n -o-transition: all ease 200ms;\n transition: all ease 200ms;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n vertical-align: middle;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n fill: currentColor;\n}\n.mc-button.is-hover,\n.mc-button:hover {\n background-color: #41a017;\n color: #ffffff;\n}\n\n.mc-button.is-active,\n.mc-button:active {\n background-color: #158110;\n}\n\n.mc-button.is-disabled,\n.mc-button:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button.is-focus,\n.mc-button:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-button--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--s .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--s .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n}\n.mc-button--m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n}\n.mc-button--l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n}\n.mc-button--l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n}\n.mc-button--fit {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n}\n.mc-button--full {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n}\n@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n}\n.mc-button--square {\n padding: 0;\n}\n.mc-button__icon:last-child {\n margin-left: 0.5rem;\n margin-right: -0.25rem;\n}\n.mc-button__icon:first-child {\n margin-right: 0.5rem;\n margin-left: -0.25rem;\n}\n.mc-button__icon:only-child {\n margin: 0;\n}\n.mc-button__label {\n pointer-events: none;\n}\n.mc-button--solid-primary-02 {\n background-color: #007574;\n}\n.mc-button--solid-primary-02.is-hover,\n.mc-button--solid-primary-02:hover {\n background-color: #063a44;\n}\n\n.mc-button--solid-primary-02.is-active,\n.mc-button--solid-primary-02:active {\n background-color: #062b35;\n}\n\n.mc-button--solid-primary-02.is-disabled,\n.mc-button--solid-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-neutral {\n background-color: #887f87;\n}\n.mc-button--solid-neutral.is-hover,\n.mc-button--solid-neutral:hover {\n background-color: #554f52;\n}\n\n.mc-button--solid-neutral.is-active,\n.mc-button--solid-neutral:active {\n background-color: #3c3738;\n}\n\n.mc-button--solid-neutral.is-disabled,\n.mc-button--solid-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--solid-danger {\n background-color: #df382b;\n}\n.mc-button--solid-danger.is-hover,\n.mc-button--solid-danger:hover {\n background-color: #b42a27;\n}\n\n.mc-button--solid-danger.is-active,\n.mc-button--solid-danger:active {\n background-color: #8b2226;\n}\n\n.mc-button--solid-danger.is-disabled,\n.mc-button--solid-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered {\n color: #78be20;\n border-color: #78be20;\n background-color: #ffffff;\n}\n.mc-button--bordered.is-hover,\n.mc-button--bordered:hover {\n background-color: #eaf3e2;\n color: #78be20;\n}\n\n.mc-button--bordered.is-active,\n.mc-button--bordered:active {\n background-color: #cbe3b5;\n}\n\n.mc-button--bordered.is-disabled,\n.mc-button--bordered:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-primary-02 {\n color: #007574;\n border-color: #007574;\n background-color: #ffffff;\n}\n.mc-button--bordered-primary-02.is-hover,\n.mc-button--bordered-primary-02:hover {\n background-color: #dbedea;\n color: #007574;\n}\n\n.mc-button--bordered-primary-02.is-active,\n.mc-button--bordered-primary-02:active {\n background-color: #a5d1cb;\n}\n\n.mc-button--bordered-primary-02.is-disabled,\n.mc-button--bordered-primary-02:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-neutral {\n color: #887f87;\n border-color: #887f87;\n background-color: #ffffff;\n}\n.mc-button--bordered-neutral.is-hover,\n.mc-button--bordered-neutral:hover {\n background-color: #eeeef0;\n color: #887f87;\n}\n\n.mc-button--bordered-neutral.is-active,\n.mc-button--bordered-neutral:active {\n background-color: #d3d2d6;\n}\n\n.mc-button--bordered-neutral.is-disabled,\n.mc-button--bordered-neutral:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n.mc-button--bordered-danger {\n color: #df382b;\n border-color: #df382b;\n background-color: #ffffff;\n}\n.mc-button--bordered-danger.is-hover,\n.mc-button--bordered-danger:hover {\n background-color: #feedee;\n color: #df382b;\n}\n\n.mc-button--bordered-danger.is-active,\n.mc-button--bordered-danger:active {\n background-color: #fab9bc;\n}\n\n.mc-button--bordered-danger.is-disabled,\n.mc-button--bordered-danger:disabled {\n border-color: transparent;\n background-color: #d3d2d6;\n color: #6f676c;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-button--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-m .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-m .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-m .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-m .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-m .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-m {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-m {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-m {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-button--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-l .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-l .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-l .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-l .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-l .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-l {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-l {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-l {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-button--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-button--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n padding: 0.3125rem 1rem;\n min-height: 2rem;\n min-width: 2rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--s\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--s\\@from-xxl .mc-button__icon:only-child {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n padding: 0.6875rem 2rem;\n min-height: 3rem;\n min-width: 3rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--m\\@from-xxl .mc-button__icon {\n width: 1.5rem;\n height: 1.5rem;\n }\n .mc-button--m\\@from-xxl .mc-button__icon:only-child {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl {\n font-size: 1.125rem;\n line-height: 1.3333333333;\n padding: 0.875rem 2rem;\n min-height: 3.5rem;\n min-width: 3.5rem;\n /* ie11 hack to center vertically */\n /* see : https://github.com/philipwalton/flexbugs/issues/231 */\n height: 0;\n }\n .mc-button--l\\@from-xxl .mc-button__icon {\n width: 2rem;\n height: 2rem;\n }\n .mc-button--l\\@from-xxl .mc-button__icon:only-child {\n width: 2.5rem;\n height: 2.5rem;\n }\n .mc-button--fit\\@from-xxl {\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n width: auto;\n }\n .mc-button--full\\@from-xxl {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n }\n @supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)) {\n .mc-button--full\\@from-xxl {\n width: -webkit-fill-available;\n width: -moz-available;\n width: stretch;\n }\n }\n}\n.mc-link {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n cursor: pointer;\n display: -webkit-inline-box;\n display: -ms-inline-flexbox;\n display: inline-flex;\n font-size: inherit;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n line-height: inherit;\n text-decoration: underline;\n -webkit-transition: color ease 200ms;\n -o-transition: color ease 200ms;\n transition: color ease 200ms;\n color: #000000;\n position: relative;\n}\n.mc-link:focus {\n outline: none;\n}\n.mc-link:focus::after {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-link.is-visited,\n.mc-link:visited {\n color: #3c3738;\n}\n\n.mc-link.is-hover,\n.mc-link:hover {\n color: #6f676c;\n}\n\n.mc-link.is-active,\n.mc-link:active {\n color: #3c3738;\n}\n\n.mc-link.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--s {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n}\n.mc-link--m {\n font-size: 1rem;\n line-height: 1.375;\n}\n.mc-link::after {\n border-radius: 2px;\n -webkit-box-shadow: 0 0 0 0 transparent;\n box-shadow: 0 0 0 0 transparent;\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n -webkit-transition: -webkit-box-shadow 200ms ease;\n transition: -webkit-box-shadow 200ms ease;\n -o-transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease;\n transition: box-shadow 200ms ease, -webkit-box-shadow 200ms ease;\n}\n.mc-link__icon {\n display: block;\n height: 1rem;\n fill: currentColor;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n width: 1rem;\n}\n.mc-link__icon--left {\n margin-right: 0.25rem;\n}\n.mc-link__icon--right {\n margin-left: 0.25rem;\n}\n.mc-link--light {\n color: #ffffff;\n}\n.mc-link--light.is-visited,\n.mc-link--light:visited {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-hover,\n.mc-link--light:hover {\n color: #a19ba2;\n}\n\n.mc-link--light.is-active,\n.mc-link--light:active {\n color: #d3d2d6;\n}\n\n.mc-link--light.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary {\n color: #78be20;\n}\n.mc-link--primary.is-visited,\n.mc-link--primary:visited {\n color: #158110;\n}\n\n.mc-link--primary.is-hover,\n.mc-link--primary:hover {\n color: #053e1f;\n}\n\n.mc-link--primary.is-active,\n.mc-link--primary:active {\n color: #158110;\n}\n\n.mc-link--primary.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--primary-02 {\n color: #035f64;\n}\n.mc-link--primary-02.is-visited,\n.mc-link--primary-02:visited {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-hover,\n.mc-link--primary-02:hover {\n color: #062b35;\n}\n\n.mc-link--primary-02.is-active,\n.mc-link--primary-02:active {\n color: #044c53;\n}\n\n.mc-link--primary-02.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n.mc-link--danger {\n color: #b42a27;\n}\n.mc-link--danger.is-visited,\n.mc-link--danger:visited {\n color: #8b2226;\n}\n\n.mc-link--danger.is-hover,\n.mc-link--danger:hover {\n color: #3e1219;\n}\n\n.mc-link--danger.is-active,\n.mc-link--danger:active {\n color: #8b2226;\n}\n\n.mc-link--danger.is-disabled {\n color: #eeeef0;\n cursor: not-allowed;\n}\n\n@media screen and (min-width: 680px) {\n .mc-link--s\\@from-m {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-m {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mc-link--s\\@from-l {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-l {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mc-link--s\\@from-xl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mc-link--s\\@from-xxl {\n font-size: 0.875rem;\n line-height: 1.2857142857;\n }\n .mc-link--m\\@from-xxl {\n font-size: 1rem;\n line-height: 1.375;\n }\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n background-color: #f6f7f7;\n min-height: 500px;\n height: 100vh;\n}"}}},{"node":{"id":"bf34b080-d74f-5ac3-b991-2b0c775bc619","path":"src/docs/Components/Form/Radio/previews/intro","codes":{"js":"","html":"
      \n
    • \n
      \n \n \n
      \n
      • \n
    • \n
      \n \n \n
      \n
      • \n
    • \n
      \n \n \n
      \n
      • \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'components/_c.radio';\n@import 'typography/_t.all-base-typography';\n@import 'typography/_t.bodys';\n\n.example {\n @include set-font-face('regular');\n\n margin: $mu200 auto;\n padding: 0 $mu200;\n width: 40vw;\n\n &__list-item {\n list-style-type: none;\n margin: $mu100 0;\n text-align: center;\n }\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n/* stylelint-disable no-descending-specificity */\n.mc-radio {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n}\n.mc-radio__label {\n font-size: 1rem;\n line-height: 1.125;\n cursor: pointer;\n margin-left: 0.5rem;\n}\n.mc-radio__input {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n outline: none;\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n padding: 0;\n margin: 0;\n -webkit-box-shadow: none;\n box-shadow: none;\n border: none;\n /* for mozilla */\n border: 2px solid #6f676c;\n min-width: 20px;\n width: 1.25rem;\n min-height: 20px;\n height: 1.25rem;\n border-radius: 50%;\n background: #ffffff;\n position: relative;\n -webkit-transition: all 200ms ease;\n -o-transition: all 200ms ease;\n transition: all 200ms ease;\n cursor: pointer;\n}\n.mc-radio__input[type=number]::-webkit-inner-spin-button, .mc-radio__input[type=number]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n appearance: none;\n margin: 0;\n}\n.mc-radio__input[type=number] {\n -moz-appearance: textfield;\n}\n.mc-radio__input::-ms-check {\n background: #ffffff;\n border: 2px solid #6f676c;\n color: #ffffff;\n}\n.mc-radio__input.is-invalid {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid::-ms-check {\n border-color: #b42a27;\n}\n.mc-radio__input.is-invalid.is-hover,\n.mc-radio__input.is-invalid:hover {\n border-color: #641b21;\n}\n.mc-radio__input.is-invalid.is-hover::-ms-check,\n.mc-radio__input.is-invalid:hover::-ms-check {\n border-color: #641b21;\n}\n\n.mc-radio__input.is-hover,\n.mc-radio__input:hover {\n border-color: #222020;\n}\n.mc-radio__input.is-hover::-ms-check,\n.mc-radio__input:hover::-ms-check {\n border-color: #222020;\n}\n\n.mc-radio__input.is-focus,\n.mc-radio__input:focus {\n -webkit-box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n.mc-radio__input.is-focus::-ms-check,\n.mc-radio__input:focus::-ms-check {\n box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #25a8d0;\n}\n\n.mc-radio__input:disabled {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:disabled::-ms-check {\n border-color: #eeeef0;\n background: #eeeef0;\n cursor: not-allowed;\n}\n.mc-radio__input:checked {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::-ms-check {\n border-color: #78be20;\n background-color: #78be20;\n}\n.mc-radio__input:checked::before {\n content: \"\";\n background: #ffffff;\n display: block;\n width: 0.375rem;\n min-width: 6px;\n height: 0.375rem;\n min-height: 6px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n -webkit-transform: translate(-50%, -50%);\n -ms-transform: translate(-50%, -50%);\n transform: translate(-50%, -50%);\n}\n.mc-radio__input:checked:hover {\n border-color: #0a601b;\n}\n.mc-radio__input:checked:hover::-ms-check {\n border-color: #0a601b;\n}\n\n/* stylelint-enable */\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n margin: 2rem auto;\n padding: 0 2rem;\n width: 40vw;\n}\n.example__list-item {\n list-style-type: none;\n margin: 1rem 0;\n text-align: center;\n}"}}},{"node":{"id":"08478479-b9cb-527b-9bfa-2cdfe38dbd1f","path":"src/docs/Components/Hero/previews/basic","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n \n \n \n\n
    \n \n Hero title\n \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n@import 'components/_c.hero';\n\n.example {\n @include set-font-family();\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mc-hero {\n position: relative;\n}\n.mc-hero__main {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n padding-bottom: 4.5rem;\n padding-top: 4rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 6rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__main {\n padding-bottom: 10rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero__main {\n padding-bottom: 8rem;\n padding-top: 8rem;\n }\n}\n.mc-hero__cover {\n z-index: -1;\n}\n.mc-hero__cover, .mc-hero__cover::before {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mc-hero__cover::before {\n background-color: rgba(34, 32, 32, 0.8);\n content: \"\";\n display: block;\n}\n.mc-hero__visual {\n display: block;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n.mc-hero__title {\n margin-top: 0;\n}\n.mc-hero__content {\n color: #ffffff;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n@media (min-width: 1280px) and (max-width: 1919px) {\n .mc-hero__content {\n max-width: 75%;\n }\n}\n.mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n margin-top: -6rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__boxed {\n margin-top: -5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 41.6666666667%;\n flex: 0 0 41.6666666667%;\n max-width: 41.6666666667%;\n margin-top: 0;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n}\n.mc-hero--with-content .mc-hero__main {\n padding-bottom: 3rem;\n padding-top: 2.5rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 3.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 8rem;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 58.3333333333%;\n }\n}\n.mc-hero--with-boxed * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed {\n padding-bottom: 3rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero--with-boxed {\n padding-bottom: 4rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed {\n padding-bottom: 5rem;\n }\n}\n.mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 2.5rem;\n position: relative;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 58.3333333333%;\n flex: 0 0 58.3333333333%;\n max-width: 58.3333333333%;\n padding-bottom: 0;\n padding-top: 0;\n position: static;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n}\n@media (max-width: 679px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -0.5rem;\n width: calc(100% + 1rem);\n }\n}\n@media (max-width: 1023px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -1rem;\n width: calc(100% + 2rem);\n }\n}\n.mc-hero--with-boxed .mc-hero__header, .mc-hero--with-boxed .mc-hero__content {\n max-width: none;\n}\n.mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 2rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 3rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 0;\n }\n}\n@media (min-width: 1024px) and (max-width: 1279px) {\n .mc-hero--boxed-l {\n padding-bottom: 0;\n padding-top: 0;\n }\n .mc-hero--boxed-l .mc-hero__main, .mc-hero--boxed-l .mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n max-width: none;\n }\n .mc-hero--boxed-l .mc-hero__cover {\n left: -2rem;\n width: calc(100% + 4rem);\n }\n .mc-hero--boxed-l .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 4rem;\n position: relative;\n }\n .mc-hero--boxed-l .mc-hero__content {\n margin-bottom: 3rem;\n }\n .mc-hero--boxed-l .mc-hero__boxed {\n margin-top: -7rem;\n }\n}\n.mc-hero--center .mc-hero__header, .mc-hero--center .mc-hero__content {\n margin-left: auto;\n margin-right: auto;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--center .mc-hero__header {\n max-width: 50%;\n }\n}\n.mc-hero--center .mc-hero__content {\n text-align: center;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__content {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero--center .mc-hero__content {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--center .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}"}}},{"node":{"id":"ff43206b-e476-5a10-9af6-718cc97ee4ce","path":"src/docs/Components/Hero/previews/title-centered","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n \n \n \n\n
    \n \n Hero title\n \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n@import 'components/_c.hero';\n\n.example {\n @include set-font-family();\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mc-hero {\n position: relative;\n}\n.mc-hero__main {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n padding-bottom: 4.5rem;\n padding-top: 4rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 6rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__main {\n padding-bottom: 10rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero__main {\n padding-bottom: 8rem;\n padding-top: 8rem;\n }\n}\n.mc-hero__cover {\n z-index: -1;\n}\n.mc-hero__cover, .mc-hero__cover::before {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mc-hero__cover::before {\n background-color: rgba(34, 32, 32, 0.8);\n content: \"\";\n display: block;\n}\n.mc-hero__visual {\n display: block;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n.mc-hero__title {\n margin-top: 0;\n}\n.mc-hero__content {\n color: #ffffff;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n@media (min-width: 1280px) and (max-width: 1919px) {\n .mc-hero__content {\n max-width: 75%;\n }\n}\n.mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n margin-top: -6rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__boxed {\n margin-top: -5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 41.6666666667%;\n flex: 0 0 41.6666666667%;\n max-width: 41.6666666667%;\n margin-top: 0;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n}\n.mc-hero--with-content .mc-hero__main {\n padding-bottom: 3rem;\n padding-top: 2.5rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 3.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 8rem;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 58.3333333333%;\n }\n}\n.mc-hero--with-boxed * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed {\n padding-bottom: 3rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero--with-boxed {\n padding-bottom: 4rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed {\n padding-bottom: 5rem;\n }\n}\n.mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 2.5rem;\n position: relative;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 58.3333333333%;\n flex: 0 0 58.3333333333%;\n max-width: 58.3333333333%;\n padding-bottom: 0;\n padding-top: 0;\n position: static;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n}\n@media (max-width: 679px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -0.5rem;\n width: calc(100% + 1rem);\n }\n}\n@media (max-width: 1023px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -1rem;\n width: calc(100% + 2rem);\n }\n}\n.mc-hero--with-boxed .mc-hero__header, .mc-hero--with-boxed .mc-hero__content {\n max-width: none;\n}\n.mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 2rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 3rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 0;\n }\n}\n@media (min-width: 1024px) and (max-width: 1279px) {\n .mc-hero--boxed-l {\n padding-bottom: 0;\n padding-top: 0;\n }\n .mc-hero--boxed-l .mc-hero__main, .mc-hero--boxed-l .mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n max-width: none;\n }\n .mc-hero--boxed-l .mc-hero__cover {\n left: -2rem;\n width: calc(100% + 4rem);\n }\n .mc-hero--boxed-l .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 4rem;\n position: relative;\n }\n .mc-hero--boxed-l .mc-hero__content {\n margin-bottom: 3rem;\n }\n .mc-hero--boxed-l .mc-hero__boxed {\n margin-top: -7rem;\n }\n}\n.mc-hero--center .mc-hero__header, .mc-hero--center .mc-hero__content {\n margin-left: auto;\n margin-right: auto;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--center .mc-hero__header {\n max-width: 50%;\n }\n}\n.mc-hero--center .mc-hero__content {\n text-align: center;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__content {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero--center .mc-hero__content {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--center .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}"}}},{"node":{"id":"80b8bed3-482d-5717-866d-ecea0cc23b74","path":"src/docs/Components/Hero/previews/title-content","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n \n \n \n\n
    \n \n Hero title\n \n
    \n\n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat.\n

    \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n@import 'components/_c.hero';\n\n.example {\n @include set-font-family();\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mc-hero {\n position: relative;\n}\n.mc-hero__main {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n padding-bottom: 4.5rem;\n padding-top: 4rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 6rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__main {\n padding-bottom: 10rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero__main {\n padding-bottom: 8rem;\n padding-top: 8rem;\n }\n}\n.mc-hero__cover {\n z-index: -1;\n}\n.mc-hero__cover, .mc-hero__cover::before {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mc-hero__cover::before {\n background-color: rgba(34, 32, 32, 0.8);\n content: \"\";\n display: block;\n}\n.mc-hero__visual {\n display: block;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n.mc-hero__title {\n margin-top: 0;\n}\n.mc-hero__content {\n color: #ffffff;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n@media (min-width: 1280px) and (max-width: 1919px) {\n .mc-hero__content {\n max-width: 75%;\n }\n}\n.mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n margin-top: -6rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__boxed {\n margin-top: -5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 41.6666666667%;\n flex: 0 0 41.6666666667%;\n max-width: 41.6666666667%;\n margin-top: 0;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n}\n.mc-hero--with-content .mc-hero__main {\n padding-bottom: 3rem;\n padding-top: 2.5rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 3.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 8rem;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 58.3333333333%;\n }\n}\n.mc-hero--with-boxed * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed {\n padding-bottom: 3rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero--with-boxed {\n padding-bottom: 4rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed {\n padding-bottom: 5rem;\n }\n}\n.mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 2.5rem;\n position: relative;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 58.3333333333%;\n flex: 0 0 58.3333333333%;\n max-width: 58.3333333333%;\n padding-bottom: 0;\n padding-top: 0;\n position: static;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n}\n@media (max-width: 679px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -0.5rem;\n width: calc(100% + 1rem);\n }\n}\n@media (max-width: 1023px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -1rem;\n width: calc(100% + 2rem);\n }\n}\n.mc-hero--with-boxed .mc-hero__header, .mc-hero--with-boxed .mc-hero__content {\n max-width: none;\n}\n.mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 2rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 3rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 0;\n }\n}\n@media (min-width: 1024px) and (max-width: 1279px) {\n .mc-hero--boxed-l {\n padding-bottom: 0;\n padding-top: 0;\n }\n .mc-hero--boxed-l .mc-hero__main, .mc-hero--boxed-l .mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n max-width: none;\n }\n .mc-hero--boxed-l .mc-hero__cover {\n left: -2rem;\n width: calc(100% + 4rem);\n }\n .mc-hero--boxed-l .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 4rem;\n position: relative;\n }\n .mc-hero--boxed-l .mc-hero__content {\n margin-bottom: 3rem;\n }\n .mc-hero--boxed-l .mc-hero__boxed {\n margin-top: -7rem;\n }\n}\n.mc-hero--center .mc-hero__header, .mc-hero--center .mc-hero__content {\n margin-left: auto;\n margin-right: auto;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--center .mc-hero__header {\n max-width: 50%;\n }\n}\n.mc-hero--center .mc-hero__content {\n text-align: center;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__content {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero--center .mc-hero__content {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--center .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}"}}},{"node":{"id":"51c537f3-2f96-5d1b-b433-cf820f3afbfd","path":"src/docs/Components/Hero/previews/title-content-centered","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n \n \n \n\n
    \n \n Hero title\n \n
    \n\n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat.\n

    \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n@import 'components/_c.hero';\n\n.example {\n @include set-font-family();\n\n &:not(:last-child) {\n margin-bottom: $mu500;\n }\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mc-hero {\n position: relative;\n}\n.mc-hero__main {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n padding-bottom: 4.5rem;\n padding-top: 4rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 6rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__main {\n padding-bottom: 10rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero__main {\n padding-bottom: 8rem;\n padding-top: 8rem;\n }\n}\n.mc-hero__cover {\n z-index: -1;\n}\n.mc-hero__cover, .mc-hero__cover::before {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mc-hero__cover::before {\n background-color: rgba(34, 32, 32, 0.8);\n content: \"\";\n display: block;\n}\n.mc-hero__visual {\n display: block;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n.mc-hero__title {\n margin-top: 0;\n}\n.mc-hero__content {\n color: #ffffff;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n@media (min-width: 1280px) and (max-width: 1919px) {\n .mc-hero__content {\n max-width: 75%;\n }\n}\n.mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n margin-top: -6rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__boxed {\n margin-top: -5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 41.6666666667%;\n flex: 0 0 41.6666666667%;\n max-width: 41.6666666667%;\n margin-top: 0;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n}\n.mc-hero--with-content .mc-hero__main {\n padding-bottom: 3rem;\n padding-top: 2.5rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 3.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 8rem;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 58.3333333333%;\n }\n}\n.mc-hero--with-boxed * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed {\n padding-bottom: 3rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero--with-boxed {\n padding-bottom: 4rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed {\n padding-bottom: 5rem;\n }\n}\n.mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 2.5rem;\n position: relative;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 58.3333333333%;\n flex: 0 0 58.3333333333%;\n max-width: 58.3333333333%;\n padding-bottom: 0;\n padding-top: 0;\n position: static;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n}\n@media (max-width: 679px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -0.5rem;\n width: calc(100% + 1rem);\n }\n}\n@media (max-width: 1023px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -1rem;\n width: calc(100% + 2rem);\n }\n}\n.mc-hero--with-boxed .mc-hero__header, .mc-hero--with-boxed .mc-hero__content {\n max-width: none;\n}\n.mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 2rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 3rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 0;\n }\n}\n@media (min-width: 1024px) and (max-width: 1279px) {\n .mc-hero--boxed-l {\n padding-bottom: 0;\n padding-top: 0;\n }\n .mc-hero--boxed-l .mc-hero__main, .mc-hero--boxed-l .mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n max-width: none;\n }\n .mc-hero--boxed-l .mc-hero__cover {\n left: -2rem;\n width: calc(100% + 4rem);\n }\n .mc-hero--boxed-l .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 4rem;\n position: relative;\n }\n .mc-hero--boxed-l .mc-hero__content {\n margin-bottom: 3rem;\n }\n .mc-hero--boxed-l .mc-hero__boxed {\n margin-top: -7rem;\n }\n}\n.mc-hero--center .mc-hero__header, .mc-hero--center .mc-hero__content {\n margin-left: auto;\n margin-right: auto;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--center .mc-hero__header {\n max-width: 50%;\n }\n}\n.mc-hero--center .mc-hero__content {\n text-align: center;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__content {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero--center .mc-hero__content {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--center .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n}\n.example:not(:last-child) {\n margin-bottom: 5rem;\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}"}}},{"node":{"id":"46cab7d8-f8b6-57d4-84cf-0ee4aa728ec6","path":"src/docs/Components/Hero/previews/boxed-content-l","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n \n \n \n\n
    \n \n Hero title\n \n
    \n\n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat.\n

    \n
    \n
    \n
    \n
    \n

    \n Your boxed content here\n

    \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n@import 'components/_c.hero';\n\n.example {\n @include set-font-family();\n}\n\n.mc-hero__boxed {\n div {\n align-items: center;\n background: orange;\n color: white;\n display: flex;\n font-size: 22px;\n justify-content: center;\n min-height: 300px;\n }\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mc-hero {\n position: relative;\n}\n.mc-hero__main {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n padding-bottom: 4.5rem;\n padding-top: 4rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 6rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__main {\n padding-bottom: 10rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero__main {\n padding-bottom: 8rem;\n padding-top: 8rem;\n }\n}\n.mc-hero__cover {\n z-index: -1;\n}\n.mc-hero__cover, .mc-hero__cover::before {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mc-hero__cover::before {\n background-color: rgba(34, 32, 32, 0.8);\n content: \"\";\n display: block;\n}\n.mc-hero__visual {\n display: block;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n.mc-hero__title {\n margin-top: 0;\n}\n.mc-hero__content {\n color: #ffffff;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n@media (min-width: 1280px) and (max-width: 1919px) {\n .mc-hero__content {\n max-width: 75%;\n }\n}\n.mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n margin-top: -6rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__boxed {\n margin-top: -5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 41.6666666667%;\n flex: 0 0 41.6666666667%;\n max-width: 41.6666666667%;\n margin-top: 0;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n}\n.mc-hero--with-content .mc-hero__main {\n padding-bottom: 3rem;\n padding-top: 2.5rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 3.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 8rem;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 58.3333333333%;\n }\n}\n.mc-hero--with-boxed * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed {\n padding-bottom: 3rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero--with-boxed {\n padding-bottom: 4rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed {\n padding-bottom: 5rem;\n }\n}\n.mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 2.5rem;\n position: relative;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 58.3333333333%;\n flex: 0 0 58.3333333333%;\n max-width: 58.3333333333%;\n padding-bottom: 0;\n padding-top: 0;\n position: static;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n}\n@media (max-width: 679px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -0.5rem;\n width: calc(100% + 1rem);\n }\n}\n@media (max-width: 1023px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -1rem;\n width: calc(100% + 2rem);\n }\n}\n.mc-hero--with-boxed .mc-hero__header, .mc-hero--with-boxed .mc-hero__content {\n max-width: none;\n}\n.mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 2rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 3rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 0;\n }\n}\n@media (min-width: 1024px) and (max-width: 1279px) {\n .mc-hero--boxed-l {\n padding-bottom: 0;\n padding-top: 0;\n }\n .mc-hero--boxed-l .mc-hero__main, .mc-hero--boxed-l .mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n max-width: none;\n }\n .mc-hero--boxed-l .mc-hero__cover {\n left: -2rem;\n width: calc(100% + 4rem);\n }\n .mc-hero--boxed-l .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 4rem;\n position: relative;\n }\n .mc-hero--boxed-l .mc-hero__content {\n margin-bottom: 3rem;\n }\n .mc-hero--boxed-l .mc-hero__boxed {\n margin-top: -7rem;\n }\n}\n.mc-hero--center .mc-hero__header, .mc-hero--center .mc-hero__content {\n margin-left: auto;\n margin-right: auto;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--center .mc-hero__header {\n max-width: 50%;\n }\n}\n.mc-hero--center .mc-hero__content {\n text-align: center;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__content {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero--center .mc-hero__content {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--center .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n}\n\n.mc-hero__boxed div {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: orange;\n color: white;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: 22px;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: 300px;\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}"}}},{"node":{"id":"00ded7d0-d267-5824-bd20-21a11cbbc6ad","path":"src/docs/Components/Hero/previews/boxed-content","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n \n \n \n\n
    \n \n Hero title\n \n
    \n\n
    \n

    \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut\n enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat.\n

    \n
    \n
    \n
    \n
    \n

    \n Your boxed content here\n

    \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n@import 'components/_c.hero';\n\n.example {\n @include set-font-family();\n}\n\n.mc-hero__boxed {\n div {\n align-items: center;\n background: orange;\n color: white;\n display: flex;\n font-size: 22px;\n justify-content: center;\n min-height: 300px;\n }\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mc-hero {\n position: relative;\n}\n.mc-hero__main {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n padding-bottom: 4.5rem;\n padding-top: 4rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 6rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__main {\n padding-bottom: 10rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero__main {\n padding-bottom: 8rem;\n padding-top: 8rem;\n }\n}\n.mc-hero__cover {\n z-index: -1;\n}\n.mc-hero__cover, .mc-hero__cover::before {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mc-hero__cover::before {\n background-color: rgba(34, 32, 32, 0.8);\n content: \"\";\n display: block;\n}\n.mc-hero__visual {\n display: block;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n.mc-hero__title {\n margin-top: 0;\n}\n.mc-hero__content {\n color: #ffffff;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n@media (min-width: 1280px) and (max-width: 1919px) {\n .mc-hero__content {\n max-width: 75%;\n }\n}\n.mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n margin-top: -6rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__boxed {\n margin-top: -5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 41.6666666667%;\n flex: 0 0 41.6666666667%;\n max-width: 41.6666666667%;\n margin-top: 0;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n}\n.mc-hero--with-content .mc-hero__main {\n padding-bottom: 3rem;\n padding-top: 2.5rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 3.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 8rem;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 58.3333333333%;\n }\n}\n.mc-hero--with-boxed * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed {\n padding-bottom: 3rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero--with-boxed {\n padding-bottom: 4rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed {\n padding-bottom: 5rem;\n }\n}\n.mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 2.5rem;\n position: relative;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 58.3333333333%;\n flex: 0 0 58.3333333333%;\n max-width: 58.3333333333%;\n padding-bottom: 0;\n padding-top: 0;\n position: static;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n}\n@media (max-width: 679px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -0.5rem;\n width: calc(100% + 1rem);\n }\n}\n@media (max-width: 1023px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -1rem;\n width: calc(100% + 2rem);\n }\n}\n.mc-hero--with-boxed .mc-hero__header, .mc-hero--with-boxed .mc-hero__content {\n max-width: none;\n}\n.mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 2rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 3rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 0;\n }\n}\n@media (min-width: 1024px) and (max-width: 1279px) {\n .mc-hero--boxed-l {\n padding-bottom: 0;\n padding-top: 0;\n }\n .mc-hero--boxed-l .mc-hero__main, .mc-hero--boxed-l .mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n max-width: none;\n }\n .mc-hero--boxed-l .mc-hero__cover {\n left: -2rem;\n width: calc(100% + 4rem);\n }\n .mc-hero--boxed-l .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 4rem;\n position: relative;\n }\n .mc-hero--boxed-l .mc-hero__content {\n margin-bottom: 3rem;\n }\n .mc-hero--boxed-l .mc-hero__boxed {\n margin-top: -7rem;\n }\n}\n.mc-hero--center .mc-hero__header, .mc-hero--center .mc-hero__content {\n margin-left: auto;\n margin-right: auto;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--center .mc-hero__header {\n max-width: 50%;\n }\n}\n.mc-hero--center .mc-hero__content {\n text-align: center;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__content {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero--center .mc-hero__content {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--center .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n}\n\n.mc-hero__boxed div {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n background: orange;\n color: white;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n font-size: 22px;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: 300px;\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}"}}},{"node":{"id":"73b0dd20-e5e0-5512-b74d-51fa0de88389","path":"src/docs/Components/Hero/previews/fixed","codes":{"js":"","html":"
    \n
    \n
    \n
    \n
    \n \n \n \n\n
    \n \n Hero title\n \n
    \n
    \n
    \n
    \n
    \n
    \n","scss":"@import 'settings-tools/_all-settings';\n\n@include import-font-families();\n\n@import 'typography/_t.all-base-typography';\n@import 'layouts/_l.container';\n@import 'layouts/_l.flexy';\n@import 'components/_c.hero';\n\n.example {\n @include set-font-family();\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}\n","css":"/* create columns */\n/* create columns */\n/* create custom named columns with custom content */\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Light.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Light.woff\") format(\"woff\");\n font-weight: 300;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Regular.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Regular.woff\") format(\"woff\");\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBold.woff\") format(\"woff\");\n font-weight: 600;\n font-style: normal;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-LightItalic.woff\") format(\"woff\");\n font-weight: 300;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-Italic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-Italic.woff\") format(\"woff\");\n font-weight: 400;\n font-style: italic;\n font-display: swap;\n}\n@font-face {\n font-family: \"LeroyMerlin\";\n src: url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff2\") format(\"woff2\"), url(\"/fonts/LeroyMerlinSans-Web-SemiBoldItalic.woff\") format(\"woff\");\n font-weight: 600;\n font-style: italic;\n font-display: swap;\n}\n.mt-body-l {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1.125rem;\n line-height: 1.5555555556;\n}\n.mt-body-l--line-height-m {\n line-height: 1.3333333333;\n}\n.mt-body-l--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-m {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5;\n}\n.mt-body-m--line-height-m {\n line-height: 1.375;\n}\n.mt-body-m--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-body-s {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 0.875rem;\n line-height: 1.5714285714;\n}\n.mt-body-s--line-height-m {\n line-height: 1.2857142857;\n}\n.mt-body-s--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-heading {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n color: #000000;\n display: block;\n margin-bottom: 2rem;\n}\n.mt-heading--underline::after {\n content: \"\";\n display: block;\n height: 0.25rem;\n background-color: #78be20;\n}\n.mt-heading--line-primary-02-600::after {\n background-color: #035f64;\n}\n.mt-heading--line-primary-01-200::after {\n background-color: #cbe3b5;\n}\n.mt-heading--line-primary-02-200::after {\n background-color: #a5d1cb;\n}\n.mt-heading--center {\n text-align: center;\n}\n.mt-heading--center.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n}\n.mt-heading--right {\n text-align: right;\n}\n.mt-heading--right.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n}\n.mt-heading--left {\n text-align: left;\n}\n.mt-heading--left.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n}\n.mt-heading--s {\n font-size: 1.4375rem;\n line-height: 1.3913043478;\n}\n.mt-heading--s.mt-heading--underline::after {\n width: 4rem;\n margin-top: 1rem;\n}\n.mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0434782609;\n}\n.mt-heading--m {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n}\n.mt-heading--m.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n}\n.mt-heading--m.mt-heading--line-height-xs {\n line-height: 1;\n}\n.mt-heading--l {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n}\n.mt-heading--l.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n}\n.mt-heading--l.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n}\n.mt-heading--lightest {\n color: #ffffff;\n}\n.mt-heading--light {\n font-weight: 300;\n}\n.mt-heading--semi-bold, .mt-heading--underline {\n font-weight: 600;\n}\n\n@media screen and (min-width: 680px) {\n .mt-heading--center\\@from-m {\n text-align: center;\n }\n .mt-heading--center\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-m {\n text-align: right;\n }\n .mt-heading--right\\@from-m.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-m {\n text-align: left;\n }\n .mt-heading--left\\@from-m.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 1.75rem;\n line-height: 1.2857142857;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 4.5rem;\n margin-top: 1rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1;\n }\n .mt-heading--m {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--l {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-heading--center\\@from-l {\n text-align: center;\n }\n .mt-heading--center\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-l {\n text-align: right;\n }\n .mt-heading--right\\@from-l.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-l {\n text-align: left;\n }\n .mt-heading--left\\@from-l.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n .mt-heading--s {\n font-size: 2.125rem;\n line-height: 1.2941176471;\n }\n .mt-heading--s.mt-heading--underline::after {\n width: 5rem;\n margin-top: 1.25rem;\n }\n .mt-heading--s.mt-heading--line-height-xs {\n line-height: 1.0588235294;\n }\n .mt-heading--m {\n font-size: 2.5625rem;\n line-height: 1.3658536585;\n }\n .mt-heading--m.mt-heading--underline::after {\n width: 5.5rem;\n margin-top: 1.5rem;\n }\n .mt-heading--m.mt-heading--line-height-xs {\n line-height: 0.9756097561;\n }\n .mt-heading--l {\n font-size: 3.0625rem;\n line-height: 1.387755102;\n margin-bottom: 3.5rem;\n }\n .mt-heading--l.mt-heading--underline::after {\n width: 6rem;\n margin-top: 2rem;\n }\n .mt-heading--l.mt-heading--line-height-xs {\n line-height: 0.9795918367;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .mt-heading--center\\@from-xl {\n text-align: center;\n }\n .mt-heading--center\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xl {\n text-align: right;\n }\n .mt-heading--right\\@from-xl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xl {\n text-align: left;\n }\n .mt-heading--left\\@from-xl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .mt-heading--center\\@from-xxl {\n text-align: center;\n }\n .mt-heading--center\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: auto;\n }\n .mt-heading--right\\@from-xxl {\n text-align: right;\n }\n .mt-heading--right\\@from-xxl.mt-heading--underline::after {\n margin-left: auto;\n margin-right: 0;\n }\n .mt-heading--left\\@from-xxl {\n text-align: left;\n }\n .mt-heading--left\\@from-xxl.mt-heading--underline::after {\n margin-left: 0;\n margin-right: auto;\n }\n}\n.mt-hero {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 400;\n font-size: 2.125rem;\n line-height: 1.5294117647;\n}\n.mt-hero--semi-bold {\n font-family: \"LeroyMerlin\", sans-serif;\n font-weight: 600;\n}\n.mt-hero--line-height-s {\n line-height: 1.1764705882;\n}\n\n@media screen and (min-width: 680px) {\n .mt-hero {\n font-size: 2.5625rem;\n line-height: 1.4634146341;\n }\n .mt-hero--line-height-s {\n line-height: 1.1707317073;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .mt-hero {\n font-size: 3.0625rem;\n line-height: 1.4693877551;\n }\n .mt-hero--line-height-s {\n line-height: 1.1428571429;\n }\n}\n\n@media screen and (min-width: 1440px) {\n .mt-hero {\n font-size: 3.6875rem;\n line-height: 1.4915254237;\n }\n .mt-hero--line-height-s {\n line-height: 1.1525423729;\n }\n}\n.ml-container {\n margin-left: auto;\n margin-right: auto;\n padding-right: 1rem;\n padding-left: 1rem;\n}\n@media screen and (min-width: 680px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container {\n padding-right: 3rem;\n padding-left: 3rem;\n max-width: 58rem;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container {\n padding-right: 2rem;\n padding-left: 2rem;\n max-width: 76rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container {\n padding-right: 2.5rem;\n padding-left: 2.5rem;\n max-width: 115rem;\n }\n}\n.ml-container--fluid {\n max-width: none;\n}\n@media screen and (min-width: 680px) {\n .ml-container--fluid\\@from-m {\n max-width: none;\n }\n}\n@media screen and (min-width: 1024px) {\n .ml-container--fluid\\@from-l {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .ml-container--fluid\\@from-xl {\n max-width: none;\n }\n}\n@media screen and (min-width: 1920px) {\n .ml-container--fluid\\@from-xxl {\n max-width: none;\n }\n}\n.ml-flexy {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-orient: horizontal;\n -webkit-box-direction: normal;\n -ms-flex-flow: row wrap;\n flex-flow: row wrap;\n -webkit-box-align: start;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n.ml-flexy--gutter {\n margin-right: -0.5rem;\n margin-left: -0.5rem;\n}\n.ml-flexy--space-around {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n}\n.ml-flexy--justify-center {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n}\n.ml-flexy--justify-between {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.ml-flexy--items-stretch {\n -webkit-box-align: stretch;\n -ms-flex-align: stretch;\n align-items: stretch;\n}\n.ml-flexy--items-end {\n -webkit-box-align: end;\n -ms-flex-align: end;\n align-items: flex-end;\n}\n.ml-flexy--items-center {\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n}\n.ml-flexy__col {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n.ml-flexy--gutter > .ml-flexy__col {\n padding-right: 0.5rem;\n padding-left: 0.5rem;\n}\n\n.ml-flexy__col--fill {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n}\n\n.ml-flexy__col--full {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n\n.ml-flexy__col--1of2 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n}\n\n.ml-flexy__col--push-1of2 {\n margin-left: 50%;\n}\n\n.ml-flexy__col--1of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n}\n\n.ml-flexy__col--push-1of3 {\n margin-left: 33.3333333333%;\n}\n\n.ml-flexy__col--2of3 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n}\n\n.ml-flexy__col--push-2of3 {\n margin-left: 66.6666666667%;\n}\n\n.ml-flexy__col--1of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n}\n\n.ml-flexy__col--push-1of4 {\n margin-left: 25%;\n}\n\n.ml-flexy__col--3of4 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n}\n\n.ml-flexy__col--push-3of4 {\n margin-left: 75%;\n}\n\n.ml-flexy__col--1of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n}\n\n.ml-flexy__col--push-1of6 {\n margin-left: 16.6666666667%;\n}\n\n.ml-flexy__col--5of6 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n}\n\n.ml-flexy__col--push-5of6 {\n margin-left: 83.3333333333%;\n}\n\n.ml-flexy__col--1of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n}\n\n.ml-flexy__col--push-1of12 {\n margin-left: 8.3333333333%;\n}\n\n.ml-flexy__col--11of12 {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n}\n\n.ml-flexy__col--push-11of12 {\n margin-left: 91.6666666667%;\n}\n\n.ml-flexy__col--initial {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n}\n\n.ml-flexy__col--grow {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n}\n\n/* ORDERING */\n.ml-flexy__col--first {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n}\n\n.ml-flexy__col--last {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n}\n\n@media screen and (min-width: 680px) {\n .ml-flexy--gutter {\n margin-right: -1rem;\n margin-left: -1rem;\n }\n .ml-flexy--space-around\\@from-m {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-m {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-m {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy--gutter > .ml-flexy__col {\n padding-right: 1rem;\n padding-left: 1rem;\n }\n .ml-flexy__col--fill\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-m {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-m {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-m {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-m {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-m {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-m {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-m {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-m {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-m {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-m {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-m {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-m {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-m {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-m {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1024px) {\n .ml-flexy--space-around\\@from-l {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-l {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-l {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-l {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-l {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-l {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-l {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-l {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-l {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-l {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-l {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-l {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-l {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-l {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-l {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-l {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-l {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1280px) {\n .ml-flexy--space-around\\@from-xl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n\n@media screen and (min-width: 1920px) {\n .ml-flexy--space-around\\@from-xxl {\n -ms-flex-pack: distribute;\n justify-content: space-around;\n }\n .ml-flexy--justify-center\\@from-xxl {\n -webkit-box-pack: center;\n justify-content: center;\n -ms-flex-pack: center;\n }\n .ml-flexy--justify-between\\@from-xxl {\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .ml-flexy__col--fill\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 1 0px;\n flex: 1 1 0;\n }\n .ml-flexy__col--full\\@from-xxl {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n }\n .ml-flexy__col--1of2\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 50%;\n flex: 0 0 50%;\n max-width: 50%;\n }\n .ml-flexy__col--push-1of2\\@from-xxl {\n margin-left: 50%;\n }\n .ml-flexy__col--1of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n .ml-flexy__col--push-1of3\\@from-xxl {\n margin-left: 33.3333333333%;\n }\n .ml-flexy__col--2of3\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n .ml-flexy__col--push-2of3\\@from-xxl {\n margin-left: 66.6666666667%;\n }\n .ml-flexy__col--1of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 25%;\n flex: 0 0 25%;\n max-width: 25%;\n }\n .ml-flexy__col--push-1of4\\@from-xxl {\n margin-left: 25%;\n }\n .ml-flexy__col--3of4\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 75%;\n flex: 0 0 75%;\n max-width: 75%;\n }\n .ml-flexy__col--push-3of4\\@from-xxl {\n margin-left: 75%;\n }\n .ml-flexy__col--1of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 16.6666666667%;\n flex: 0 0 16.6666666667%;\n max-width: 16.6666666667%;\n }\n .ml-flexy__col--push-1of6\\@from-xxl {\n margin-left: 16.6666666667%;\n }\n .ml-flexy__col--5of6\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 83.3333333333%;\n flex: 0 0 83.3333333333%;\n max-width: 83.3333333333%;\n }\n .ml-flexy__col--push-5of6\\@from-xxl {\n margin-left: 83.3333333333%;\n }\n .ml-flexy__col--1of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 8.3333333333%;\n flex: 0 0 8.3333333333%;\n max-width: 8.3333333333%;\n }\n .ml-flexy__col--push-1of12\\@from-xxl {\n margin-left: 8.3333333333%;\n }\n .ml-flexy__col--11of12\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 91.6666666667%;\n flex: 0 0 91.6666666667%;\n max-width: 91.6666666667%;\n }\n .ml-flexy__col--push-11of12\\@from-xxl {\n margin-left: 91.6666666667%;\n }\n .ml-flexy__col--initial\\@from-xxl {\n -webkit-box-flex: 0;\n -ms-flex: 0 1 auto;\n flex: 0 1 auto;\n }\n .ml-flexy__col--grow\\@from-xxl {\n -webkit-box-flex: 1;\n -ms-flex: 1 0 auto;\n flex: 1 0 auto;\n max-width: none;\n }\n .ml-flexy__col--first\\@from-xxl {\n -webkit-box-ordinal-group: 0;\n -ms-flex-order: -1;\n order: -1;\n }\n .ml-flexy__col--last\\@from-xxl {\n -webkit-box-ordinal-group: 1000;\n -ms-flex-order: 999;\n order: 999;\n }\n}\n.mc-hero {\n position: relative;\n}\n.mc-hero__main {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n padding-bottom: 4.5rem;\n padding-top: 4rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 6rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__main {\n padding-bottom: 10rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero__main {\n padding-bottom: 8rem;\n padding-top: 8rem;\n }\n}\n.mc-hero__cover {\n z-index: -1;\n}\n.mc-hero__cover, .mc-hero__cover::before {\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: 100%;\n}\n.mc-hero__cover::before {\n background-color: rgba(34, 32, 32, 0.8);\n content: \"\";\n display: block;\n}\n.mc-hero__visual {\n display: block;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n width: 100%;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero__header {\n max-width: 75%;\n }\n}\n.mc-hero__title {\n margin-top: 0;\n}\n.mc-hero__content {\n color: #ffffff;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n@media (min-width: 1280px) and (max-width: 1919px) {\n .mc-hero__content {\n max-width: 75%;\n }\n}\n.mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n margin-top: -6rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero__boxed {\n margin-top: -5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 41.6666666667%;\n flex: 0 0 41.6666666667%;\n max-width: 41.6666666667%;\n margin-top: 0;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero__boxed {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 33.3333333333%;\n flex: 0 0 33.3333333333%;\n max-width: 33.3333333333%;\n }\n}\n.mc-hero--with-content .mc-hero__main {\n padding-bottom: 3rem;\n padding-top: 2.5rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 3.5rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 5rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__main {\n padding-bottom: 8rem;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-content .mc-hero__header {\n max-width: 58.3333333333%;\n }\n}\n.mc-hero--with-boxed * {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed {\n padding-bottom: 3rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1440px) {\n .mc-hero--with-boxed {\n padding-bottom: 4rem;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed {\n padding-bottom: 5rem;\n }\n}\n.mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 6rem;\n padding-top: 2.5rem;\n position: relative;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__main {\n padding-bottom: 5rem;\n padding-top: 4rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 58.3333333333%;\n flex: 0 0 58.3333333333%;\n max-width: 58.3333333333%;\n padding-bottom: 0;\n padding-top: 0;\n position: static;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--with-boxed .mc-hero__main {\n -webkit-box-flex: 0;\n -ms-flex: 0 0 66.6666666667%;\n flex: 0 0 66.6666666667%;\n max-width: 66.6666666667%;\n }\n}\n@media (max-width: 679px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -0.5rem;\n width: calc(100% + 1rem);\n }\n}\n@media (max-width: 1023px) {\n .mc-hero--with-boxed .mc-hero__cover {\n left: -1rem;\n width: calc(100% + 2rem);\n }\n}\n.mc-hero--with-boxed .mc-hero__header, .mc-hero--with-boxed .mc-hero__content {\n max-width: none;\n}\n.mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 2rem;\n}\n@media screen and (min-width: 680px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 3rem;\n }\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--with-boxed .mc-hero__content {\n margin-bottom: 0;\n }\n}\n@media (min-width: 1024px) and (max-width: 1279px) {\n .mc-hero--boxed-l {\n padding-bottom: 0;\n padding-top: 0;\n }\n .mc-hero--boxed-l .mc-hero__main, .mc-hero--boxed-l .mc-hero__boxed {\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n max-width: none;\n }\n .mc-hero--boxed-l .mc-hero__cover {\n left: -2rem;\n width: calc(100% + 4rem);\n }\n .mc-hero--boxed-l .mc-hero__main {\n padding-bottom: 7rem;\n padding-top: 4rem;\n position: relative;\n }\n .mc-hero--boxed-l .mc-hero__content {\n margin-bottom: 3rem;\n }\n .mc-hero--boxed-l .mc-hero__boxed {\n margin-top: -7rem;\n }\n}\n.mc-hero--center .mc-hero__header, .mc-hero--center .mc-hero__content {\n margin-left: auto;\n margin-right: auto;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__header {\n max-width: 66.6666666667%;\n }\n}\n@media screen and (min-width: 1920px) {\n .mc-hero--center .mc-hero__header {\n max-width: 50%;\n }\n}\n.mc-hero--center .mc-hero__content {\n text-align: center;\n}\n@media screen and (min-width: 1024px) {\n .mc-hero--center .mc-hero__content {\n max-width: none;\n }\n}\n@media screen and (min-width: 1280px) {\n .mc-hero--center .mc-hero__content {\n max-width: 66.6666666667%;\n }\n}\n@media (min-width: 1440px) and (max-width: 1919px) {\n .mc-hero--center .mc-hero__content {\n max-width: 83.3333333333%;\n }\n}\n\n.example {\n font-family: \"LeroyMerlin\", sans-serif;\n}\n\np {\n margin-bottom: 0;\n margin-top: 0;\n}"}}}]}}}