Language Switcher Widget - by rj - on WordPress WooCommerce support

Hi
I have placed the language switcher widget in custom-area-1
Can you please give me CSS code to keep the look and style same as your demo content in default xstore theme.
Specially 4 things:
1. Alignment
2. Arrow if possible like demo
3. drowpdown box animation (slide up) same as it is on any other dropbox on the website e.g. search, menu, login etc.)
4. Padding of the dropbox as its slightly above the line

as of now it looks likt this:
https://prnt.sc/ucv8t9
and on hover:
https://prnt.sc/ucvek0

and below is the code I have used
.header-top .wpml-ls-legacy-dropdown a {
background-color: transparent;
color: #222;
border: none;
}
.header-top .wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a {
color: #888;
opacity: .8;
background-color: transparent;
}
.header-top .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
border: 1px solid #cdcdcd;
background-color: white;
width: 200px;
padding: 6px 0px;
}
.header-top .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a {
color: #222;
padding: 10px 15px 10px 15px;
}
.header-top .wpml-ls-legacy-dropdown .wpml-ls-sub-menu a:hover {
opacity: 0.5;
}

Also I have put it in desktop CSS. Please let me know if it should be on global CSS.