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

margin: 0;
padding: 0;
display: none;
box-sizing: border-box;
position: absolute;
width: max-content;

&.isOpened {
display: block;
}

&.fill {
width: 100%;
}

&.direction-top {
top: 0;
left: 50%;
transform: translateX(-50%) translateY(calc(-100% - 4px));
}

&.direction-right {
top: 50%;
left: 100%;
transform: translateX(4px) translateY(-50%);
}

&.direction-bottom {
left: 50%;
transform: translateX(-50%) translateY(4px);
}

&.direction-left {
top: 50%;
transform: translateX(calc(-100% - 4px)) translateY(-50%);
}

&.direction-top-start {
top: 0;
transform: translateY(calc(-100% - 4px));
}

&.direction-right-start {
top: 0;
left: 100%;
transform: translateX(4px);
}

&.direction-bottom-start {
transform: translateY(4px);
}

&.direction-left-start {
top: 0;
transform: translateX(calc(-100% - 4px));
}

&.direction-top-end {
top: 0;
left: 100%;
transform: translateX(-100%) translateY(calc(-100% - 4px));
}

&.direction-right-end {
top: 100%;
left: 100%;
transform: translateX(4px) translateY(-100%);
}

&.direction-bottom-end {
left: 100%;
transform: translateX(-100%) translateY(4px);
}

&.direction-left-end {
top: 100%;
transform: translateX(calc(-100% - 4px)) translateY(-100%);
}

&.direction-top-left {
top: 0;
transform: translateX(calc(-100% - 4px)) translateY(calc(-100% - 4px));
}

&.direction-top-right {
top: 0;
transform: translateX(calc(4px)) translateY(calc(-100% - 4px));
left: 100%;
}

&.direction-bottom-right {
left: 100%;
transform: translateX(4px) translateY(4px);
}

&.direction-bottom-left {
transform: translateX(calc(-100% - 4px)) translateY(4px);
}
}