gent_styleguide 6.0.17 → 7.0.0

package/build/css/styleguide.css

@@ -1 +1 @@
-.row{-webkit-box-flex:0;-webkit-box-direction:normal;display:-webkit-box;display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:wrap;gap:45px;margin:0 auto;width:100%}.row,.row.reverse{-webkit-box-orient:horizontal}.row.reverse{-webkit-box-direction:reverse;flex-direction:row-reverse}.row.natural-height{-webkit-box-align:start;align-items:flex-start}.row.flex-column{-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column}.col{-webkit-box-flex:1;flex-grow:1;margin-left:0;width:100%}.col.reverse{-webkit-box-orient:vertical;-webkit-box-direction:reverse;flex-direction:column-reverse}.first{-webkit-box-ordinal-group:0;order:-1}.last{-webkit-box-ordinal-group:2;order:1}.align-start{align-self:flex-start}.align-end{align-self:flex-end}.align-center{align-self:center}.align-baseline{align-self:baseline}.align-stretch{align-self:stretch}.col-xs{-webkit-box-flex:1;flex-basis:0;flex-grow:1;max-width:100%}.col-xs-1{flex-basis:calc(8.33333% - 41.25px);width:calc(8.33333% - 41.25px)}.col-xs-offset-1{margin-left:8.3333333333%}.col-xs-2{flex-basis:calc(16.66667% - 37.5px);width:calc(16.66667% - 37.5px)}.col-xs-offset-2{margin-left:16.6666666667%}.col-xs-3{flex-basis:calc(25% - 33.75px);width:calc(25% - 33.75px)}.col-xs-offset-3{margin-left:25%}.col-xs-4{flex-basis:calc(33.33333% - 30px);width:calc(33.33333% - 30px)}.col-xs-offset-4{margin-left:33.3333333333%}.col-xs-5{flex-basis:calc(41.66667% - 26.25px);width:calc(41.66667% - 26.25px)}.col-xs-offset-5{margin-left:41.6666666667%}.col-xs-6{flex-basis:calc(50% - 22.5px);width:calc(50% - 22.5px)}.col-xs-offset-6{margin-left:50%}.col-xs-7{flex-basis:calc(58.33333% - 18.75px);width:calc(58.33333% - 18.75px)}.col-xs-offset-7{margin-left:58.3333333333%}.col-xs-8{flex-basis:calc(66.66667% - 15px);width:calc(66.66667% - 15px)}.col-xs-offset-8{margin-left:66.6666666667%}.col-xs-9{flex-basis:calc(75% - 11.25px);width:calc(75% - 11.25px)}.col-xs-offset-9{margin-left:75%}.col-xs-10{flex-basis:calc(83.33333% - 7.5px);width:calc(83.33333% - 7.5px)}.col-xs-offset-10{margin-left:83.3333333333%}.col-xs-11{flex-basis:calc(91.66667% - 3.75px);width:calc(91.66667% - 3.75px)}.col-xs-offset-11{margin-left:91.6666666667%}.col-xs-12{flex-basis:100%;width:100%}.col-xs-offset-12{margin-left:100%}.row.start-xs{-webkit-box-pack:start;justify-content:flex-start}.row.center-xs{-webkit-box-pack:center;justify-content:center}.row.end-xs{-webkit-box-pack:end;justify-content:flex-end}.row.top-xs{-webkit-box-align:start;align-items:flex-start}.row.middle-xs{-webkit-box-align:center;align-items:center}.row.bottom-xs{-webkit-box-align:end;align-items:flex-end}.row.around-xs{justify-content:space-around}.row.between-xs{-webkit-box-pack:justify;justify-content:space-between}.first-xs{-webkit-box-ordinal-group:0;order:-1}.last-xs{-webkit-box-ordinal-group:2;order:1}@media only screen and (min-width:577px){.col-sm{-webkit-box-flex:1;flex-basis:0;flex-grow:1;max-width:100%}.col-sm-1{flex-basis:calc(8.33333% - 41.25px);width:calc(8.33333% - 41.25px)}.col-sm-offset-1{margin-left:8.3333333333%}.col-sm-2{flex-basis:calc(16.66667% - 37.5px);width:calc(16.66667% - 37.5px)}.col-sm-offset-2{margin-left:16.6666666667%}.col-sm-3{flex-basis:calc(25% - 33.75px);width:calc(25% - 33.75px)}.col-sm-offset-3{margin-left:25%}.col-sm-4{flex-basis:calc(33.33333% - 30px);width:calc(33.33333% - 30px)}.col-sm-offset-4{margin-left:33.3333333333%}.col-sm-5{flex-basis:calc(41.66667% - 26.25px);width:calc(41.66667% - 26.25px)}.col-sm-offset-5{margin-left:41.6666666667%}.col-sm-6{flex-basis:calc(50% - 22.5px);width:calc(50% - 22.5px)}.col-sm-offset-6{margin-left:50%}.col-sm-7{flex-basis:calc(58.33333% - 18.75px);width:calc(58.33333% - 18.75px)}.col-sm-offset-7{margin-left:58.3333333333%}.col-sm-8{flex-basis:calc(66.66667% - 15px);width:calc(66.66667% - 15px)}.col-sm-offset-8{margin-left:66.6666666667%}.col-sm-9{flex-basis:calc(75% - 11.25px);width:calc(75% - 11.25px)}.col-sm-offset-9{margin-left:75%}.col-sm-10{flex-basis:calc(83.33333% - 7.5px);width:calc(83.33333% - 7.5px)}.col-sm-offset-10{margin-left:83.3333333333%}.col-sm-11{flex-basis:calc(91.66667% - 3.75px);width:calc(91.66667% - 3.75px)}.col-sm-offset-11{margin-left:91.6666666667%}.col-sm-12{flex-basis:100%;width:100%}.col-sm-offset-12{margin-left:100%}.row.start-sm{-webkit-box-pack:start;justify-content:flex-start}.row.center-sm{-webkit-box-pack:center;justify-content:center}.row.end-sm{-webkit-box-pack:end;justify-content:flex-end}.row.top-sm{-webkit-box-align:start;align-items:flex-start}.row.middle-sm{-webkit-box-align:center;align-items:center}.row.bottom-sm{-webkit-box-align:end;align-items:flex-end}.row.around-sm{justify-content:space-around}.row.between-sm{-webkit-box-pack:justify;justify-content:space-between}.first-sm{-webkit-box-ordinal-group:0;order:-1}.last-sm{-webkit-box-ordinal-group:2;order:1}}@media only screen and (min-width:769px){.col-md{-webkit-box-flex:1;flex-basis:0;flex-grow:1;max-width:100%}.col-md-1{flex-basis:calc(8.33333% - 41.25px);width:calc(8.33333% - 41.25px)}.col-md-offset-1{margin-left:8.3333333333%}.col-md-2{flex-basis:calc(16.66667% - 37.5px);width:calc(16.66667% - 37.5px)}.col-md-offset-2{margin-left:16.6666666667%}.col-md-3{flex-basis:calc(25% - 33.75px);width:calc(25% - 33.75px)}.col-md-offset-3{margin-left:25%}.col-md-4{flex-basis:calc(33.33333% - 30px);width:calc(33.33333% - 30px)}.col-md-offset-4{margin-left:33.3333333333%}.col-md-5{flex-basis:calc(41.66667% - 26.25px);width:calc(41.66667% - 26.25px)}.col-md-offset-5{margin-left:41.6666666667%}.col-md-6{flex-basis:calc(50% - 22.5px);width:calc(50% - 22.5px)}.col-md-offset-6{margin-left:50%}.col-md-7{flex-basis:calc(58.33333% - 18.75px);width:calc(58.33333% - 18.75px)}.col-md-offset-7{margin-left:58.3333333333%}.col-md-8{flex-basis:calc(66.66667% - 15px);width:calc(66.66667% - 15px)}.col-md-offset-8{margin-left:66.6666666667%}.col-md-9{flex-basis:calc(75% - 11.25px);width:calc(75% - 11.25px)}.col-md-offset-9{margin-left:75%}.col-md-10{flex-basis:calc(83.33333% - 7.5px);width:calc(83.33333% - 7.5px)}.col-md-offset-10{margin-left:83.3333333333%}.col-md-11{flex-basis:calc(91.66667% - 3.75px);width:calc(91.66667% - 3.75px)}.col-md-offset-11{margin-left:91.6666666667%}.col-md-12{flex-basis:100%;width:100%}.col-md-offset-12{margin-left:100%}.row.start-md{-webkit-box-pack:start;justify-content:flex-start}.row.center-md{-webkit-box-pack:center;justify-content:center}.row.end-md{-webkit-box-pack:end;justify-content:flex-end}.row.top-md{-webkit-box-align:start;align-items:flex-start}.row.middle-md{-webkit-box-align:center;align-items:center}.row.bottom-md{-webkit-box-align:end;align-items:flex-end}.row.around-md{justify-content:space-around}.row.between-md{-webkit-box-pack:justify;justify-content:space-between}.first-md{-webkit-box-ordinal-group:0;order:-1}.last-md{-webkit-box-ordinal-group:2;order:1}}@media only screen and (min-width:961px){.col-lg{-webkit-box-flex:1;flex-basis:0;flex-grow:1;max-width:100%}.col-lg-1{flex-basis:calc(8.33333% - 41.25px);width:calc(8.33333% - 41.25px)}.col-lg-offset-1{margin-left:8.3333333333%}.col-lg-2{flex-basis:calc(16.66667% - 37.5px);width:calc(16.66667% - 37.5px)}.col-lg-offset-2{margin-left:16.6666666667%}.col-lg-3{flex-basis:calc(25% - 33.75px);width:calc(25% - 33.75px)}.col-lg-offset-3{margin-left:25%}.col-lg-4{flex-basis:calc(33.33333% - 30px);width:calc(33.33333% - 30px)}.col-lg-offset-4{margin-left:33.3333333333%}.col-lg-5{flex-basis:calc(41.66667% - 26.25px);width:calc(41.66667% - 26.25px)}.col-lg-offset-5{margin-left:41.6666666667%}.col-lg-6{flex-basis:calc(50% - 22.5px);width:calc(50% - 22.5px)}.col-lg-offset-6{margin-left:50%}.col-lg-7{flex-basis:calc(58.33333% - 18.75px);width:calc(58.33333% - 18.75px)}.col-lg-offset-7{margin-left:58.3333333333%}.col-lg-8{flex-basis:calc(66.66667% - 15px);width:calc(66.66667% - 15px)}.col-lg-offset-8{margin-left:66.6666666667%}.col-lg-9{flex-basis:calc(75% - 11.25px);width:calc(75% - 11.25px)}.col-lg-offset-9{margin-left:75%}.col-lg-10{flex-basis:calc(83.33333% - 7.5px);width:calc(83.33333% - 7.5px)}.col-lg-offset-10{margin-left:83.3333333333%}.col-lg-11{flex-basis:calc(91.66667% - 3.75px);width:calc(91.66667% - 3.75px)}.col-lg-offset-11{margin-left:91.6666666667%}.col-lg-12{flex-basis:100%;width:100%}.col-lg-offset-12{margin-left:100%}.row.start-lg{-webkit-box-pack:start;justify-content:flex-start}.row.center-lg{-webkit-box-pack:center;justify-content:center}.row.end-lg{-webkit-box-pack:end;justify-content:flex-end}.row.top-lg{-webkit-box-align:start;align-items:flex-start}.row.middle-lg{-webkit-box-align:center;align-items:center}.row.bottom-lg{-webkit-box-align:end;align-items:flex-end}.row.around-lg{justify-content:space-around}.row.between-lg{-webkit-box-pack:justify;justify-content:space-between}.first-lg{-webkit-box-ordinal-group:0;order:-1}.last-lg{-webkit-box-ordinal-group:2;order:1}}@media only screen and (min-width:1681px){.col-xl{-webkit-box-flex:1;flex-basis:0;flex-grow:1;max-width:100%}.col-xl-1{flex-basis:calc(8.33333% - 41.25px);width:calc(8.33333% - 41.25px)}.col-xl-offset-1{margin-left:8.3333333333%}.col-xl-2{flex-basis:calc(16.66667% - 37.5px);width:calc(16.66667% - 37.5px)}.col-xl-offset-2{margin-left:16.6666666667%}.col-xl-3{flex-basis:calc(25% - 33.75px);width:calc(25% - 33.75px)}.col-xl-offset-3{margin-left:25%}.col-xl-4{flex-basis:calc(33.33333% - 30px);width:calc(33.33333% - 30px)}.col-xl-offset-4{margin-left:33.3333333333%}.col-xl-5{flex-basis:calc(41.66667% - 26.25px);width:calc(41.66667% - 26.25px)}.col-xl-offset-5{margin-left:41.6666666667%}.col-xl-6{flex-basis:calc(50% - 22.5px);width:calc(50% - 22.5px)}.col-xl-offset-6{margin-left:50%}.col-xl-7{flex-basis:calc(58.33333% - 18.75px);width:calc(58.33333% - 18.75px)}.col-xl-offset-7{margin-left:58.3333333333%}.col-xl-8{flex-basis:calc(66.66667% - 15px);width:calc(66.66667% - 15px)}.col-xl-offset-8{margin-left:66.6666666667%}.col-xl-9{flex-basis:calc(75% - 11.25px);width:calc(75% - 11.25px)}.col-xl-offset-9{margin-left:75%}.col-xl-10{flex-basis:calc(83.33333% - 7.5px);width:calc(83.33333% - 7.5px)}.col-xl-offset-10{margin-left:83.3333333333%}.col-xl-11{flex-basis:calc(91.66667% - 3.75px);width:calc(91.66667% - 3.75px)}.col-xl-offset-11{margin-left:91.6666666667%}.col-xl-12{flex-basis:100%;width:100%}.col-xl-offset-12{margin-left:100%}.row.start-xl{-webkit-box-pack:start;justify-content:flex-start}.row.center-xl{-webkit-box-pack:center;justify-content:center}.row.end-xl{-webkit-box-pack:end;justify-content:flex-end}.row.top-xl{-webkit-box-align:start;align-items:flex-start}.row.middle-xl{-webkit-box-align:center;align-items:center}.row.bottom-xl{-webkit-box-align:end;align-items:flex-end}.row.around-xl{justify-content:space-around}.row.between-xl{-webkit-box-pack:justify;justify-content:space-between}.first-xl{-webkit-box-ordinal-group:0;order:-1}.last-xl{-webkit-box-ordinal-group:2;order:1}}.col-gutter-lr{padding:0 30px}.row-no-gutter{gap:0}.col-no-gutter{padding:0}.full-width{left:50%;margin-left:-50vw;margin-right:-50vw;position:relative;right:50%;width:100vw}.container{overflow:hidden;padding:0 1rem}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}@media(min-width:1680px){.container{margin:0 auto;max-width:100%;width:1680px}}.content-container{margin:0 auto;max-width:1170px}.color-wrapper{border-radius:.2rem;margin-bottom:2rem;padding:1rem}.color-wrapper.white{background-color:#001823;color:#fff}.color-wrapper p{margin:0}.color-wrapper code{display:block;font-size:.6rem;white-space:nowrap}.color-wrapper .color{border:1px solid rgba(0,0,0,.2);border-radius:50%;height:6rem;margin-bottom:1rem;margin-right:1rem;overflow:hidden;position:relative;width:6rem}.color-wrapper .color-variants>div{-webkit-box-flex:1;display:-webkit-box;display:flex;flex:auto;flex-wrap:wrap}.color-wrapper .color-variants .color-box{padding:.5rem}.color-wrapper .color-variants .color{height:3rem;margin:.5rem;width:3rem}.color-swatch-gray-1{background-color:#001620}.color-swatch-gray-2{background-color:#00121a}.color-swatch-gray-3{background-color:#000c12}.color-swatch-gray--1{background-color:#40525a}.color-swatch-gray--2{background-color:#66747b}.color-swatch-gray--3{background-color:#808c91}.color-swatch-gray--4{background-color:#bfc5c8}.color-swatch-gray--5{background-color:#e6e8e9}.color-swatch-gray--6{background-color:#f0f1f2}.color-swatch-gray--7{background-color:#fafafb}.color-swatch-gray-medium-1{background-color:#5e676c}.color-swatch-gray-medium-2{background-color:#4e565a}.color-swatch-gray-medium-3{background-color:#34393c}.color-swatch-gray-medium--1{background-color:#8e959a}.color-swatch-gray-medium--2{background-color:#a4aaae}.color-swatch-gray-medium--3{background-color:#b4b9bc}.color-swatch-gray-medium--4{background-color:#d9dcdd}.color-swatch-gray-medium--5{background-color:#f0f1f2}.color-swatch-gray-medium--6{background-color:#f6f7f7}.color-swatch-gray-medium--7{background-color:#fcfcfc}.color-swatch-gray-light-1{background-color:#cfd1d3}.color-swatch-gray-light-2{background-color:#adaeb0}.color-swatch-gray-light-3{background-color:#737475}.color-swatch-gray-light--1{background-color:#eceeef}.color-swatch-gray-light--2{background-color:#f0f1f2}.color-swatch-gray-light--3{background-color:#f3f4f5}.color-swatch-gray-light--4{background-color:#f9f9fa}.color-swatch-gray-light--5{background-color:#fdfdfd}.color-swatch-gray-light--6{background-color:#fefefe}.color-swatch-gray-light--7{background-color:#fff}.color-swatch-gray-ultra-light-1{background-color:#d8d9da}.color-swatch-gray-ultra-light-2{background-color:#b4b5b6}.color-swatch-gray-ultra-light-3{background-color:#787979}.color-swatch-gray-ultra-light--1{background-color:#f4f5f5}.color-swatch-gray-ultra-light--2{background-color:#f6f7f7}.color-swatch-gray-ultra-light--3{background-color:#f8f8f9}.color-swatch-gray-ultra-light--4{background-color:#fbfcfc}.color-swatch-gray-ultra-light--5,.color-swatch-gray-ultra-light--6{background-color:#fefefe}.color-swatch-gray-ultra-light--7{background-color:#fff}.color-swatch-blue-1{background-color:#005298}.color-swatch-blue-2{background-color:#00447f}.color-swatch-blue-3{background-color:#002e55}.color-swatch-blue--1{background-color:#4084bf}.color-swatch-blue--2{background-color:#669dcb}.color-swatch-blue--3{background-color:#80add4}.color-swatch-blue--4{background-color:#bfd6ea}.color-swatch-blue--5{background-color:#e6eff6}.color-swatch-blue--6{background-color:#f0f5fa}.color-swatch-blue--7{background-color:#fafcfd}.color-swatch-blue-light-1{background-color:#b8c8d6}.color-swatch-blue-light-2{background-color:#99a7b3}.color-swatch-blue-light-3{background-color:#666f77}.color-swatch-blue-light--1{background-color:#d9e6f2}.color-swatch-blue-light--2{background-color:#e0ebf5}.color-swatch-blue-light--3{background-color:#e6eff7}.color-swatch-blue-light--4{background-color:#f2f7fb}.color-swatch-blue-light--5{background-color:#fafcfd}.color-swatch-blue-light--6{background-color:#fcfdfe}.color-swatch-blue-light--7{background-color:#fefeff}.color-swatch-yellow-1{background-color:#e6c551}.color-swatch-yellow-2{background-color:#bfa444}.color-swatch-yellow-3{background-color:#806e2d}.color-swatch-yellow--1{background-color:#ffe483}.color-swatch-yellow--2{background-color:#ffe99c}.color-swatch-yellow--3{background-color:#ffedad}.color-swatch-yellow--4{background-color:#fff6d6}.color-swatch-yellow--5{background-color:#fffbef}.color-swatch-yellow--6{background-color:#fffdf5}.color-swatch-yellow--7{background-color:#fffefc}.color-swatch-yellow-pastel-1{background-color:#e6d484}.color-swatch-yellow-pastel-2{background-color:#bfb16e}.color-swatch-yellow-pastel-3{background-color:#80764a}.color-swatch-yellow-pastel--1{background-color:#fff1ae}.color-swatch-yellow-pastel--2{background-color:#fff4be}.color-swatch-yellow-pastel--3{background-color:#fff6c9}.color-swatch-yellow-pastel--4{background-color:#fffae4}.color-swatch-yellow-pastel--5{background-color:#fffdf4}.color-swatch-yellow-pastel--6{background-color:#fffef9}.color-swatch-yellow-pastel--7{background-color:#fffffd}.color-swatch-yellow-light-1{background-color:#e6dfbf}.color-swatch-yellow-light-2{background-color:#bfba9f}.color-swatch-yellow-light-3{background-color:#807c6a}.color-swatch-yellow-light--1{background-color:#fffadf}.color-swatch-yellow-light--2{background-color:#fffbe5}.color-swatch-yellow-light--3{background-color:#fffcea}.color-swatch-yellow-light--4{background-color:#fffdf4}.color-swatch-yellow-light--5{background-color:#fffefb}.color-swatch-yellow-light--6{background-color:#fffffc}.color-swatch-yellow-light--7{background-color:#fffffe}.color-swatch-cyan-1{background-color:#008dca}.color-swatch-cyan-2{background-color:#0076a8}.color-swatch-cyan-3{background-color:#004f70}.color-swatch-cyan--1{background-color:#40b6e8}.color-swatch-cyan--2{background-color:#66c4ec}.color-swatch-cyan--3{background-color:#80cef0}.color-swatch-cyan--4{background-color:#bfe7f7}.color-swatch-cyan--5{background-color:#e6f5fc}.color-swatch-cyan--6{background-color:#f0f9fd}.color-swatch-cyan--7{background-color:#fafdfe}.color-swatch-cyan-pastel-1{background-color:#71c3e6}.color-swatch-cyan-pastel-2{background-color:#5fa3bf}.color-swatch-cyan-pastel-3{background-color:#3f6d80}.color-swatch-cyan-pastel--1{background-color:#9ee3ff}.color-swatch-cyan-pastel--2{background-color:#b2e8ff}.color-swatch-cyan-pastel--3{background-color:#bfecff}.color-swatch-cyan-pastel--4{background-color:#dff6ff}.color-swatch-cyan-pastel--5{background-color:#f2fbff}.color-swatch-cyan-pastel--6{background-color:#f7fdff}.color-swatch-cyan-pastel--7{background-color:#fcfeff}.color-swatch-cyan-light-1{background-color:#cfdfe6}.color-swatch-cyan-light-2{background-color:#adbabf}.color-swatch-cyan-light-3{background-color:#737c80}.color-swatch-cyan-light--1{background-color:#ecfaff}.color-swatch-cyan-light--2{background-color:#f0fbff}.color-swatch-cyan-light--3{background-color:#f3fcff}.color-swatch-cyan-light--4{background-color:#f9fdff}.color-swatch-cyan-light--5{background-color:#fdfeff}.color-swatch-cyan-light--6{background-color:#feffff}.color-swatch-cyan-light--7{background-color:#fff}.color-swatch-cyan-hover-1{background-color:#17a9e6}.color-swatch-cyan-hover-2{background-color:#148dbf}.color-swatch-cyan-hover-3{background-color:#0d5e80}.color-swatch-cyan-hover--1{background-color:#53cdff}.color-swatch-cyan-hover--2{background-color:#76d7ff}.color-swatch-cyan-hover--3{background-color:#8ddeff}.color-swatch-cyan-hover--4{background-color:#c6eeff}.color-swatch-cyan-hover--5{background-color:#e8f8ff}.color-swatch-cyan-hover--6{background-color:#f1fbff}.color-swatch-cyan-hover--7{background-color:#fafeff}.color-swatch-red-1{background-color:#d30c2e}.color-swatch-red-2{background-color:#b00a26}.color-swatch-red-3{background-color:#75071a}.color-swatch-red--1{background-color:#ef4a66}.color-swatch-red--2{background-color:#f26e85}.color-swatch-red--3{background-color:#f58699}.color-swatch-red--4{background-color:#fac3cc}.color-swatch-red--5{background-color:#fde7eb}.color-swatch-red--6{background-color:#fef0f3}.color-swatch-red--7{background-color:#fffafb}.color-swatch-red-pastel-1{background-color:#e67c8d}.color-swatch-red-pastel-2{background-color:#bf6876}.color-swatch-red-pastel-3{background-color:#80454f}.color-swatch-red-pastel--1{background-color:#ffa7b6}.color-swatch-red-pastel--2{background-color:#ffb9c4}.color-swatch-red-pastel--3{background-color:#ffc5ce}.color-swatch-red-pastel--4{background-color:#ffe2e7}.color-swatch-red-pastel--5{background-color:#fff3f5}.color-swatch-red-pastel--6{background-color:#fff8f9}.color-swatch-red-pastel--7{background-color:#fffdfd}.color-swatch-red-light-1{background-color:#e6d1d4}.color-swatch-red-light-2{background-color:#bfaeb1}.color-swatch-red-light-3{background-color:#807476}.color-swatch-red-light--1{background-color:#ffeef1}.color-swatch-red-light--2{background-color:#fff1f4}.color-swatch-red-light--3{background-color:#fff4f6}.color-swatch-red-light--4{background-color:#fff9fa}.color-swatch-red-light--5{background-color:#fffdfd}.color-swatch-red-light--6{background-color:#fffefe}.color-swatch-red-light--7{background-color:#fff}.color-swatch-orange-1{background-color:#ca6100}.color-swatch-orange-2{background-color:#a85100}.color-swatch-orange-3{background-color:#703600}.color-swatch-orange--1{background-color:#e89140}.color-swatch-orange--2{background-color:#eca766}.color-swatch-orange--3{background-color:#f0b680}.color-swatch-orange--4{background-color:#f7dabf}.color-swatch-orange--5{background-color:#fcf0e6}.color-swatch-orange--6{background-color:#fdf6f0}.color-swatch-orange--7{background-color:#fefcfa}.color-swatch-orange-pastel-1{background-color:#e6a468}.color-swatch-orange-pastel-2{background-color:#bf8956}.color-swatch-orange-pastel-3{background-color:#805b3a}.color-swatch-orange-pastel--1{background-color:#ffc896}.color-swatch-orange-pastel--2{background-color:#ffd3ab}.color-swatch-orange-pastel--3{background-color:#ffdbb9}.color-swatch-orange-pastel--4{background-color:#ffeddc}.color-swatch-orange-pastel--5{background-color:#fff8f1}.color-swatch-orange-pastel--6{background-color:#fffbf7}.color-swatch-orange-pastel--7{background-color:#fffefc}.color-swatch-orange-light-1{background-color:#e6dace}.color-swatch-orange-light-2{background-color:#bfb6ac}.color-swatch-orange-light-3{background-color:#807973}.color-swatch-orange-light--1{background-color:#fff5ec}.color-swatch-orange-light--2{background-color:#fff7ef}.color-swatch-orange-light--3{background-color:#fff9f2}.color-swatch-orange-light--4{background-color:#fffcf9}.color-swatch-orange-light--5{background-color:#fffefc}.color-swatch-orange-light--6{background-color:#fffefd}.color-swatch-orange-light--7{background-color:#fffffe}.color-swatch-green-1{background-color:#287a22}.color-swatch-green-2{background-color:#21651d}.color-swatch-green-3{background-color:#164413}.color-swatch-green--1{background-color:#61a55c}.color-swatch-green--2{background-color:#80b77d}.color-swatch-green--3{background-color:#96c393}.color-swatch-green--4{background-color:#cae1c9}.color-swatch-green--5{background-color:#eaf3e9}.color-swatch-green--6{background-color:#f2f8f2}.color-swatch-green--7{background-color:#fbfdfb}.color-swatch-green-pastel-1{background-color:#80ca7a}.color-swatch-green-pastel-2{background-color:#6ba866}.color-swatch-green-pastel-3{background-color:#477044}.color-swatch-green-pastel--1{background-color:#aae8a6}.color-swatch-green-pastel--2{background-color:#bbecb8}.color-swatch-green-pastel--3{background-color:#c7f0c4}.color-swatch-green-pastel--4{background-color:#e3f7e1}.color-swatch-green-pastel--5{background-color:#f4fcf3}.color-swatch-green-pastel--6{background-color:#f8fdf8}.color-swatch-green-pastel--7{background-color:#fdfefd}.color-swatch-green-light-1{background-color:#cbe4cb}.color-swatch-green-light-2{background-color:#a9bea9}.color-swatch-green-light-3{background-color:#717f71}.color-swatch-green-light--1{background-color:#e9fee9}.color-swatch-green-light--2{background-color:#edfeed}.color-swatch-green-light--3{background-color:#f0fef0}.color-swatch-green-light--4{background-color:#f8fff8}.color-swatch-green-light--5{background-color:#fcfffc}.color-swatch-green-light--6{background-color:#fdfffd}.color-swatch-green-light--7{background-color:#fefffe}.color-swatch-white-1{background-color:#e6e6e6}.color-swatch-white-2{background-color:#bfbfbf}.color-swatch-white-3{background-color:gray}.color-swatch-white--1,.color-swatch-white--2,.color-swatch-white--3,.color-swatch-white--4,.color-swatch-white--5,.color-swatch-white--6,.color-swatch-white--7{background-color:#fff}.styleguide-table-of-contents{margin-bottom:4rem;padding:2rem}.cs--blue .styleguide-table-of-contents{background-color:#e6eff6}@media(min-width:768px){.styleguide-table-of-contents .table-of-contents-main{-webkit-box-pack:justify;display:-webkit-box;display:flex;justify-content:space-between}}h1.styleguide-title,h2.styleguide-title,h3.styleguide-title,h4.styleguide-title,h5.styleguide-title{border-bottom:1px dotted;margin-bottom:1rem}h2.styleguide-title{border-bottom:1px solid}.cs--blue h2.styleguide-title{border-color:#669dcb;color:#005298}h3.styleguide-title{border-bottom:1px dotted}.cs--blue h3.styleguide-title{border-color:#4084bf;color:#002e55}.preview-container{background-color:#fff;min-height:100vh;overflow:hidden;padding:4% 0}.preview-container .gallery{max-width:388px}.preview-container .content-container>h1,.preview-container .content-container>h2,.preview-container .content-container>h3,.preview-container .content-container>h4,.preview-container .content-container>h5{margin-top:0}.preview-inner-container{display:inline-block;margin-bottom:4.375rem;padding-bottom:1rem;width:100%}.cs--accent .preview-inner-container,.cs--inverse .preview-inner-container,.cs--wrapper .preview-inner-container{border-bottom:1px dotted #fff}.cs--highlighted .preview-inner-container{border-bottom:1px dotted #001823}.preview-inner-inner-container{margin-bottom:2.5rem;overflow:hidden;padding-bottom:2.5rem}dl.styleguide dd,dl.styleguide dt{max-width:100%}dl.styleguide dd{margin-bottom:3rem;margin-top:1rem}.preview-without-padding dl dd{padding:0}.preview-without-padding .content-container{margin:0}
+abbr,address,article,aside,audio,b,blockquote,body,body div,caption,cite,code,dd,del,dfn,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline}article,aside,figure,footer,header,hgroup,main,nav,section{display:block}.full-width{left:50%;margin-left:-50vw;margin-right:-50vw;position:relative;right:50%;width:100vw}.container{overflow:hidden;padding:0 1rem}.container:after,.container:before{content:" ";display:table}.container:after{clear:both}@media screen and (min-width:1680px){.container{margin:0 auto;max-width:100%;width:1680px}}.content-container{margin:0 auto;max-width:1170px}.color-wrapper{border-radius:.2rem;margin-bottom:2rem;padding:1rem}.color-wrapper.white{background-color:#001823;color:#fff}.color-wrapper p{margin:0}.color-wrapper code{display:block;font-size:.6rem;white-space:nowrap}.color-wrapper .color{border:1px solid rgba(0,0,0,.2);border-radius:50%;height:6rem;margin-bottom:1rem;margin-right:1rem;overflow:hidden;position:relative;width:6rem}.color-wrapper .color-variants>div{-webkit-box-flex:1;display:-webkit-box;display:flex;flex:auto;flex-wrap:wrap}.color-wrapper .color-variants .color-box{padding:.5rem}.color-wrapper .color-variants .color{height:3rem;margin:.5rem;width:3rem}.color-swatch-gray-1{background-color:#001620}.color-swatch-gray-2{background-color:#00121a}.color-swatch-gray-3{background-color:#000c12}.color-swatch-gray--1{background-color:#40525a}.color-swatch-gray--2{background-color:#66747b}.color-swatch-gray--3{background-color:#808c91}.color-swatch-gray--4{background-color:#bfc5c8}.color-swatch-gray--5{background-color:#e6e8e9}.color-swatch-gray--6{background-color:#f0f1f2}.color-swatch-gray--7{background-color:#fafafb}.color-swatch-gray-medium-1{background-color:#5e676c}.color-swatch-gray-medium-2{background-color:#4e565a}.color-swatch-gray-medium-3{background-color:#34393c}.color-swatch-gray-medium--1{background-color:#8e959a}.color-swatch-gray-medium--2{background-color:#a4aaae}.color-swatch-gray-medium--3{background-color:#b4b9bc}.color-swatch-gray-medium--4{background-color:#d9dcdd}.color-swatch-gray-medium--5{background-color:#f0f1f2}.color-swatch-gray-medium--6{background-color:#f6f7f7}.color-swatch-gray-medium--7{background-color:#fcfcfc}.color-swatch-gray-light-1{background-color:#cfd1d3}.color-swatch-gray-light-2{background-color:#adaeb0}.color-swatch-gray-light-3{background-color:#737475}.color-swatch-gray-light--1{background-color:#eceeef}.color-swatch-gray-light--2{background-color:#f0f1f2}.color-swatch-gray-light--3{background-color:#f3f4f5}.color-swatch-gray-light--4{background-color:#f9f9fa}.color-swatch-gray-light--5{background-color:#fdfdfd}.color-swatch-gray-light--6{background-color:#fefefe}.color-swatch-gray-light--7{background-color:#fff}.color-swatch-gray-ultra-light-1{background-color:#d8d9da}.color-swatch-gray-ultra-light-2{background-color:#b4b5b6}.color-swatch-gray-ultra-light-3{background-color:#787979}.color-swatch-gray-ultra-light--1{background-color:#f4f5f5}.color-swatch-gray-ultra-light--2{background-color:#f6f7f7}.color-swatch-gray-ultra-light--3{background-color:#f8f8f9}.color-swatch-gray-ultra-light--4{background-color:#fbfcfc}.color-swatch-gray-ultra-light--5,.color-swatch-gray-ultra-light--6{background-color:#fefefe}.color-swatch-gray-ultra-light--7{background-color:#fff}.color-swatch-blue-1{background-color:#005298}.color-swatch-blue-2{background-color:#00447f}.color-swatch-blue-3{background-color:#002e55}.color-swatch-blue--1{background-color:#4084bf}.color-swatch-blue--2{background-color:#669dcb}.color-swatch-blue--3{background-color:#80add4}.color-swatch-blue--4{background-color:#bfd6ea}.color-swatch-blue--5{background-color:#e6eff6}.color-swatch-blue--6{background-color:#f0f5fa}.color-swatch-blue--7{background-color:#fafcfd}.color-swatch-blue-light-1{background-color:#b8c8d6}.color-swatch-blue-light-2{background-color:#99a7b3}.color-swatch-blue-light-3{background-color:#666f77}.color-swatch-blue-light--1{background-color:#d9e6f2}.color-swatch-blue-light--2{background-color:#e0ebf5}.color-swatch-blue-light--3{background-color:#e6eff7}.color-swatch-blue-light--4{background-color:#f2f7fb}.color-swatch-blue-light--5{background-color:#fafcfd}.color-swatch-blue-light--6{background-color:#fcfdfe}.color-swatch-blue-light--7{background-color:#fefeff}.color-swatch-yellow-1{background-color:#e6c551}.color-swatch-yellow-2{background-color:#bfa444}.color-swatch-yellow-3{background-color:#806e2d}.color-swatch-yellow--1{background-color:#ffe483}.color-swatch-yellow--2{background-color:#ffe99c}.color-swatch-yellow--3{background-color:#ffedad}.color-swatch-yellow--4{background-color:#fff6d6}.color-swatch-yellow--5{background-color:#fffbef}.color-swatch-yellow--6{background-color:#fffdf5}.color-swatch-yellow--7{background-color:#fffefc}.color-swatch-yellow-pastel-1{background-color:#e6d484}.color-swatch-yellow-pastel-2{background-color:#bfb16e}.color-swatch-yellow-pastel-3{background-color:#80764a}.color-swatch-yellow-pastel--1{background-color:#fff1ae}.color-swatch-yellow-pastel--2{background-color:#fff4be}.color-swatch-yellow-pastel--3{background-color:#fff6c9}.color-swatch-yellow-pastel--4{background-color:#fffae4}.color-swatch-yellow-pastel--5{background-color:#fffdf4}.color-swatch-yellow-pastel--6{background-color:#fffef9}.color-swatch-yellow-pastel--7{background-color:#fffffd}.color-swatch-yellow-light-1{background-color:#e6dfbf}.color-swatch-yellow-light-2{background-color:#bfba9f}.color-swatch-yellow-light-3{background-color:#807c6a}.color-swatch-yellow-light--1{background-color:#fffadf}.color-swatch-yellow-light--2{background-color:#fffbe5}.color-swatch-yellow-light--3{background-color:#fffcea}.color-swatch-yellow-light--4{background-color:#fffdf4}.color-swatch-yellow-light--5{background-color:#fffefb}.color-swatch-yellow-light--6{background-color:#fffffc}.color-swatch-yellow-light--7{background-color:#fffffe}.color-swatch-cyan-1{background-color:#008dca}.color-swatch-cyan-2{background-color:#0076a8}.color-swatch-cyan-3{background-color:#004f70}.color-swatch-cyan--1{background-color:#40b6e8}.color-swatch-cyan--2{background-color:#66c4ec}.color-swatch-cyan--3{background-color:#80cef0}.color-swatch-cyan--4{background-color:#bfe7f7}.color-swatch-cyan--5{background-color:#e6f5fc}.color-swatch-cyan--6{background-color:#f0f9fd}.color-swatch-cyan--7{background-color:#fafdfe}.color-swatch-cyan-pastel-1{background-color:#71c3e6}.color-swatch-cyan-pastel-2{background-color:#5fa3bf}.color-swatch-cyan-pastel-3{background-color:#3f6d80}.color-swatch-cyan-pastel--1{background-color:#9ee3ff}.color-swatch-cyan-pastel--2{background-color:#b2e8ff}.color-swatch-cyan-pastel--3{background-color:#bfecff}.color-swatch-cyan-pastel--4{background-color:#dff6ff}.color-swatch-cyan-pastel--5{background-color:#f2fbff}.color-swatch-cyan-pastel--6{background-color:#f7fdff}.color-swatch-cyan-pastel--7{background-color:#fcfeff}.color-swatch-cyan-light-1{background-color:#cfdfe6}.color-swatch-cyan-light-2{background-color:#adbabf}.color-swatch-cyan-light-3{background-color:#737c80}.color-swatch-cyan-light--1{background-color:#ecfaff}.color-swatch-cyan-light--2{background-color:#f0fbff}.color-swatch-cyan-light--3{background-color:#f3fcff}.color-swatch-cyan-light--4{background-color:#f9fdff}.color-swatch-cyan-light--5{background-color:#fdfeff}.color-swatch-cyan-light--6{background-color:#feffff}.color-swatch-cyan-light--7{background-color:#fff}.color-swatch-cyan-hover-1{background-color:#17a9e6}.color-swatch-cyan-hover-2{background-color:#148dbf}.color-swatch-cyan-hover-3{background-color:#0d5e80}.color-swatch-cyan-hover--1{background-color:#53cdff}.color-swatch-cyan-hover--2{background-color:#76d7ff}.color-swatch-cyan-hover--3{background-color:#8ddeff}.color-swatch-cyan-hover--4{background-color:#c6eeff}.color-swatch-cyan-hover--5{background-color:#e8f8ff}.color-swatch-cyan-hover--6{background-color:#f1fbff}.color-swatch-cyan-hover--7{background-color:#fafeff}.color-swatch-red-1{background-color:#d30c2e}.color-swatch-red-2{background-color:#b00a26}.color-swatch-red-3{background-color:#75071a}.color-swatch-red--1{background-color:#ef4a66}.color-swatch-red--2{background-color:#f26e85}.color-swatch-red--3{background-color:#f58699}.color-swatch-red--4{background-color:#fac3cc}.color-swatch-red--5{background-color:#fde7eb}.color-swatch-red--6{background-color:#fef0f3}.color-swatch-red--7{background-color:#fffafb}.color-swatch-red-pastel-1{background-color:#e67c8d}.color-swatch-red-pastel-2{background-color:#bf6876}.color-swatch-red-pastel-3{background-color:#80454f}.color-swatch-red-pastel--1{background-color:#ffa7b6}.color-swatch-red-pastel--2{background-color:#ffb9c4}.color-swatch-red-pastel--3{background-color:#ffc5ce}.color-swatch-red-pastel--4{background-color:#ffe2e7}.color-swatch-red-pastel--5{background-color:#fff3f5}.color-swatch-red-pastel--6{background-color:#fff8f9}.color-swatch-red-pastel--7{background-color:#fffdfd}.color-swatch-red-light-1{background-color:#e6d1d4}.color-swatch-red-light-2{background-color:#bfaeb1}.color-swatch-red-light-3{background-color:#807476}.color-swatch-red-light--1{background-color:#ffeef1}.color-swatch-red-light--2{background-color:#fff1f4}.color-swatch-red-light--3{background-color:#fff4f6}.color-swatch-red-light--4{background-color:#fff9fa}.color-swatch-red-light--5{background-color:#fffdfd}.color-swatch-red-light--6{background-color:#fffefe}.color-swatch-red-light--7{background-color:#fff}.color-swatch-orange-1{background-color:#ca6100}.color-swatch-orange-2{background-color:#a85100}.color-swatch-orange-3{background-color:#703600}.color-swatch-orange--1{background-color:#e89140}.color-swatch-orange--2{background-color:#eca766}.color-swatch-orange--3{background-color:#f0b680}.color-swatch-orange--4{background-color:#f7dabf}.color-swatch-orange--5{background-color:#fcf0e6}.color-swatch-orange--6{background-color:#fdf6f0}.color-swatch-orange--7{background-color:#fefcfa}.color-swatch-orange-pastel-1{background-color:#e6a468}.color-swatch-orange-pastel-2{background-color:#bf8956}.color-swatch-orange-pastel-3{background-color:#805b3a}.color-swatch-orange-pastel--1{background-color:#ffc896}.color-swatch-orange-pastel--2{background-color:#ffd3ab}.color-swatch-orange-pastel--3{background-color:#ffdbb9}.color-swatch-orange-pastel--4{background-color:#ffeddc}.color-swatch-orange-pastel--5{background-color:#fff8f1}.color-swatch-orange-pastel--6{background-color:#fffbf7}.color-swatch-orange-pastel--7{background-color:#fffefc}.color-swatch-orange-light-1{background-color:#e6dace}.color-swatch-orange-light-2{background-color:#bfb6ac}.color-swatch-orange-light-3{background-color:#807973}.color-swatch-orange-light--1{background-color:#fff5ec}.color-swatch-orange-light--2{background-color:#fff7ef}.color-swatch-orange-light--3{background-color:#fff9f2}.color-swatch-orange-light--4{background-color:#fffcf9}.color-swatch-orange-light--5{background-color:#fffefc}.color-swatch-orange-light--6{background-color:#fffefd}.color-swatch-orange-light--7{background-color:#fffffe}.color-swatch-green-1{background-color:#287a22}.color-swatch-green-2{background-color:#21651d}.color-swatch-green-3{background-color:#164413}.color-swatch-green--1{background-color:#61a55c}.color-swatch-green--2{background-color:#80b77d}.color-swatch-green--3{background-color:#96c393}.color-swatch-green--4{background-color:#cae1c9}.color-swatch-green--5{background-color:#eaf3e9}.color-swatch-green--6{background-color:#f2f8f2}.color-swatch-green--7{background-color:#fbfdfb}.color-swatch-green-pastel-1{background-color:#80ca7a}.color-swatch-green-pastel-2{background-color:#6ba866}.color-swatch-green-pastel-3{background-color:#477044}.color-swatch-green-pastel--1{background-color:#aae8a6}.color-swatch-green-pastel--2{background-color:#bbecb8}.color-swatch-green-pastel--3{background-color:#c7f0c4}.color-swatch-green-pastel--4{background-color:#e3f7e1}.color-swatch-green-pastel--5{background-color:#f4fcf3}.color-swatch-green-pastel--6{background-color:#f8fdf8}.color-swatch-green-pastel--7{background-color:#fdfefd}.color-swatch-green-light-1{background-color:#cbe4cb}.color-swatch-green-light-2{background-color:#a9bea9}.color-swatch-green-light-3{background-color:#717f71}.color-swatch-green-light--1{background-color:#e9fee9}.color-swatch-green-light--2{background-color:#edfeed}.color-swatch-green-light--3{background-color:#f0fef0}.color-swatch-green-light--4{background-color:#f8fff8}.color-swatch-green-light--5{background-color:#fcfffc}.color-swatch-green-light--6{background-color:#fdfffd}.color-swatch-green-light--7{background-color:#fefffe}.color-swatch-white-1{background-color:#e6e6e6}.color-swatch-white-2{background-color:#bfbfbf}.color-swatch-white-3{background-color:grey}.color-swatch-white--1,.color-swatch-white--2,.color-swatch-white--3,.color-swatch-white--4,.color-swatch-white--5,.color-swatch-white--6,.color-swatch-white--7{background-color:#fff}.styleguide-table-of-contents{margin-bottom:4rem;padding:2rem}.cs--blue .styleguide-table-of-contents{background-color:#ccdeee}@media screen and (min-width:768px){.styleguide-table-of-contents .table-of-contents-main{-webkit-box-pack:justify;display:-webkit-box;display:flex;justify-content:space-between}}h1.styleguide-title,h2.styleguide-title,h3.styleguide-title,h4.styleguide-title,h5.styleguide-title{border-bottom:1px dotted;margin-bottom:1rem}h2.styleguide-title{border-bottom:1px solid}.cs--blue h2.styleguide-title{border-color:#ccdeee;color:#005ba9}h3.styleguide-title{border-bottom:1px dotted}.cs--blue h3.styleguide-title{border-color:#ccdeee;color:#005ba9}.preview-container{background-color:#fff;min-height:100vh;overflow:hidden;padding:4% 0}.preview-container .gallery{max-width:388px}.preview-container .content-container>h1,.preview-container .content-container>h2,.preview-container .content-container>h3,.preview-container .content-container>h4,.preview-container .content-container>h5{margin-top:0}.preview-inner-container{display:inline-block;margin-bottom:4.375rem;padding-bottom:1rem;width:100%}.cs--accent .preview-inner-container,.cs--inverse .preview-inner-container,.cs--wrapper .preview-inner-container{border-bottom:1px dotted #fff}.cs--highlighted .preview-inner-container{border-bottom:1px dotted #001823}.preview-inner-inner-container{margin-bottom:2.5rem;overflow:hidden;padding-bottom:2.5rem}dl.styleguide dd,dl.styleguide dt{max-width:100%}dl.styleguide dd{margin-bottom:3rem;margin-top:1rem}.preview-without-padding dl dd{padding:0}.preview-without-padding .content-container{margin:0}

package/build/styleguide/fonts/{gent-icons-v6.svg → gent-icons-v7.svg}

@@ -2,8 +2,8 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <defs>
-  <font id="gent-icons-v6" horiz-adv-x="1042.7083333333335">
-    <font-face font-family="gent-icons-v6"
+  <font id="gent-icons-v7" horiz-adv-x="1042.7083333333335">
+    <font-face font-family="gent-icons-v7"
       units-per-em="1001" ascent="1001"
       descent="0" />
     <missing-glyph horiz-adv-x="0" />

package/build/styleguide/sass/00-mixins/_mixins.scss

@@ -0,0 +1,15 @@
+@forward 'breakpoints/breakpoints';
+@forward 'general/mixins';
+@forward 'element-styles/abstract-shadow';
+@forward 'element-styles/accolade';
+@forward 'element-styles/read-more-icon-link';
+@forward 'grid/responsive-utilities';
+@forward 'link/link';
+@forward 'opening-hours/opening-hours';
+@forward 'svg/spot-images';
+@forward 'svg/svg-icons';
+@forward 'table/table-backgrounds';
+@forward 'themify/themify';
+@forward 'z-index/map-deep-get';
+@forward 'z-index/z';
+@forward 'grid/grid';

package/build/styleguide/sass/00-mixins/breakpoints/_breakpoints.scss

@@ -1,12 +1,29 @@
+@use 'sass:list';
+@use '../../00-settings/vars' as *;
+
 ////
 ///
 /// This file defines breakpoint related mixins / functions.
 ///
 /// @group breakpoints
-/// @author Gert-Jan Meire
+/// @author Sven Vandevenne
 ///
-////
-@import "breakpoint";
+
+@mixin breakpoint($args...) {
+  @if list.length($args) == 1 {
+    @media screen and (min-width: list.nth($args, 1)) {
+      @content;
+    }
+  }
+  @else if list.length($args) == 2 and list.nth($args, 1) == max-width {
+    @media screen and (max-width: list.nth($args, 2)) {
+      @content;
+    }
+  }
+  @else {
+    @error 'Invalid arguments for mixin breakpoints: use e.g. (768px) or (max-width 1024px)';
+  }
+}
 
 ///
 /// Mobile breakpoint (see $bp-mobile defined in _vars.scss).

package/build/styleguide/sass/00-mixins/element-styles/_abstract-shadow.scss

@@ -1,3 +1,5 @@
+@use '../breakpoints/breakpoints' as *;
+@use '../../00-settings/settings' as *;
 
 ///
 /// Add an abstract shadow to an element (different-colored element below).
@@ -57,13 +59,16 @@
         #{$h-position}: -1.5rem;
       }
     }
