Repository URL to install this package:
.ct-language-switcher {
li {
a {
display: flex;
align-items: center;
gap: 7px;
}
img {
max-width: 18px;
}
}
&[data-type='inline'] ul {
display: inline-flex;
flex-wrap: wrap;
column-gap: var(--items-spacing, 20px);
row-gap: 5px;
li {
&.current-lang {
--linkInitialColor: var(--linkHoverColor);
}
}
}
&[data-type='dropdown'] {
position: relative;
ul {
position: absolute;
margin-top: var(--margin-top);
border-radius: var(--border-radius);
background: var(--background-color);
box-shadow: var(--box-shadow);
opacity: 0;
visibility: hidden;
transform: translate3d(0, 10px, 0);
transition: opacity 0.2s ease, visibility 0.2s ease,
transform 0.2s ease;
// modal placement
&[data-placement='right'] {
left: -15px;
}
&[data-placement='left'] {
right: -15px;
}
li {
&:not(:last-child) {
border-bottom: var(--border);
}
a {
padding: var(--padding) 15px;
}
&.current-lang {
display: none;
}
}
// drop-down bridge
&:before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: var(--margin-top);
transform: translateY(-100%);
}
}
&:hover,
&:focus-within {
ul {
opacity: 1;
visibility: visible;
transform: translate3d(0, 0, 0);
}
}
}
}
.ct-language {
color: var(--linkInitialColor);
}
.ct-active-language {
display: flex;
align-items: center;
gap: 7px;
cursor: pointer;
--icon-size: 8px;
--icon-color: currentColor;
}
// weglot css
.ct-language-switcher {
.weglot-flags a,
.wglanguage-name {
&:empty {
&:before {
margin: 0;
}
}
}
}