.xn-dropdown{
position: absolute;
background: #d2d2d2;
width: fit-content;
height: fit-content;
border-radius: 8px;
opacity: 0;
pointer-events: none;
--scale: 0;
--x: 0px;
--y: -30px;
transform: scale(var(--scale)) translateX(var(--x)) translateY(var(--y));
--opacity-easing: ease;
--opacity-duration: .2s;
--opacity-delay: 0s;
--transform-easing: ease;
--transform-duration: .2s;
--transform-delay: 0s;
transition: 
opacity var(--opacity-duration) var(--opacity-easing) var(--opacity-delay),
transform var(--transform-duration) var(--transform-easing) var(--transform-delay);
}
.xn-dropdown[data-toggled]{
opacity: 1;
pointer-events: all;
transform: scale(1) translateX(0) translateY(0);
}
.xn-dropdown[data-toggled-builder]{
opacity: 1;
pointer-events: all;
transform: scale(1) translateX(0) translateY(0);
}
.xn-dropdown::before{
content: "";
position: absolute;
--mask-top: 0px;
--mask-bottom: 0px;
--mask-left: 0px;
--mask-right: 0px;
top: calc(var(--mask-top) * -1);
bottom: var(--mask-bottom);
left: calc(var(--mask-left) * -1);
right: var(--mask-right);
display: block;
width: calc(100% + var(--mask-left) + var(--mask-right));
height: calc(100% + var(--mask-top) + var(--mask-bottom));
z-index: -1;
}
.xn-dropdown-wrapper{
width: fit-content;
}
.xn-dropdown-toggle{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
gap: 10px;
width: fit-content;
}