.cpel-switcher__nav { --cpel-switcher-space: 0; display: block; } .cpel-switcher__nav .cpel-switcher__list { display: flex; list-style: none; margin: 0; padding: 0; line-height: normal; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .cpel-switcher__nav a { display: inline-block; text-decoration: none; white-space: nowrap; } .cpel-switcher--layout-horizontal .cpel-switcher__list { flex-direction: row; flex-wrap: wrap; } .cpel-switcher--layout-vertical .cpel-switcher__list { flex-direction: column; } /* Dropdown layout */ .cpel-switcher--layout-dropdown { --rotate: 0deg; --langs: 5; } .cpel-switcher--drop-to-up { --rotate: 180deg; } .cpel-switcher--layout-dropdown .cpel-switcher__nav { display: inline-block; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .cpel-switcher--layout-dropdown .cpel-switcher__toggle { position: relative; } .cpel-switcher--layout-dropdown .cpel-switcher__toggle::after { content: ''; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; width: 100%; cursor: pointer; } .cpel-switcher--layout-dropdown .cpel-switcher__toggle a i { vertical-align: middle; transform: rotateX(var(--rotate)); transition: transform 0s 200ms; } .cpel-switcher--layout-dropdown .cpel-switcher__toggle.cpel-switcher__toggle--on::after { width: min(33%, 2.5em); } .cpel-switcher--layout-dropdown .cpel-switcher__toggle.cpel-switcher__toggle--on a i { transform: rotateX(calc(var(--rotate) + 180deg)); transition-delay: 0s; } .cpel-switcher--layout-dropdown.cpel-switcher--align-left .elementor-widget-container { text-align: left; } .cpel-switcher--layout-dropdown.cpel-switcher--align-center .elementor-widget-container { text-align: center; } .cpel-switcher--layout-dropdown.cpel-switcher--align-right .elementor-widget-container { text-align: right; } .cpel-switcher--layout-dropdown.cpel-switcher--align-justify .cpel-switcher__nav { display: flex; } .cpel-switcher--layout-dropdown .cpel-switcher__list { position: absolute; z-index: 10; top: 100%; display: flex; flex-direction: column; justify-content: flex-end; min-width: 100%; max-height: 0; overflow: hidden; transition: max-height 300ms ease-out; } .cpel-switcher--drop-to-up .cpel-switcher__list { top: auto; bottom: 100%; justify-content: flex-start; } .cpel-switcher--layout-dropdown .cpel-switcher__toggle--on+.cpel-switcher__list { max-height: calc(100% * var(--langs)); transition: max-height 400ms ease-in; } .cpel-switcher--layout-dropdown .cpel-switcher__lang { width: 100%; } .cpel-switcher--layout-dropdown .cpel-switcher__lang a { display: block; text-align: left; } /* Toggle dropdown on hover only for desktop */ @media (pointer: fine) { .cpel-switcher--drop-on-hover .cpel-switcher__nav:hover .cpel-switcher__toggle::after { width: min(33%, 2.5em); } .cpel-switcher--drop-on-hover .cpel-switcher__nav:hover .cpel-switcher__toggle a i { transform: rotateX(calc(var(--rotate) + 180deg)); transition-delay: 0s; } .cpel-switcher--drop-on-hover .cpel-switcher__nav:hover .cpel-switcher__list { max-height: calc(100% * var(--langs)); transition: max-height 400ms ease-in; } } /* Vertical/Dropdown align */ .cpel-switcher--align-left .cpel-switcher__list { align-items: flex-start; } .cpel-switcher--align-center .cpel-switcher__list { align-items: center; } .cpel-switcher--align-right .cpel-switcher__list { align-items: flex-end; } .cpel-switcher--align-justify .cpel-switcher__list { align-items: stretch; } .cpel-switcher--align-justify a { width: 100%; text-align: center; } .cpel-switcher--layout-dropdown.cpel-switcher--align-right .cpel-switcher__list { right: 0; left: auto; } .cpel-switcher--layout-dropdown.cpel-switcher--align-justify .cpel-switcher__toggle a { display: inline-flex; justify-content: flex-start; align-items: center; } .cpel-switcher--layout-dropdown.cpel-switcher--align-justify .cpel-switcher__icon { margin-right: 0; margin-left: auto; } /* Horizontal align */ .cpel-switcher--layout-horizontal.cpel-switcher--align-left .cpel-switcher__list { justify-content: flex-start; } .cpel-switcher--layout-horizontal.cpel-switcher--align-center .cpel-switcher__list { justify-content: center; } .cpel-switcher--layout-horizontal.cpel-switcher--align-right .cpel-switcher__list { justify-content: flex-end; } .cpel-switcher--layout-horizontal.cpel-switcher--align-justify .cpel-switcher__lang { flex-grow: 1; } /* Separator */ .cpel-switcher__lang { margin: 0; } .cpel-switcher--layout-horizontal .cpel-switcher__lang:not(:last-child) { margin-right: var(--cpel-switcher-space); } body.rtl .cpel-switcher--layout-horizontal .cpel-switcher__lang:not(:last-child) { margin-left: var(--cpel-switcher-space); } .cpel-switcher--layout-vertical .cpel-switcher__lang:not(:last-child) { margin-bottom: var(--cpel-switcher-space); } /* Language link parts */ .cpel-switcher__name, .cpel-switcher__code, .cpel-switcher__flag { display: inline-block; vertical-align: middle; } .cpel-switcher__name, .cpel-switcher__code { text-decoration: inherit; } .cpel-switcher__flag { line-height: .5em; } .cpel-switcher__flag img { width: 100%; max-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } /* Flag relation 1:1 focus */ .cpel-switcher__flag--ai img, .cpel-switcher__flag--au img, .cpel-switcher__flag--aw img, .cpel-switcher__flag--bm img, .cpel-switcher__flag--bs img, .cpel-switcher__flag--by img, .cpel-switcher__flag--cd img, .cpel-switcher__flag--ck img, .cpel-switcher__flag--cl img, .cpel-switcher__flag--cn img, .cpel-switcher__flag--cu img, .cpel-switcher__flag--cz img, .cpel-switcher__flag--dj img, .cpel-switcher__flag--er img, .cpel-switcher__flag--esperanto img, .cpel-switcher__flag--es img, .cpel-switcher__flag--fj img, .cpel-switcher__flag--fk img, .cpel-switcher__flag--gq img, .cpel-switcher__flag--gr img, .cpel-switcher__flag--gs img, .cpel-switcher__flag--gw img, .cpel-switcher__flag--gy img, .cpel-switcher__flag--hm img, .cpel-switcher__flag--io img, .cpel-switcher__flag--jo img, .cpel-switcher__flag--km img, .cpel-switcher__flag--kw img, .cpel-switcher__flag--ky img, .cpel-switcher__flag--kz img, .cpel-switcher__flag--lk img, .cpel-switcher__flag--lr img, .cpel-switcher__flag--mg img, .cpel-switcher__flag--mh img, .cpel-switcher__flag--ms img, .cpel-switcher__flag--my img, .cpel-switcher__flag--mz img, .cpel-switcher__flag--na img, .cpel-switcher__flag--np img, .cpel-switcher__flag--nu img, .cpel-switcher__flag--nz img, .cpel-switcher__flag--om img, .cpel-switcher__flag--ph img, .cpel-switcher__flag--pm img, .cpel-switcher__flag--pn img, .cpel-switcher__flag--pr img, .cpel-switcher__flag--ps img, .cpel-switcher__flag--sb img, .cpel-switcher__flag--sc img, .cpel-switcher__flag--sd img, .cpel-switcher__flag--sg img, .cpel-switcher__flag--sh img, .cpel-switcher__flag--sk img, .cpel-switcher__flag--ss img, .cpel-switcher__flag--st img, .cpel-switcher__flag--tc img, .cpel-switcher__flag--tf img, .cpel-switcher__flag--tg img, .cpel-switcher__flag--tk img, .cpel-switcher__flag--tl img, .cpel-switcher__flag--to img, .cpel-switcher__flag--tv img, .cpel-switcher__flag--tw img, .cpel-switcher__flag--us img, .cpel-switcher__flag--uy img, .cpel-switcher__flag--uz img, .cpel-switcher__flag--vg img, .cpel-switcher__flag--vu img, .cpel-switcher__flag--za img, .cpel-switcher__flag--ws img, .cpel-switcher__flag--zw img { -o-object-position: left; object-position: left; } .cpel-switcher__flag--eh img, .cpel-switcher__flag--tm img { -o-object-position: 20%; object-position: 20%; } .cpel-switcher__flag--ai img, .cpel-switcher__flag--au img, .cpel-switcher__flag--bm img, .cpel-switcher__flag--ck img, .cpel-switcher__flag--fj img, .cpel-switcher__flag--fk img, .cpel-switcher__flag--gs img, .cpel-switcher__flag--hm img, .cpel-switcher__flag--io img, .cpel-switcher__flag--ky img, .cpel-switcher__flag--ms img, .cpel-switcher__flag--nu img, .cpel-switcher__flag--nz img, .cpel-switcher__flag--pn img, .cpel-switcher__flag--sh img, .cpel-switcher__flag--tc img, .cpel-switcher__flag--tf img, .cpel-switcher__flag--tv img, .cpel-switcher__flag--vg img { -o-object-position: 75%; object-position: 75%; } .cpel-switcher__flag--as img, .cpel-switcher__flag--zm img { -o-object-position: right; object-position: right; }