.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* DETAILS */
details summary:hover {
    background-color: var(--ita-colors-grey--5);
}
details summary [data-ui-icon="chevron_up"] {
    display: none;
}
details[open] summary [data-ui-icon="chevron_up"] {
    display: inherit;
}
details[open] summary [data-ui-icon="chevron_down"] {
    display: none;
}
details + details summary {
    border-top: 1px solid var(--ita-colors-grey--10)
}

dialog::backdrop {
    background-color: #0006;
}

/* Legal mentions modal - links are disabled (pointer-events: none), must not look clickable */
[data-ui="legal-mention"] a {
    color: inherit;
    text-decoration: none;
    cursor: default;
}
/* ...sauf les liens ".police-url" (marqueur posé par le fournisseur, ex. www.orias.fr,
   www.aeras-infos.fr, IPID) : ce sont de vraies URL de référence, pas des ancres internes vers
   des notes — on les réactive et on leur rend l'apparence d'un lien. `pointer-events` étant
   hérité, le réactiver ici suffit à passer outre le `.pe-none` posé sur le conteneur parent. */
[data-ui="legal-mention"] a.police-url {
    pointer-events: auto;
    color: var(--ita-colors-use--9);
    text-decoration: underline;
    cursor: pointer;
}
/* ALERT BANNER */
[data-ui-alert-banner] h2 [data-ui-icon="chevron_up"] {
    display: none;
}
[data-ui-alert-banner] h2 [type="checkbox"]:checked ~ [data-ui-icon="chevron_up"] {
    display: inherit;
}
[data-ui-alert-banner] h2 [type="checkbox"]:checked ~ [data-ui-icon="chevron_down"] {
    display: none;
}
[data-ui-alert-banner]:has([data-ui-alert-banner-close] [type="checkbox"]:checked) {
    display: none;
}
@media (max-width: 899px) {
    [data-ui-alert-banner] [data-ui-alert-banner-hideable] {
        display: none;
    }
    [data-ui-alert-banner]:has(h2 [type="checkbox"]:checked) [data-ui-alert-banner-hideable] {
        display: inherit;
    }
}
/* LOADER */
@keyframes uiLoader {
    100% { transform: rotate(1turn); }
}
[data-ui-loader] {
    --ui-loader-color-1: var(--ita-colors-macif--1);
    --ui-loader-color-2: var(--ita-colors-grey--10);
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 9px solid var(--ui-loader-color-2);
    border-right-color: var(--ui-loader-color-1);
    position: relative;
    animation: uiLoader 1.2s infinite linear;
    &::before {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ui-loader-color-1);
        position: absolute;
        left: 35px;
        top: -1px;
    }
    &::after {
        content: "";
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ui-loader-color-1);
        position: absolute;
        left: 35px;
        bottom: -1px;
    }
}
[data-ui-loader*="small"] {
    scale: 0.5;
}
[data-ui-loader*="reverse"] {
    --ui-loader-color-1: white;
    --ui-loader-color-2: rgba(255,255,255,0.2);
}

/* BADGE */
[data-ui-badge] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.2em;
    margin: 0;
    overflow: hidden;
    height: 28px;
    padding: 0 var(--ita-spacings-4);
    font-family: var(--ita-fontFamilies-FF1_400);
    font-size: var(--ita-fontSizes-5);
    color: var(--ita-colors-grey--80);
    line-height: 1em;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-radius: 100px;
}
[data-ui-badge] [data-ui-icon] {
    transform: translateX(-0.2em);
}
[data-ui-badge="neutral"] {
    background-color: var(--ita-colors-grey--10);
}
[data-ui-badge="success"] {
    background-color: var(--ita-colors-use--2);
}
[data-ui-badge="success"] [data-ui-icon] {
    color: var(--ita-colors-use--1);
}
[data-ui-badge="warning"] {
    background-color: var(--ita-colors-7050);
}
[data-ui-badge="warning"] [data-ui-icon] {
    color: var(--ita-colors-use--7);
}
[data-ui-badge="danger"] {
    background-color: var(--ita-colors-use--6);
}
[data-ui-badge="danger"] [data-ui-icon] {
    color: var(--ita-colors-use--5);
}

