.pll-switcher { display: block; box-sizing: border-box; width: 100%; } /* List layouts */ .pll-switcher ul { padding: 0; margin: 0; list-style: none; line-height: normal; } .pll-switcher li { margin: 0; } /* Dropdown layout */ .pll-layout-dropdown, .pll-switcher-inner { display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; background-color: inherit; } .pll-switcher-inner { box-sizing: border-box; width: fit-content; gap: .25em; position: relative; } .pll-switcher .pll-switcher-inner > a { width: auto; max-width: none; padding: .25em 0 .25em .5em; color: inherit; text-decoration: none; z-index: 1; } .pll-switcher-inner .pll-submenu-toggle { width: auto; height: auto; padding: 0 .4em 0 .2em; border: none; margin: 0; line-height: 0; font-size: inherit; background-color: transparent !important; /* !important to overwrite some themes. */ color: currentColor !important; } .pll-switcher-inner .pll-submenu-toggle:focus { outline: auto; } .pll-switcher-inner .pll-submenu-toggle svg { display: block; width: .6em; height: .6em; margin: 0; } .pll-switcher-inner .pll-submenu-toggle svg path { stroke: currentColor; } .pll-switcher-inner:hover .pll-submenu-toggle:not([aria-expanded]) svg, .pll-switcher-inner .pll-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .pll-switcher-inner ul { display: flex; flex-direction: column; align-items: stretch; position: absolute; z-index: 2; width: 0; height: 0; left: 0; right: auto; top: 100%; border: 1px solid rgba(0, 0, 0, .15); background-color: var(--pll-dropdown-background-color, #fff); color: inherit; visibility: hidden; overflow: hidden; opacity: 0; } .wp-block-polylang-language-switcher .pll-switcher-inner ul { background-color: var(--pll-dropdown-background-color, inherit); /* Allow to change the color via the UI. */ } .pll-switcher-inner:hover .pll-submenu-toggle:not([aria-expanded]) + ul, .pll-switcher-inner .pll-submenu-toggle[aria-expanded="true"] + ul { width: auto; height: auto; min-width: 200px; visibility: visible; overflow: visible; opacity: 1; } /* Horizontal, vertical and Select layouts */ .pll-layout-vertical ul { display: flex; flex-direction: column; } .pll-layout-horizontal ul, .pll-layout-select { display: flex; flex-direction: row; flex-wrap: wrap; } /* * Main-axis alignment for horizontal, select, and dropdown. * Selectors differ because the flex container is not always the root: * - horizontal: the inner `ul` is flex → target `ul` * - select / dropdown: the root is flex → target the root * Vertical is omitted here: rows stay full width; alignment is done on * the links via justify-content (see below). */ .pll-alignment-left.pll-layout-horizontal ul, .pll-alignment-left.pll-layout-select, .pll-alignment-left.pll-layout-dropdown { justify-content: flex-start; /* Default value, but safety check. */ } .pll-alignment-center.pll-layout-horizontal ul, .pll-alignment-center.pll-layout-select, .pll-alignment-center.pll-layout-dropdown { justify-content: center; } .pll-alignment-right.pll-layout-horizontal ul, .pll-alignment-right.pll-layout-select, .pll-alignment-right.pll-layout-dropdown { justify-content: flex-end; } .pll-alignment-stretched .pll-switcher-inner { width: 100%; } .pll-alignment-stretched.pll-layout-horizontal ul, .pll-alignment-stretched.pll-layout-select { align-items: stretch; } .pll-alignment-stretched.pll-layout-dropdown { flex-direction: row; flex-wrap: wrap; align-items: stretch; } .pll-alignment-stretched.pll-layout-horizontal li, .pll-alignment-stretched.pll-layout-select select, .pll-alignment-stretched .pll-switcher-inner > a { flex-grow: 1; } /* Dropdown submenu panel position */ .pll-alignment-center.pll-layout-dropdown ul { left: 50%; right: auto; transform: translateX(-50%); } .pll-alignment-right.pll-layout-dropdown ul { left: auto; right: 0; } .pll-alignment-stretched.pll-layout-dropdown ul { left: 0; right: 0; } /* Links */ .pll-switcher a { display: flex; align-items: center; box-sizing: border-box; width: 100%; height: 100%; padding: 0.25em .5em; } :root .pll-layout-dropdown ul a span { color: var(--pll-dropdown-text-color, inherit); } /* Links are flex containers — use justify-content, not text-align. */ .pll-alignment-center a, .pll-alignment-stretched.pll-layout-horizontal a { justify-content: center; } .pll-alignment-left a { justify-content: flex-start; } .pll-alignment-right a { justify-content: flex-end; }