.cls1 { /*!*/ }
.cls2 {
composes: cls1;

--overlay-color: color-mod(var(--ui-black-10) alpha(40%));

position: fixed;
z-index: var(--z-index-overlay);
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
padding: calc(var(--space) * 2);
background-color: var(--overlay-color);
overflow-x: hidden;
overflow-y: auto;
transform: translateZ(0);

&.absolute {
position: absolute;
}

&.centerX {
align-items: center;
}

&.centerY {
justify-content: center;
}
}