/* CO2 EMISSIONS */
:root {
    --ui-co2-size: 20px;
    --ui-co2-key-color: var(--ita-colors-grey--10);
    --ui-co2-key-contrast-color: oklch(from var(--ui-co2-key-color) round(1.21 - L) 0 0);
    --ui-co2-a: #009640;
    --ui-co2-b: #52AE32;
    --ui-co2-c: #C8D400;
    --ui-co2-d: #FFED00;
    --ui-co2-e: #F0B200;
    --ui-co2-f: #EC6608;
    --ui-co2-g: #E30613;
    --ui-co2-a-contrast: oklch(from var(--ui-co2-a) round(1.21 - L) 0 0);
    --ui-co2-b-contrast: oklch(from var(--ui-co2-b) round(1.21 - L) 0 0);
    --ui-co2-c-contrast: oklch(from var(--ui-co2-c) round(1.21 - L) 0 0);
    --ui-co2-d-contrast: oklch(from var(--ui-co2-d) round(1.21 - L) 0 0);
    --ui-co2-e-contrast: oklch(from var(--ui-co2-e) round(1.21 - L) 0 0);
    --ui-co2-f-contrast: oklch(from var(--ui-co2-f) round(1.21 - L) 0 0);
    --ui-co2-g-contrast: oklch(from var(--ui-co2-g) round(1.21 - L) 0 0);
}
[data-ui-carbon="gradient-horizontal"] {
    background: linear-gradient(
        90deg,
        var(--ui-co2-a) 14%,
        var(--ui-co2-b) 28%,
        var(--ui-co2-c) 42%,
        var(--ui-co2-d) 56%,
        var(--ui-co2-e) 70%,
        var(--ui-co2-f) 84%,
        var(--ui-co2-g) 100%
    )
}
[data-ui-carbon="gradient-vertical"] {
    background: linear-gradient(
        180deg,
        var(--ui-co2-a) 14%,
        var(--ui-co2-b) 28%,
        var(--ui-co2-c) 42%,
        var(--ui-co2-d) 56%,
        var(--ui-co2-e) 70%,
        var(--ui-co2-f) 84%,
        var(--ui-co2-g) 100%
    )
}
[data-ui-carbon="gradient-vertical"]::before,
[data-ui-carbon="gradient-vertical"]::after {
    display: flex;
    left: 50%;
    transform: translateX(-50%);
}
[data-ui-carbon="gradient-vertical"]::before {
    content: 'Faible';
    position: absolute;
    bottom: 100%;
    font-size: var(--ita-fontSizes-3);
    padding-bottom: 1em;
}
[data-ui-carbon="gradient-vertical"]::after {
    content: 'Elevé';
    position: absolute;
    top: 100%;
    font-size: var(--ita-fontSizes-3);
    padding-top: 1em;
}

