<nav class="sds-overflowNav">
<div class="sds-overflowNav__logo flex-shrink-0">
<svg width="214" height="40" viewBox="0 0 214 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1029_767)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.88 12.12C193.4 12.56 193.72 13.04 193.92 13.56L196.76 11.92C196.28 10.96 195.6 10.16 195 9.59998C194.28 8.95998 192.84 8.03998 190.36 8.03998C186 8.03998 183.6 11 183.6 14.12C183.6 17.6 186.4 19.16 188.4 20L190.6 20.92C192.16 21.52 193.96 22.56 193.96 24.88C193.96 27.2 192.24 28.76 190.12 28.76C188.68 28.76 187.72 28.24 187.08 27.4C186.52 26.64 186.12 25.56 186.12 24.44L182.6 25.2C182.72 26.8 183.28 28.36 184.52 29.72C185.68 31.04 187.28 32.04 189.96 32.04C194.28 32.04 197.4 29.04 197.4 24.64C197.4 22 196.24 19.56 191.96 17.84L189.64 16.92C187.36 15.96 187.12 14.76 187.12 14.08C187.12 12.56 188.28 11.28 190.4 11.28C191.4 11.28 192.16 11.52 192.88 12.12ZM145.72 8.39999L136.76 17.64V8.39999H133.24V31.52H136.76V21.96L137.44 21.24L145.72 31.52H150.44L139.92 18.88L150.36 8.39999H145.72ZM155.64 11.72H164.88V8.39999H152.08V31.52H164.88V28.2H155.64V20.92H164.6V17.6H155.64V11.72ZM180.76 11.72H171.52V17.6H180.52V20.92H171.52V28.2H180.76V31.52H168.04V8.39999H180.76V11.72ZM210 13.56C209.8 13.04 209.48 12.56 208.96 12.12C208.24 11.52 207.48 11.28 206.44 11.28C204.32 11.28 203.16 12.56 203.16 14.08C203.16 14.76 203.4 15.96 205.68 16.92L208 17.84C212.28 19.56 213.44 22 213.44 24.64C213.44 29.04 210.32 32.04 206 32.04C203.32 32.04 201.72 31.04 200.56 29.72C199.32 28.36 198.76 26.8 198.64 25.2L202.16 24.44C202.16 25.56 202.56 26.64 203.12 27.4C203.76 28.24 204.72 28.76 206.16 28.76C208.28 28.76 210 27.2 210 24.88C210 22.56 208.2 21.52 206.64 20.92L204.44 20C202.56 19.2 199.72 17.64 199.72 14.16C199.72 11.04 202.12 8.07997 206.48 8.07997C209 8.07997 210.4 8.99997 211.12 9.63997C211.72 10.2 212.4 11 212.88 11.96L210 13.56ZM57.56 12.12C58.08 12.56 58.4 13.04 58.6 13.56L61.48 11.96C61 11 60.32 10.2 59.72 9.63997C59 8.99997 57.56 8.07997 55.08 8.07997C50.72 8.07997 48.32 11.04 48.32 14.16C48.32 17.64 51.16 19.2 53.04 20L55.24 20.92C56.8 21.52 58.6 22.56 58.6 24.88C58.6 27.2 56.88 28.76 54.76 28.76C53.32 28.76 52.36 28.24 51.72 27.4C51.16 26.64 50.76 25.56 50.76 24.44L47.24 25.2C47.36 26.8 47.92 28.36 49.16 29.72C50.32 31.04 51.92 32.04 54.6 32.04C58.92 32.04 62.04 29.04 62.04 24.64C62.04 22 60.88 19.56 56.6 17.84L54.28 16.92C52.04 15.96 51.8 14.76 51.8 14.08C51.8 12.56 52.96 11.28 55.08 11.28C56.08 11.28 56.84 11.52 57.56 12.12ZM68.2 18.88H69.8C72.88 18.88 74.32 17.4 74.32 15.24C74.32 13.96 73.8 11.64 69.76 11.64H68.2V18.88ZM69.76 8.39999C71.16 8.39999 73.16 8.51999 74.84 9.63999C76.76 10.92 77.72 13.16 77.72 15.24C77.72 16.6 77.36 18.68 75.48 20.32C73.64 21.88 71.52 22.12 69.84 22.12H68.24V31.52H64.68V8.39999H69.76ZM83.4 22.36V8.39999H80V23.28C80 25.12 80.36 27.36 82.12 29.28C83.32 30.64 85.36 32 88.52 32C91.64 32 93.72 30.6 94.92 29.28C96.68 27.36 97.04 25.12 97.04 23.28V8.39999H93.48V22.36C93.48 23.6 93.44 25.16 92.76 26.36C92.08 27.52 90.48 28.72 88.44 28.72C86.36 28.72 84.8 27.52 84.12 26.36C83.44 25.16 83.4 23.6 83.4 22.36ZM113.24 11.72H104V17.6H112.96V20.92H104V28.2H113.24V31.52H100.44V8.39999H113.24V11.72ZM121.08 19.04H119.96V11.64H121.16C122.88 11.64 126 11.96 126 15.24C126 18.92 122.04 19.04 121.08 19.04ZM126.68 9.75999C125.16 8.75999 123.4 8.39999 120.56 8.39999H116.48V31.52H120.04V22.04H120.64L127.24 31.52H131.52L124.32 21.64C127.4 20.96 129.44 18.56 129.44 15.2C129.44 14.2 129.24 11.44 126.68 9.75999Z" fill="#003060" />
<path d="M40 0H0V40H40V0Z" fill="#DE0000" />
<path d="M27.28 15.84V9.95999L24.32 4.07999L21.36 9.95999V15.84H22.88V10.32L24.32 7.35999L25.8 10.32V15.84H27.28Z" fill="white" />
<path d="M32.04 17.72H8.03999V19.28H32.04V17.72Z" fill="white" />
<path d="M31.96 22.36C29.36 22.36 27.28 24.44 27.28 27.04V36.36C26.8 35.64 26.28 34.88 25.72 34.2V27.04C25.72 23.6 28.48 20.8 31.96 20.8V22.36Z" fill="white" />
<path d="M23.16 23.92C23.16 22.2 21.76 20.8 20 20.8C18.24 20.8 16.88 22.2 16.88 23.92V27.2C17.4 27.4 17.92 27.64 18.44 27.92V23.92C18.44 23.08 19.12 22.36 20 22.36C20.84 22.36 21.56 23.04 21.56 23.92V29.8L23.12 31L23.16 23.92Z" fill="white" />
<path d="M11.12 20.8C12.88 20.8 14.28 22.2 14.28 23.92H14.24V26.6C13.72 26.44 13.2 26.28 12.68 26.16V23.92C12.68 23.04 11.96 22.36 11.12 22.36C10.24 22.36 9.56 23.08 9.56 23.92V25.6L8 25.48V23.92C8 22.2 9.36 20.8 11.12 20.8Z" fill="white" />
</g>
<defs>
<clipPath id="clip0_1029_767">
<rect width="214" height="40" fill="white" />
</clipPath>
</defs>
</svg>
</div>
<div class="sds-overflowNav__menuWrapper" data-sds-gradient-overflow-h>
<div class="sds-overflowNav__menu" data-sds-gradient-overflow-h-wrapper>
<div class="sds-overflowNav__menuInner" data-sds-gradient-overflow-h-inner>
<ul class="sds-overflowNav__list list-unstyled">
<li class="sds-overflowNav__item -isActive">
<a href="" class="sds-overflowNav__link">
Gérer le quotidien
<span class="sr-only">Current Page</span>
</a>
</li>
<li class="sds-overflowNav__item">
<a href="" class="sds-overflowNav__link">
Financer
</a>
</li>
<li class="sds-overflowNav__item">
<a href="" class="sds-overflowNav__link">
Epargner & Investir
</a>
</li>
</ul>
<ul class="sds-overflowNav__list list-unstyled">
<li class="sds-overflowNav__item">
<a href="" class="sds-overflowNav__link">
Infos & aide
</a>
</li>
<li class="sds-overflowNav__item">
<a href="" class="sds-overflowNav__link">
Outils
</a>
</li>
<li class="sds-overflowNav__item">
<a href="" class="sds-overflowNav__link">
Luxfunds
</a>
</li>
</ul>
</div>
</div>
</div>
<a href="" class="sds-btn -btnSecondary sds-overflowNav__cta">
<span class="sds-btn__text">Devenir client</span>
</a>
</nav>
<nav class="{{ namespace }}overflowNav{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
{% if logo %}
<div class="{{ namespace }}overflowNav__logo flex-shrink-0">
<svg width="214" height="40" viewBox="0 0 214 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1029_767)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M192.88 12.12C193.4 12.56 193.72 13.04 193.92 13.56L196.76 11.92C196.28 10.96 195.6 10.16 195 9.59998C194.28 8.95998 192.84 8.03998 190.36 8.03998C186 8.03998 183.6 11 183.6 14.12C183.6 17.6 186.4 19.16 188.4 20L190.6 20.92C192.16 21.52 193.96 22.56 193.96 24.88C193.96 27.2 192.24 28.76 190.12 28.76C188.68 28.76 187.72 28.24 187.08 27.4C186.52 26.64 186.12 25.56 186.12 24.44L182.6 25.2C182.72 26.8 183.28 28.36 184.52 29.72C185.68 31.04 187.28 32.04 189.96 32.04C194.28 32.04 197.4 29.04 197.4 24.64C197.4 22 196.24 19.56 191.96 17.84L189.64 16.92C187.36 15.96 187.12 14.76 187.12 14.08C187.12 12.56 188.28 11.28 190.4 11.28C191.4 11.28 192.16 11.52 192.88 12.12ZM145.72 8.39999L136.76 17.64V8.39999H133.24V31.52H136.76V21.96L137.44 21.24L145.72 31.52H150.44L139.92 18.88L150.36 8.39999H145.72ZM155.64 11.72H164.88V8.39999H152.08V31.52H164.88V28.2H155.64V20.92H164.6V17.6H155.64V11.72ZM180.76 11.72H171.52V17.6H180.52V20.92H171.52V28.2H180.76V31.52H168.04V8.39999H180.76V11.72ZM210 13.56C209.8 13.04 209.48 12.56 208.96 12.12C208.24 11.52 207.48 11.28 206.44 11.28C204.32 11.28 203.16 12.56 203.16 14.08C203.16 14.76 203.4 15.96 205.68 16.92L208 17.84C212.28 19.56 213.44 22 213.44 24.64C213.44 29.04 210.32 32.04 206 32.04C203.32 32.04 201.72 31.04 200.56 29.72C199.32 28.36 198.76 26.8 198.64 25.2L202.16 24.44C202.16 25.56 202.56 26.64 203.12 27.4C203.76 28.24 204.72 28.76 206.16 28.76C208.28 28.76 210 27.2 210 24.88C210 22.56 208.2 21.52 206.64 20.92L204.44 20C202.56 19.2 199.72 17.64 199.72 14.16C199.72 11.04 202.12 8.07997 206.48 8.07997C209 8.07997 210.4 8.99997 211.12 9.63997C211.72 10.2 212.4 11 212.88 11.96L210 13.56ZM57.56 12.12C58.08 12.56 58.4 13.04 58.6 13.56L61.48 11.96C61 11 60.32 10.2 59.72 9.63997C59 8.99997 57.56 8.07997 55.08 8.07997C50.72 8.07997 48.32 11.04 48.32 14.16C48.32 17.64 51.16 19.2 53.04 20L55.24 20.92C56.8 21.52 58.6 22.56 58.6 24.88C58.6 27.2 56.88 28.76 54.76 28.76C53.32 28.76 52.36 28.24 51.72 27.4C51.16 26.64 50.76 25.56 50.76 24.44L47.24 25.2C47.36 26.8 47.92 28.36 49.16 29.72C50.32 31.04 51.92 32.04 54.6 32.04C58.92 32.04 62.04 29.04 62.04 24.64C62.04 22 60.88 19.56 56.6 17.84L54.28 16.92C52.04 15.96 51.8 14.76 51.8 14.08C51.8 12.56 52.96 11.28 55.08 11.28C56.08 11.28 56.84 11.52 57.56 12.12ZM68.2 18.88H69.8C72.88 18.88 74.32 17.4 74.32 15.24C74.32 13.96 73.8 11.64 69.76 11.64H68.2V18.88ZM69.76 8.39999C71.16 8.39999 73.16 8.51999 74.84 9.63999C76.76 10.92 77.72 13.16 77.72 15.24C77.72 16.6 77.36 18.68 75.48 20.32C73.64 21.88 71.52 22.12 69.84 22.12H68.24V31.52H64.68V8.39999H69.76ZM83.4 22.36V8.39999H80V23.28C80 25.12 80.36 27.36 82.12 29.28C83.32 30.64 85.36 32 88.52 32C91.64 32 93.72 30.6 94.92 29.28C96.68 27.36 97.04 25.12 97.04 23.28V8.39999H93.48V22.36C93.48 23.6 93.44 25.16 92.76 26.36C92.08 27.52 90.48 28.72 88.44 28.72C86.36 28.72 84.8 27.52 84.12 26.36C83.44 25.16 83.4 23.6 83.4 22.36ZM113.24 11.72H104V17.6H112.96V20.92H104V28.2H113.24V31.52H100.44V8.39999H113.24V11.72ZM121.08 19.04H119.96V11.64H121.16C122.88 11.64 126 11.96 126 15.24C126 18.92 122.04 19.04 121.08 19.04ZM126.68 9.75999C125.16 8.75999 123.4 8.39999 120.56 8.39999H116.48V31.52H120.04V22.04H120.64L127.24 31.52H131.52L124.32 21.64C127.4 20.96 129.44 18.56 129.44 15.2C129.44 14.2 129.24 11.44 126.68 9.75999Z" fill="#003060"/>
<path d="M40 0H0V40H40V0Z" fill="#DE0000"/>
<path d="M27.28 15.84V9.95999L24.32 4.07999L21.36 9.95999V15.84H22.88V10.32L24.32 7.35999L25.8 10.32V15.84H27.28Z" fill="white"/>
<path d="M32.04 17.72H8.03999V19.28H32.04V17.72Z" fill="white"/>
<path d="M31.96 22.36C29.36 22.36 27.28 24.44 27.28 27.04V36.36C26.8 35.64 26.28 34.88 25.72 34.2V27.04C25.72 23.6 28.48 20.8 31.96 20.8V22.36Z" fill="white"/>
<path d="M23.16 23.92C23.16 22.2 21.76 20.8 20 20.8C18.24 20.8 16.88 22.2 16.88 23.92V27.2C17.4 27.4 17.92 27.64 18.44 27.92V23.92C18.44 23.08 19.12 22.36 20 22.36C20.84 22.36 21.56 23.04 21.56 23.92V29.8L23.12 31L23.16 23.92Z" fill="white"/>
<path d="M11.12 20.8C12.88 20.8 14.28 22.2 14.28 23.92H14.24V26.6C13.72 26.44 13.2 26.28 12.68 26.16V23.92C12.68 23.04 11.96 22.36 11.12 22.36C10.24 22.36 9.56 23.08 9.56 23.92V25.6L8 25.48V23.92C8 22.2 9.36 20.8 11.12 20.8Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_1029_767">
<rect width="214" height="40" fill="white"/>
</clipPath>
</defs>
</svg>
</div>
{% endif %}
<div class="{{ namespace }}overflowNav__menuWrapper" data-{{ namespace }}gradient-overflow-h>
<div class="{{ namespace }}overflowNav__menu" data-{{ namespace }}gradient-overflow-h-wrapper>
<div class="{{ namespace }}overflowNav__menuInner" data-{{ namespace }}gradient-overflow-h-inner>
<ul class="{{ namespace }}overflowNav__list list-unstyled">
{% for key, item in navItems %}
<li class="{{ namespace }}overflowNav__item{% if item.active %} -isActive{% endif %}">
<a href="" class="{{ namespace }}overflowNav__link">
{{ item.text }}
{% if item.active %}<span class="sr-only">Current Page</span>{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% if navItems2 %}
<ul class="{{ namespace }}overflowNav__list list-unstyled">
{% for key, item in navItems2 %}
<li class="{{ namespace }}overflowNav__item">
<a href="" class="{{ namespace }}overflowNav__link">
{{ item.text }}
{% if item.active %}<span class="sr-only">Current Page</span>{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
</div>
{% if hasOverflowCTA %}
{% render "@btn-secondary", {
classes: [namespace + "overflowNav__cta"],
eltType: "a",
text: "Devenir client"
},true %}
{% endif %}
</nav>
export default class OverflowNav {
constructor() {
this.overflowGradientBehaviour();
this.dragScrollBehaviour();
}
// shamelessly stolen & adapted from: https://github.com/gauthierblanpain/table-scroll-shadow/blob/main/src/table-scroll-shadow.js
// bind the scroll (on mobile devices)
overflowGradientBehaviour() {
// Public init method
const overflowNavs = document.querySelectorAll("[data-sds-gradient-overflow-h]");
// Utility to throttle callbacks
const throttle = (callback, delay) => {
let timer = 0
return function (...args) {
clearTimeout(timer)
timer = setTimeout(() => callback.apply(this, args), delay)
}
}
// Handling of overflow and shadows
const checkForOverflow = new ResizeObserver(
throttle((entries) => {
for (let entry of entries) {
const overflowNavWrapper = entry.target
const scrollArea = overflowNavWrapper.querySelector("[data-sds-gradient-overflow-h-wrapper]")
const nav = overflowNavWrapper.querySelector('[data-sds-gradient-overflow-h-inner]')
let tableHasOverflow = false
if (nav.clientWidth > scrollArea.clientWidth) {
// Handle overflow
tableHasOverflow = true
console.log("test true")
} else {
console.log("test false")
tableHasOverflow = false
overflowNavWrapper.classList.remove( '-hasShadowLeft', '-hasShadowRight')
}
// Add horizontal shadows
if (tableHasOverflow) {
overflowNavWrapper.classList.add('-hasShadowRight')
scrollArea.addEventListener('scroll', () => {
let scrollSize = nav.clientWidth - scrollArea.clientWidth
if (scrollArea.scrollLeft === 0) {
overflowNavWrapper.classList.add('-hasShadowRight')
overflowNavWrapper.classList.remove('-hasShadowLeft')
} else if (scrollArea.scrollLeft > 0 && scrollArea.scrollLeft !== scrollSize) {
overflowNavWrapper.classList.add('-hasShadowRight', '-hasShadowLeft')
} else if (scrollArea.scrollLeft === scrollSize) {
overflowNavWrapper.classList.remove('-hasShadowRight')
overflowNavWrapper.classList.add('-hasShadowLeft')
}
})
}
}
}, 75)
)
// Observe the tables present on the page
overflowNavs.forEach((overflowNav) => {
checkForOverflow.observe(overflowNav)
})
}
dragScrollBehaviour() {
const overflowNavsInner = document.querySelectorAll("[data-sds-gradient-overflow-h-wrapper]");
let startX;
let scrollLeft;
let isDown;
overflowNavsInner.forEach((overflowNavInner) => {
overflowNavInner.addEventListener('mousedown',e => mouseIsDown(e));
overflowNavInner.addEventListener('mouseup',e => mouseUp(e))
overflowNavInner.addEventListener('mouseleave',e=>mouseLeave(e));
overflowNavInner.addEventListener('mousemove',e=>mouseMove(e));
})
function mouseIsDown(e) {
isDown = true;
startX = e.pageX - e.currentTarget.offsetLeft;
scrollLeft = e.currentTarget.scrollLeft;
}
function mouseUp(e) {
isDown = false;
}
function mouseLeave(e) {
isDown = false;
}
function mouseMove(e) {
if(isDown){
e.preventDefault();
//Move vertcally
//Move Horizontally
const x = e.pageX - e.currentTarget.offsetLeft;
const walkX = x - startX;
e.currentTarget.scrollLeft = scrollLeft - walkX;
}
}
}
}
@use "sass:math";
/* variables specific to current element */
$active-link-underline-offset: $border-width*6;
.#{$namespace}overflowNav {
/* Save root element context for easy access if nesting is needed */
$self: &;
/*@TODO check other components that use the behaviour and replace variable */
@include custom-prop-fallback-override("comp-section-background-color", "sys-color-elevation-surface-flat");
/* properties of current element + media queries */
display: flex;
align-items: center;
padding-top: map-deep-get($token-spacer-unit-map, "12");
padding-bottom: map-deep-get($token-spacer-unit-map, "12");
@include media-breakpoint-up(lg) {
padding-top: map-deep-get($token-spacer-unit-map, "40");
padding-bottom: map-deep-get($token-spacer-inset-map, "xl");
}
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// overflowNav__childElement
&__logo {
width: $nav-topbar-logo-mobile-width-global;
height: $nav-topbar-logo-mobile-width-global;
overflow: hidden;
margin-right: map-deep-get($token-spacer-unit-map, "24");
svg {
path[fill="#{map-deep-get($design-tokens, 'sys-color-text-primary-vivid')}"] {
@include custom-prop-fallback("fill","comp-logo-type-background-color")
}
}
@include media-breakpoint-up(lg) {
margin-right: map-deep-get($token-spacer-unit-map, "40");
width: auto;
}
* {
max-height: 100%;
}
&:focus-visible {
outline-style: solid !important;
outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width") !important;
outline-offset: -(map-deep-get($design-tokens, "comp-button-pressed-border-width")) !important;
@include custom-prop-fallback("outline-color", "comp-button-secondary-pressed-border-color", true, true);
}
}
&__menuWrapper {
font-size: $h5-font-size;
height: calc(1.75em + #{map-deep-get($design-tokens, "comp-button-pressed-border-width")});
flex-grow: 1;
display: flex;
align-items: flex-start;
top: map-deep-get($design-tokens, "comp-button-pressed-border-width"); // offset vertical positioning by amount of active border bottom state
&::before {
width: map-deep-get($token-sizes-unit-map, "16");
}
}
&__menu {
padding-bottom: 1.5em;
flex-grow: 1;
position: relative;
padding-top: map-deep-get($design-tokens, "comp-button-pressed-border-width");
}
&__menuInner {
align-items: center;
justify-content: space-between;
@include spacer-component-inline(lg);
@include media-breakpoint-up(md){
@include spacer-component-inline(xl);
}
}
// headerNav__subNavItem
&__item {
@extend %headingBase;
@extend %h5;
@include custom-prop-fallback("color","comp-subheader-link-text-color", true, true);
white-space: nowrap;
position: relative;
&.-isActive {
#{$self}__link {
@include custom-prop-fallback("color","comp-subheader-link-active-text-color", true, true);
&::before {
display: block;
}
}
}
}
&__link {
&::before {
content: "";
display: none;
background-color: currentColor;
height: $border-width*2;
width: $nav-topbar-cobranding-logo-height-global;
position: absolute;
bottom: -$active-link-underline-offset;
left: 50%;
transform: translateX(-50%);
}
&:hover,
&:focus {
@media (hover: hover) {
@include custom-prop-fallback("color","comp-subheader-link-hovered-text-color", true, true);
}
}
&:focus-visible {
outline-offset: -(map-deep-get($design-tokens, "comp-button-pressed-border-width"));
outline-style: solid;
outline-width: map-deep-get($design-tokens, "comp-button-pressed-border-width");
@include custom-prop-fallback("outline-color", "comp-subheader-link-active-text-color", true, true);
}
}
&__list {
display: flex;
align-items: center;
@include spacer-component-inline(lg);
@include media-breakpoint-up(md){
@include spacer-component-inline(xl);
}
}
&__cta {
display: none;
@include media-breakpoint-up("lg") {
margin-left: map-deep-get($token-spacer-inline-map, "lg");
display: flex;
flex-shrink: 0;
}
}
/* modifiers */
// overflowNav -contentCentered
&.-contentCentered {
// follows same logic as base element
#{$self}__menuInner {
margin: auto;
flex-grow: 0;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}