-    position: absolute;
-    width: $width;
-    max-width: 100%;
-    height: $height;
-    max-height: 100%;
-    background-color: $background-color;
-    content: "";
-    z-index: -1;
+
+    & {
+      position: absolute;
+      width: $width;
+      max-width: 100%;
+      height: $height;
+      max-height: 100%;
+      background-color: $background-color;
+      content: "";
+      z-index: -1;
+    }
   }
 }

package/build/styleguide/sass/00-mixins/element-styles/_accolade.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/settings' as *;
+@use '../../00-mixins/themify/themify' as *;
+@use '../../00-mixins/svg/svg-icons' as *;
 
 ///
 /// Convert an element to a box with outside accolade.

package/build/styleguide/sass/00-mixins/element-styles/_read-more-icon-link.scss

@@ -1,3 +1,6 @@
+@use '../link/link' as *;
+@use '../themify/themify' as *;
+@use '../general/mixins' as *;
 
 ///
 /// Convert a link to a square read more button, given it has an "after" icon.
@@ -8,18 +11,20 @@
 /// @author Lennart Van Vaerenbergh
 ///
 @mixin read-more-icon-link() {
-  @include reset-link-background;
   @include large-text();
+  @include reset-link-background;
   @include theme('color', 'color-zero', 'button-secondary-color');
   @include theme('background-color', 'color-tertiary', 'button-secondary-background');
 
-  display: flex;
-  align-items: center;
-  width: 2.2rem;
-  height: 2.2rem;
-  margin: 0;
-  text-align: center;
-  text-indent: -9999999px;
+  & {
+    display: flex;
+    align-items: center;
+    width: 2.2rem;
+    height: 2.2rem;
+    margin: 0;
+    text-align: center;
+    text-indent: -9999999px;
+  }
 
   &.standalone-link:not([href^="mailto:"]):not([href^="tel:"]):not([download]):not([href^="http://"]):not([href^="https://"]):not(.back) {
     margin: 0;

package/build/styleguide/sass/00-mixins/general/_mixins.scss

@@ -1,3 +1,11 @@
+@use '../themify/themify' as *;
+@use '../../00-settings/settings' as *;
+
+@use "sass:list";
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+
 ////
 /// Globally defined general purpose mixins.
 /// These mixins can be used by multiple components.
@@ -17,10 +25,9 @@
 /// @param {string} $search - The haystack
 /// @param {string} $replace [''] - The separator
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-  @return if($index,
-    str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace),
-    $string);
+  $index: string.index($string, $search);
+
+  @return if($index, string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace), $string);
 }
 
 ///  Helper function to get a border radius.