/* CO2 BADGE */
[data-ui-co2] {
    width: var(--ui-co2-size);
    height: var(--ui-co2-size);
    min-width: var(--ui-co2-size);
    min-height: var(--ui-co2-size);
    position: relative;
    border-radius: 100px;
    background: radial-gradient(
        circle at center,
        var(--ui-co2-key-color) 0%,
        var(--ui-co2-key-color) 55%,
        color-mix(in srgb, var(--ui-co2-key-color) 20%, white 80%) 56%,
        color-mix(in srgb, var(--ui-co2-key-color) 20%, white 80%) 100%
    );
    font-size: calc(var(--ui-co2-size) * 0.6);
    font-weight: 700;
    font-family: var(--ita-fontFamilies-2_700);
    font-weight: 700;
    color: color-mix(in srgb, var(--ui-co2-key-contrast-color) 70%, transparent 30%);
}
[data-ui-co2]::before {
    content: attr(data-ui-co2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
[data-ui-co2="A"] {
    --ui-co2-key-color: var(--ui-co2-a);
    color: var(--ui-co2-a-contrast);
}
[data-ui-co2="B"] {
    --ui-co2-key-color: var(--ui-co2-b);
    color: var(--ui-co2-b-contrast);
}
[data-ui-co2="C"] {
    --ui-co2-key-color: var(--ui-co2-c);
    color: var(--ui-co2-c-contrast);
}
[data-ui-co2="D"] {
    --ui-co2-key-color: var(--ui-co2-d);
    color: var(--ui-co2-d-contrast);
}
[data-ui-co2="E"] {
    --ui-co2-key-color: var(--ui-co2-e);
    color: var(--ui-co2-e-contrast);
}
[data-ui-co2="F"] {
    --ui-co2-key-color: var(--ui-co2-f);
    color: var(--ui-co2-f-contrast);
}
[data-ui-co2="G"] {
    --ui-co2-key-color: var(--ui-co2-g);
    color: var(--ui-co2-g-contrast);
}

[data-ui-co2-arrow] {
    min-width: 110px;
    width: 100%;
    background-image: conic-gradient(from 0.25turn at 100% 50%, white 0deg, white 135deg, var(--ui-co2-arrow-color) 135deg, var(--ui-co2-arrow-color) 225deg, white 225deg);
}
[data-ui-co2-arrow][data-ui-co2-arrow-current="1"],
[data-ui-co2-arrow][data-ui-co2-arrow-current="true"] {
    width: 100%;
    max-width: 100%;
}
[data-ui-co2-arrow="A"] {
    --ui-co2-arrow-color: var(--ui-co2-a);
    color: var(--ui-co2-a-contrast);
    max-width: 110px;
}
[data-ui-co2-arrow="B"] {
    --ui-co2-arrow-color: var(--ui-co2-b);
    color: var(--ui-co2-b-contrast);
    max-width: 130px;
}
[data-ui-co2-arrow="C"] {
    --ui-co2-arrow-color: var(--ui-co2-c);
    color: var(--ui-co2-c-contrast);
    max-width: 150px;
}
[data-ui-co2-arrow="D"] {
    --ui-co2-arrow-color: var(--ui-co2-d);
    color: var(--ui-co2-d-contrast);
    max-width: 170px;
}
[data-ui-co2-arrow="E"] {
    --ui-co2-arrow-color: var(--ui-co2-e);
    color: var(--ui-co2-e-contrast);
    max-width: 190px;
}
[data-ui-co2-arrow="F"] {
    --ui-co2-arrow-color: var(--ui-co2-f);
    color: var(--ui-co2-f-contrast);
    max-width: 210px;
}
[data-ui-co2-arrow="G"] {
    --ui-co2-arrow-color: var(--ui-co2-g);
    color: var(--ui-co2-g-contrast);
    max-width: 220px;
}

/* SPECIAL LINKS */
[data-ui-link] {
    align-items: center;
    justify-content: center;
    padding: var(--ita-spacings-2) var(--ita-spacings-4);
    text-decoration: none;
    font-family: var(--ita-fontFamilies-1_400);
    font-size: var(--ita-fontSizes-5);
    color: var(--ita-colors-macif--1);
    background-color: transparent;
    border-radius: 100px;
    border: 2px solid var(--ita-colors-macif--1);
    text-align: center;
    white-space: nowrap;
    line-height: 1em;
    transition: all 200ms cubic-bezier(.2, 0, 0, 1);
}
[data-ui-link]:hover {
    background-color: #dbe5fc;
}
[data-ui-link]:focus {
    outline: 2px solid var(--ita-colors-macif--1);
    outline-offset: 2px;
}
[data-ui-link].active {
    background-color: var(--ita-colors-macif--1);
    color: white;
}

/* CALLOUT */
[data-ui-callout="content"] > *:first-child {
    margin-top: 0;
}
[data-ui-callout="content"] > *:last-child {
    margin-bottom: 0;
}

[data-ui="anchor-spy"]:has(a[href="#section_financement"].active),
[data-ui="anchor-spy"]:has(a[href="#section_livraison"].active) {
    position: fixed;
    margin-top: 0;
    width: 100%;
}
[data-ui="anchor-spy"]:has(a[href="#section_financement"].active) + div,
[data-ui="anchor-spy"]:has(a[href="#section_livraison"].active) + div {
    height: 68px;
}
[data-ui="anchor-spy"]:has(a[href="#section_financement"].active) + div::before,
[data-ui="anchor-spy"]:has(a[href="#section_livraison"].active) + div::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 68px;
    background-color: white;
    z-index: 199;
    box-shadow: var(--ita-shadows-1);
}

/* CHIPS */
[data-ui-chips] {
    display: inline-flex;
    align-items: center;
    gap: var(--ita-spacings-2);
    cursor: pointer;
    border: none;
    border-radius: 100px;
    font-family: var(--ita-fontFamilies-1_400);
    font-weight: 400;
    font-size: 1em;
    padding: var(--ita-spacings-1) var(--ita-spacings-2) var(--ita-spacings-1) var(--ita-spacings-4);
}
[data-ui-chips="primary"] {
    transition: background-color 0.1s cubic-bezier(.2, 0, 0, 1);
    background-color: var(--ita-colors-macif--1);
    color: var(--ita-colors-white);
}
[data-ui-chips="primary"]:hover {
    background-color: #061d53;
}
[data-ui-chips="primary"] > span {
    display: flex;
    color: var(--ita-colors-black);
    border-radius: 100px;
    aspect-ratio: 1;
    background-color: var(--ita-colors-white);
}

/* CATALOG */
#catalog_filters_form details summary:focus-visible {
    outline: 2px solid var(--ita-colors-macif--1);
    outline-offset: 2px;
}
#catalog_filters_form details:first-child {
    border-top: 1px solid var(--ita-colors-grey--20);
}

