/*

1.Layout
2.Typography
3.Size


*/
/* ------------------------------------ */
/* --------------------------- 1.Layout */

/* --------------------------- Position */
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.fixed {
    position: fixed;
}

/* --------------------------- Display */
.inline-flex {display: inline-flex;}

/* --------------------------- Z-Index */
.z--1 {z-index:-1;}
.z-1 {z-index:1;}
.z-2 {z-index:2;}
.z-3 {z-index:3;}
.z-4 {z-index:4;}
.z-5 {z-index:5;}
/* --------------------------- Puntatori */
.pointer-events--none {
    pointer-events: none;
}
.pointer-events--auto {
    pointer-events: auto;
}

/* --------------------------- Overflow */
.overflow--clip { overflow: clip; }
.overflow--clip-x { overflow-x: clip; }
.overflow--clip-y { overflow-y: clip; }
.overflow--visible-x { overflow-x: visible; }
.overflow--visible-y { overflow-y: visible; }
/*End*/


/* Typo */
/* Typo.Transform */
.capslock-off {
    text-transform: unset;
}

/* Typo.Color */
:root {
    --color-light: var(--color-primary-light);
    --color-dark: var(--color-primary-dark);
}
.color--light {
    color: var(--color-light);
}
.color--dark {
    color: var(--color-dark);
}

/* Typo.Effects */
.text-stroke--2px {
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--color);
}
.text-stroke--4px {
    -webkit-text-stroke-width: 4px;
    -webkit-text-stroke-color: var(--color);
}
.primary-dark {
    --primary-dark: var(--color-primary-dark);
    --color: var(--primary-dark);
}




/*End*/

/* ---------------------------------- */
/* --------------------------- 3.Size */

/* --------------------- Aspect-Ratio */

.aspect-ratio--4-5 { aspect-ratio: 4/5;}
.aspect-ratio--5-4 { aspect-ratio: 5/4;}

.aspect-ratio--2-3 { aspect-ratio: 2/3;}
.aspect-ratio--3-2 { aspect-ratio: 3/2;}

.aspect-ratio--9-16 { aspect-ratio: 9/16;}
.aspect-ratio--16-9 { aspect-ratio: 16/9;}

/* Visuals */

/* Visuals.Blur */
.blur--5px { backdrop-filter: blur(5px);}