@@ -32,7 +39,7 @@
 /// @param {string} $name - The name of the requested border radius.
 /// @param {map} $border-radius [$border-radius] - The map with border radiuses defined in it.
 @function border-radius($name, $border-radius: $border-radius) {
-  @return map-get($border-radius, $name);
+  @return map.get($border-radius, $name);
 }
 
 ///
@@ -78,7 +85,9 @@
 /// @param {string} $property - The property to be styled.
 ///
 @mixin element-states($state, $state-hover, $property: "color") {
-  #{$property}: $state;
+  & {
+    #{$property}: $state;
+  }
 
   &:active,
   &:visited {
@@ -119,28 +128,31 @@
 @function str-split($string, $separator: '--') {
   // empty array/list
   $split-arr: ();
+
   // first index of separator in string
-  $index: str-index($string, $separator);
+  $index: string.index($string, $separator);
+
   // loop through string
   @while $index != null {
     // get the substring from the first character to the separator
-    $item: str-slice($string, 1, $index - 1);
+    $item: string.slice($string, 1, $index - 1);
+
     // push item to array
-    $split-arr: append($split-arr, $item);
+    $split-arr: list.append($split-arr, $item);
 
     @if ($separator == '--') {
       // remove item and separator from string
-      $string: str-slice($string, $index + 2);
+      $string: string.slice($string, $index + 2);
     }
     @else {
       // remove item and separator from string
-      $string: str-slice($string, $index + 1);
+      $string: string.slice($string, $index + 1);
     }
     // find new index of separator
-    $index: str-index($string, $separator);
+    $index: string.index($string, $separator);
   }
   // add the remaining string to list (the last item)
-  $split-arr: append($split-arr, $string);
+  $split-arr: list.append($split-arr, $string);
 
   @return $split-arr;
 }
@@ -156,33 +168,34 @@
 /// @param {string} $value - The string to turn into a number.
 ///
 @function number($value) {
-  @if type-of($value) == 'number' {
+  @if meta.type-of($value) == 'number' {
     @return $value;
-  } @else if type-of($value) != 'string' {
+  }
+  @else if meta.type-of($value) != 'string' {
     @warn 'Value for `to-number` should be a number or a string.';
   }
 
   $result: 0;
   $digits: 0;
-  $minus: str-slice($value, 1, 1) == '-';
+  $minus: string.slice($value, 1, 1) == '-';
   $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
 
-  @for $i from if($minus, 2, 1) through str-length($value) {
-    $character: str-slice($value, $i, $i);
+  @for $i from if($minus, 2, 1) through string.length($value) {
+    $character: string.slice($value, $i, $i);
 
-    @if not (index(map-keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i));
+    @if not (list.index(map.keys($numbers), $character) or $character == '.') {
+      @return to-length(if($minus, -$result, $result), string.slice($value, $i));
     }
 
     @if $character == '.' {
       $digits: 1;
     }
     @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);
+      $result: $result * 10 + map.get($numbers, $character);
     }
     @else {
       $digits: $digits * 10;
-      $result: $result + math.div(map-get($numbers, $character), $digits);
+      $result: $result + math.div(map.get($numbers, $character), $digits);
     }
   }
 
@@ -315,8 +328,10 @@
 @mixin focus-bare {
   @include theme('outline-color', 'color-primary', 'focus-outline');
 
-  outline: 2px solid;
-  outline-offset: 2px;
+  & {
+    outline: 2px solid;
+    outline-offset: 2px;
+  }
 }
 
 @mixin focus-style {
@@ -327,27 +342,31 @@
 
 /// Label mixin for optional labels
 @mixin optional-label {
+  @include normal-text;
   @include theme('color', 'color-zero', 'label-optional-color');
   @include theme('background-color', 'color-secondary', 'label-optional-background');
-  @include normal-text;
 
-  padding: 2px 5px;
-  float: right;
-  font-size: .6rem;
-  line-height: 150%;
+  & {
+    padding: 2px 5px;
+    float: right;
+    font-size: .6rem;
+    line-height: 150%;
+  }
 }
 
 /// Label mixin for form labels
 @mixin label {
-  @include theme('color', 'color-primary', 'label-color');
   @include semi-bold-text;
+  @include theme('color', 'color-primary', 'label-color');
 
-  display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  margin: 0 0 5px;
-  font-size: .8rem;
-  line-height: 1.4rem;
+  & {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    margin: 0 0 5px;
+    font-size: .8rem;
+    line-height: 1.4rem;
+  }
 }
 
 // Remove button styling

package/build/styleguide/sass/00-mixins/grid/_grid.scss

@@ -1,3 +1,7 @@
+@use '../../00-settings/vars' as *;
+@use '../general/mixins' as *;
+@use '../breakpoints/breakpoints' as *;
+
 ///
 /// Helper mixin to break out of the grid structure in targeted places.
 ///

package/build/styleguide/sass/00-mixins/link/_link.scss

@@ -1,3 +1,6 @@
+@use '../../00-settings/vars' as *;
+@use '../../00-mixins/themify/themify' as *;
+
 ///
 ///  Applies a hover animation using the background.
 ///  Typically applied to elements containing text.
@@ -23,10 +26,13 @@
 ///
 @mixin link-background($underline: 'color-primary', $hover: null, $underline-exception: null, $hover-exception: null) {
   @include theme('border-color', $underline, $underline-exception);
-  transition: background-image 1s, color 1s;
-  border-bottom: 2px solid;
-  background-repeat: repeat-y;
-  background-position: 0 100%;
+
+  & {
+    transition: background-image 1s, color 1s;
+    border-bottom: 2px solid;
+    background-repeat: repeat-y;
+    background-position: 0 100%;
+  }
 
   @if $hover {
     @include theme-content($hover, $hover-exception) {
@@ -34,8 +40,11 @@
         $theme-color 0,
         $theme-color 100%);
     }
-    transition: background-size .2s, color .2s;
-    background-size: 0 100%;
+
+    & {
+      transition: background-size .2s, color .2s;
+      background-size: 0 100%;
+    }
 
     &:hover,
     &:focus {
@@ -76,20 +85,26 @@
 ///
 @mixin link-underlined($active-selector: '.active') {
   @include theme('color', 'color-primary', 'link-color');
-  display: inline-block;
-  font-weight: 400;
-  text-decoration: none;
+
+  & {
+    display: inline-block;
+    font-weight: 400;
+    text-decoration: none;
+  }
 
   &::after {
     @include theme('color', 'color-primary', 'link-underlined-hover-color');
-    display: block;
-    position: static;
-    width: 0;
-    margin: 0 auto;
-    transition: width 100ms;
-    border-bottom: 2px solid;
-    content: '';
-    overflow: visible;
+
+    & {
+      display: block;
+      position: static;
+      width: 0;
+      margin: 0 auto;
+      transition: width 100ms;
+      border-bottom: 2px solid;
+      content: '';
+      overflow: visible;
+    }
   }
 
   &#{$active-selector},

package/build/styleguide/sass/00-mixins/opening-hours/_opening-hours.scss

@@ -1,3 +1,9 @@
+@use '../themify/themify' as *;
+
+$month-day-size-mobile: 40px;
+$month-day-size: 48px;
+$week-breakpoint: '(min-width: 750px)';
+
 // mixins
 // ===
 @mixin month-widget-mobile {

package/build/styleguide/sass/00-mixins/svg/_spot-images.scss

@@ -1,3 +1,5 @@
+@use '../../00-settings/settings' as *;
+
 ///
 /// Theme mixin to generate all themes spot images.
 /// This generates the necessary theme CSS for all defined themes based on the

package/build/styleguide/sass/00-mixins/svg/_svg-icons.scss

@@ -1,3 +1,7 @@
+@use "sass:string";
+@use '../../00-settings/settings' as *;
+@use "../general/mixins";
+
 ////
 /// This file defines SVG related functions and mixins.
 ///
@@ -19,8 +23,8 @@
   //
   //  Add missing namespace
   //
-  @if not str-index($svg, xmlns) {
-    $svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
+  @if not string.index($svg, xmlns) {
+    $svg: mixins.str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
   }
   //
   //  Chunk up string in order to avoid
@@ -29,20 +33,20 @@
   $encoded: '';
   $slice: 2000;
   $index: 0;
-  $loops: ceil(math.div(str-length($svg), $slice));
+  $loops: math.ceil(math.div(string.length($svg), $slice));
   @for $i from 1 through $loops {
-    $chunk: str-slice($svg, $index, $index + $slice - 1);
+    $chunk: string.slice($svg, $index, $index + $slice - 1);
     //
     //   Encode
     //
-    $chunk: str-replace($chunk, '"', '\'');
-    $chunk: str-replace($chunk, '%', '%25');
-    $chunk: str-replace($chunk, '&', '%26');
-    $chunk: str-replace($chunk, '#', '%23');
-    $chunk: str-replace($chunk, '{', '%7B');
-    $chunk: str-replace($chunk, '}', '%7D');
-    $chunk: str-replace($chunk, '<', '%3C');
-    $chunk: str-replace($chunk, '>', '%3E');
+    $chunk: mixins.str-replace($chunk, '"', '\'');
+    $chunk: mixins.str-replace($chunk, '%', '%25');
+    $chunk: mixins.str-replace($chunk, '&', '%26');
+    $chunk: mixins.str-replace($chunk, '#', '%23');
+    $chunk: mixins.str-replace($chunk, '{', '%7B');
+    $chunk: mixins.str-replace($chunk, '}', '%7D');
+    $chunk: mixins.str-replace($chunk, '<', '%3C');
+    $chunk: mixins.str-replace($chunk, '>', '%3E');
 
     //
     //    The maybe list

package/build/styleguide/sass/00-mixins/table/_table-backgrounds.scss

@@ -1,3 +1,5 @@
+@use '../../00-mixins/themify/themify' as *;
+
 ///
 /// Apply background colors for tables
 ///