/* FINANCEMENT */
#type_financement.mds-tabs.mds-tabs--pills nav ul {
    padding: var(--ita-spacings-2);
    border-radius: 100px;
    border: 2px solid white;
}
#type_financement.mds-tabs nav ul li {
    width: 100%;
}
#type_financement.mds-tabs.mds-tabs--pills nav ul button {
    width: 100%;
    justify-content: center;
    font-weight: 700;
}
#type_financement.mds-tabs.mds-tabs--pills.mds-tabs--reverse nav ul button {
    border-color: transparent
}
#type_financement.mds-tabs .mds-tabs__panel > p + p {
    padding-top: 0;
}

#financement:has(.mds-tabs__panel) ~ #note-financement article[data-funding-type] {
    display: none;
}
#financement:has(.mds-tabs__panel:not([hidden]) [data-funding-type="CREDIT"]) ~ #note-financement article[data-funding-type="CREDIT"] {
    display: inherit;
}
#financement:has(.mds-tabs__panel:not([hidden]) [data-funding-type="LOA"]) ~ #note-financement article[data-funding-type="LOA"],
#financement:has(.mds-tabs__panel:not([hidden]) [data-funding-type="LOB"]) ~ #note-financement article[data-funding-type="LOB"],
#financement:has(.mds-tabs__panel:not([hidden]) [data-funding-type="LLD"]) ~ #note-financement article[data-funding-type="LLD"] {
    display: inherit;
}
#financement:has(.mds-tabs__panel:not([hidden]) [data-funding-type="LOA"]) #financement_tranche_age,
#financement:has(.mds-tabs__panel:not([hidden]) [data-funding-type="LOB"]) #financement_tranche_age,
#financement:has(.mds-tabs__panel:not([hidden]) [data-funding-type="LLD"]) #financement_tranche_age,
#financement:has(#financement_assurance_emprunteur_2:checked) #financement_tranche_age {
    display: none;
}
/* Prix mensuel affiché dans l'en-tête sticky (#vehicle_monthly_price) et mentions légales de la
   modale (.vehicle-legal-modal, une par véhicule) : même mécanisme "[data-funding-type]" que
   #note-financement/#footnotes-list ci-dessous, piloté par l'onglet actif de #financement. Ancré
   sur body:has() car ni l'un ni l'autre n'est un frère direct de #financement dans le DOM. */
body:has(#financement .mds-tabs__panel) #vehicle_monthly_price [data-funding-type],
body:has(#financement .mds-tabs__panel) .vehicle-legal-modal article[data-funding-type] {
    display: none;
}
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="CREDIT"]) #vehicle_monthly_price [data-funding-type="CREDIT"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOA"]) #vehicle_monthly_price [data-funding-type="LOA"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOB"]) #vehicle_monthly_price [data-funding-type="LOB"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LLD"]) #vehicle_monthly_price [data-funding-type="LLD"] {
    display: inline;
}
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="CREDIT"]) .vehicle-legal-modal article[data-funding-type="CREDIT"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOA"]) .vehicle-legal-modal article[data-funding-type="LOA"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOB"]) .vehicle-legal-modal article[data-funding-type="LOB"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LLD"]) .vehicle-legal-modal article[data-funding-type="LLD"] {
    display: inherit;
}
/* Les footnotes de financement (#footnotes-list) sont hors du sous-arbre #financement (elles
   vivent dans le bloc "Notes et mentions légales" plus bas dans la page) : on ancre ces règles
   sur body:has() plutôt que sur le sélecteur de frère ~ utilisé ci-dessus pour #note-financement.
   [data-funding-type] cible aussi bien les <li> numérotées (dans le <ol>) que les <p> non
   numérotées (après le <ol>) : on cible explicitement li/p pour restaurer flex/block plutôt que
   "display: revert", qui ignorerait notre display:flex ci-dessous et rétablirait list-item
   (valeur par défaut d'un <li> dans la feuille de style du navigateur). */
body:has(#financement .mds-tabs__panel) #footnotes-list [data-funding-type] {
    display: none;
}
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="CREDIT"]) #footnotes-list li[data-funding-type="CREDIT"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOA"]) #footnotes-list li[data-funding-type="LOA"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOB"]) #footnotes-list li[data-funding-type="LOB"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LLD"]) #footnotes-list li[data-funding-type="LLD"] {
    display: flex;
}
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="CREDIT"]) #footnotes-list p[data-funding-type="CREDIT"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOA"]) #footnotes-list p[data-funding-type="LOA"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LOB"]) #footnotes-list p[data-funding-type="LOB"],
body:has(#financement .mds-tabs__panel:not([hidden]) [data-funding-type="LLD"]) #footnotes-list p[data-funding-type="LLD"] {
    display: block;
}
/* Numéro de note cliquable (voir assets/js/front/footnotes.js) : le marqueur natif du <ol>
   n'est pas stylable comme un lien (::marker ne supporte pas text-decoration), on le remplace
   donc par un <button> affichant le même numéro, stylé comme les liens du texte légal environnant. */
#footnotes-list ol {
    list-style: none;
}
/* Le contenu d'une note peut arriver enveloppé d'un <div> côté fournisseur (ex. CAAB, cf.
   police-grande/police-intermediaire) : en display block, il forcerait un retour à la ligne
   après le numéro. Le flex sur le <li> aligne le bouton et le contenu sur une même ligne quel
   que soit le display d'origine du contenu (div, span, texte brut...). */
#footnotes-list li {
    display: flex;
    gap: var(--ita-spacings-2);
    align-items: baseline;
}
/* Un flex item garde par défaut la largeur intrinsèque de son contenu (min-width: auto) : sans
   ça, le texte de la note ne passerait pas à la ligne et déborderait au lieu de se répartir
   sur la largeur disponible à côté du numéro. */
#footnotes-list li > *:not(.footnote-number) {
    min-width: 0;
}
#footnotes-list .footnote-number {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--ita-colors-use--9);
    text-decoration: underline;
    cursor: pointer;
}
#footnotes-list .footnote-number:focus-visible {
    outline: 2px solid var(--ita-colors-macif--1);
    outline-offset: 2px;
}
article[data-funding-type] {
    line-height: 1.5em;
}
article[data-funding-type] p {
    margin-top: 1em;
    margin-bottom: 1em;
}
article[data-funding-type] .police-grande {
    font-size: var(--ita-fontSizes-11);
    font-family: var(--ita-fontFamilies-2_600);
    font-weight: 600;
    line-height: 1.5em;
}
article[data-funding-type] .police-grande-gras {
    font-size: var(--ita-fontSizes-11);
    font-family: var(--ita-fontFamilies-2_700);
    font-weight: 700;
    line-height: 1.5em;
}
article[data-funding-type] .police-petite {
    font-size: var(--ita-fontSizes-4);
    font-family: var(--ita-fontFamilies-1_400);
    font-weight: 400;
    line-height: 1.5em;
}
article[data-funding-type] .police-petite-gras {
    font-size: var(--ita-fontSizes-4);
    font-family: var(--ita-fontFamilies-1_700);
    font-weight: 700;
    line-height: 1.5em;
}
/* SOCRAM fait suivre ses notes ".police-petite" (footnotes numérotées) de mentions légales
   fixes (identité de l'établissement, IOBSP...) qui, elles, restent en ".police-intermediaire" :
   une fois les notes en 14px, ces mentions doivent s'aligner sur la même taille plutôt que
   ressortir plus grandes juste en dessous. Ne cible que les ".police-intermediaire" qui suivent
   une ".police-petite" (frère générique) : celles utilisées plus haut dans l'"example" (texte
   principal, à côté de ".police-grande") ne sont pas concernées. */
article[data-funding-type] .police-petite ~ .police-intermediaire,
article[data-funding-type] .police-petite ~ .police-intermediaire-gras {
    font-size: var(--ita-fontSizes-4);
}

/* _branded_image_and_text */
[data-ui="_branded_image_and_text"] a {
    color: white;
}

/* Menu principal */
body:has([c-toggle-name="nav_primary_small_devices_menu"]) {
    overflow-x: hidden;
}
body:has([c-toggle-name="nav_primary_small_devices_menu"].active) {
    overflow-y: hidden;
}
[c-toggle-name="nav_primary_small_devices_menu"] {
    margin-top: 2px;
}
[c-toggle-name="nav_primary_small_devices_menu"] #nav_primary_small_devices_menu__overlay {
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.2, 0, 0, 1);
    background-color: #0006;
}
[c-toggle-name="nav_primary_small_devices_menu"].active #nav_primary_small_devices_menu__overlay {
    opacity: 1;
}
#nav_primary_small_devices_menu__content {
    transform: translateX(100%);
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
    max-width: 564px;
}
[c-toggle-name="nav_primary_small_devices_menu"].active #nav_primary_small_devices_menu__content {
    transform: translateX(0%);
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1);
}
#nav_primary_small_devices_menu__content {
    max-width: 564px;
}

/* Menu secondaire */
.nav_secondary__link:hover {
    box-shadow: 0 2px 0 var(--ita-colors-macif--1);
}

/* Special links */
[data-ui="link-decoration"]:hover {
    text-decoration: underline;
}

/* Shadows */
[data-ui-shadow] {
    transition: box-shadow 300ms;
}
[data-ui-shadow="200-300"] {
    box-shadow: var(--ita-shadows-2);
}
[data-ui-shadow="200-300"]:hover {
    box-shadow: var(--ita-shadows-3);
}

/* Small touch area tweak - Parent must be position: relative or absolute */
[data-ui-small-touch-area] {
    position: absolute;
    top: -1em;
    left: -1em;
    width: calc(100% + 2em);
    height: calc(100% + 2em);
}

/* Skeleton */
@keyframes fadeColors {
    0% {
        background-color: var(--ita-colors-grey--10);
    }
    100% {
        background-color: var(--ita-colors-grey--20);
    }
}
[data-ui-skeleton] {
    background-color: var(--ita-colors-grey--20);
    animation: fadeColors 900ms cubic-bezier(.3, 0, .8, .15) infinite alternate;
}