{"id":16,"date":"2025-09-26T08:50:44","date_gmt":"2025-09-26T08:50:44","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/language-switcher\/"},"modified":"2025-12-01T06:23:18","modified_gmt":"2025-12-01T06:23:18","slug":"language-switcher","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/language-switcher\/","title":{"rendered":"Language switcher block"},"content":{"rendered":"\n<p>The Language switcher block can display a placeholder language switcher when a multilingual plugin isn&#8217;t installed yet, but will switch to using languages from <a href=\"https:\/\/wpml.org\/\" data-type=\"link\" data-id=\"https:\/\/wpml.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPML<\/a> or <a href=\"https:\/\/polylang.pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Polylang<\/a> once detected.<\/p>\n\n\n\n<div class=\"text-base not-prose wp-block-ska-element\">\n<h3 class=\"wp-block-heading\">Language list<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><ul class=\"ska-language-switcher ska-preset--ska-theme--links flex [&amp;_.lang]:flex flex-col [&amp;_.lang]:flex-row gap-1 [&amp;_.lang]:gap-1.5 [&amp;_.lang]:justify-start [&amp;_.lang]:items-center [&amp;_.lang]:text-sm\"><li class=\"active\" data-language-id=\"placeholder-1\" data-language-code=\"en\" data-has-translation=\"true\"><a class=\"lang active\" href=\"#\" hreflang=\"en\" aria-label=\"Switch to language: English\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><\/a><\/li><li data-language-id=\"placeholder-2\" data-language-code=\"et\" data-has-translation=\"true\"><a class=\"lang\" href=\"#\" hreflang=\"et\" aria-label=\"Switch to language: Eesti\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiM0NjQ2NTUiIGQ9Ik0zNiAwSDB2MjRoMzZWMFoiLz48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMTZIMHY4aDM2di04WiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2OGgzNlYwWiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjRIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=\" alt=\"Eesti flag\" \/><span class=\"label\">Eesti<\/span><\/a><\/li><li data-language-id=\"placeholder-3\" data-language-code=\"fi\" data-has-translation=\"false\"><a class=\"lang\" href=\"#\" hreflang=\"fi\" aria-label=\"Switch to language: Suomi\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMEgwdjIzLjk4OGgzNlYwWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiA5LjEyMkgwdjUuOTk4aDM2VjkuMTIyWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0xNiAwaC02djIzLjk4OGg2VjBaIi8+PC9zdmc+\" alt=\"Suomi flag\" \/><span class=\"label\">Suomi<\/span><\/a><\/li><\/ul><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/language-switcher {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex [\\u0026_.lang]:flex flex-col [\\u0026_.lang]:flex-row gap-1 [\\u0026_.lang]:gap-1.5 [\\u0026_.lang]:justify-start [\\u0026_.lang]:items-center [\\u0026_.lang]:text-sm&quot;,&quot;css&quot;:&quot;.flex{display:flex}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex .lang{display:flex}.flex-col{flex-direction:column}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex-row .lang{flex-direction:row}.gap-1{gap:var(--spacing-1)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:gap-1\\u005c.5 .lang{gap:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:justify-start .lang{justify-content:flex-start}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:items-center .lang{align-items:center}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:text-sm .lang{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--links&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_.lang]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1.5&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;col&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Language dropdown<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><div class=\"ska-language-switcher inline-block [&amp;_.lang]:flex relative [&amp;_.lang]:flex-row [&amp;_button.lang]:gap-2 [&amp;_.lang]:gap-1.5 [&amp;_.lang]:justify-start [&amp;_.lang]:items-center [&amp;_button.lang]:px-5 [&amp;_button.lang]:py-2.5 [&amp;_button.lang]:text-sm [&amp;_button.lang]:hover:bg-plain-light [&amp;_button.lang]:rounded [&amp;_button.lang]:border [&amp;_button.lang]:transition-colors\" x-data=\"skaDropdown({on:'hover',placement:'bottom'})\"><div x-bind=\"item('ska-language-switcher-1')\"><button class=\"lang active\" type=\"button\" aria-label=\"Open language switcher (current language: English)\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><template x-bind=\"dropdown('ska-language-switcher-1')\"><ul class=\"ska-preset--ska-theme--dropdown\"><li class=\"active\" data-language-id=\"placeholder-1\" data-language-code=\"en\" data-has-translation=\"true\"><a class=\"lang active\" href=\"#\" hreflang=\"en\" aria-label=\"Switch to language: English\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><\/a><\/li><li data-language-id=\"placeholder-2\" data-language-code=\"et\" data-has-translation=\"true\"><a class=\"lang\" href=\"#\" hreflang=\"et\" aria-label=\"Switch to language: Eesti\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiM0NjQ2NTUiIGQ9Ik0zNiAwSDB2MjRoMzZWMFoiLz48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMTZIMHY4aDM2di04WiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2OGgzNlYwWiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjRIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=\" alt=\"Eesti flag\" \/><span class=\"label\">Eesti<\/span><\/a><\/li><li data-language-id=\"placeholder-3\" data-language-code=\"fi\" data-has-translation=\"false\"><a class=\"lang\" href=\"#\" hreflang=\"fi\" aria-label=\"Switch to language: Suomi\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMEgwdjIzLjk4OGgzNlYwWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiA5LjEyMkgwdjUuOTk4aDM2VjkuMTIyWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0xNiAwaC02djIzLjk4OGg2VjBaIi8+PC9zdmc+\" alt=\"Suomi flag\" \/><span class=\"label\">Suomi<\/span><\/a><\/li><\/ul><\/template><\/div><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/language-switcher {&quot;mode&quot;:&quot;dropdown&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-block [\\u0026_.lang]:flex relative [\\u0026_.lang]:flex-row [\\u0026_button.lang]:gap-2 [\\u0026_.lang]:gap-1.5 [\\u0026_.lang]:justify-start [\\u0026_.lang]:items-center [\\u0026_button.lang]:px-5 [\\u0026_button.lang]:py-2.5 [\\u0026_button.lang]:text-sm [\\u0026_button.lang]:hover:bg-plain-light [\\u0026_button.lang]:rounded [\\u0026_button.lang]:border [\\u0026_button.lang]:transition-colors&quot;,&quot;css&quot;:&quot;.inline-block{display:inline-block}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex .lang{display:flex}.relative{position:relative}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex-row .lang{flex-direction:row}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:gap-2 button.lang{gap:var(--spacing-2)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:gap-1\\u005c.5 .lang{gap:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:justify-start .lang{justify-content:flex-start}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:items-center .lang{align-items:center}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:px-5 button.lang{padding-inline:var(--spacing-5)}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:py-2\\u005c.5 button.lang{padding-block:var(--spacing-2_5)}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:text-sm button.lang{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}@media (hover:hover){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:bg-plain-light button.lang:hover{background-color:var(--color-plain-light)}}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:rounded button.lang{border-radius:var(--radius)}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:border button.lang{border-style:var(--tw-border-style);border-width:1px}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:transition-colors button.lang{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_button.lang]&quot;:{&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;5&quot;,&quot;y&quot;:&quot;2.5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksSelectors&quot;:[],&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}}},&quot;[\\u0026_.lang]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1.5&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-block&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Flag dropdown<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><div class=\"ska-language-switcher inline-block [&amp;_.lang]:flex relative [&amp;_.lang]:flex-row [&amp;_.lang]:gap-1.5 [&amp;_.lang]:justify-start [&amp;_.lang]:items-center [&amp;_button.lang]:px-3.5 [&amp;_button.lang]:py-2.5 [&amp;_button.lang]:hover:bg-plain-light [&amp;_button.lang]:rounded [&amp;_button.lang]:border [&amp;_button.lang]:transition-colors [&amp;_button.lang]:[&amp;&gt;.label]:sr-only\" x-data=\"skaDropdown({on:'click',placement:'bottom-start'})\"><div x-bind=\"item('ska-language-switcher-2')\"><button class=\"lang active\" type=\"button\" aria-label=\"Open language switcher (current language: English)\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><template x-bind=\"dropdown('ska-language-switcher-2')\"><ul class=\"ska-preset--ska-theme--dropdown\"><li class=\"active\" data-language-id=\"placeholder-1\" data-language-code=\"en\" data-has-translation=\"true\"><a class=\"lang active\" href=\"#\" hreflang=\"en\" aria-label=\"Switch to language: English\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><\/a><\/li><li data-language-id=\"placeholder-2\" data-language-code=\"et\" data-has-translation=\"true\"><a class=\"lang\" href=\"#\" hreflang=\"et\" aria-label=\"Switch to language: Eesti\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiM0NjQ2NTUiIGQ9Ik0zNiAwSDB2MjRoMzZWMFoiLz48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMTZIMHY4aDM2di04WiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2OGgzNlYwWiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjRIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=\" alt=\"Eesti flag\" \/><span class=\"label\">Eesti<\/span><\/a><\/li><li data-language-id=\"placeholder-3\" data-language-code=\"fi\" data-has-translation=\"false\"><a class=\"lang\" href=\"#\" hreflang=\"fi\" aria-label=\"Switch to language: Suomi\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMEgwdjIzLjk4OGgzNlYwWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiA5LjEyMkgwdjUuOTk4aDM2VjkuMTIyWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0xNiAwaC02djIzLjk4OGg2VjBaIi8+PC9zdmc+\" alt=\"Suomi flag\" \/><span class=\"label\">Suomi<\/span><\/a><\/li><\/ul><\/template><\/div><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/language-switcher {&quot;mode&quot;:&quot;dropdown&quot;,&quot;dropdownActivation&quot;:&quot;click&quot;,&quot;dropdownPlacement&quot;:&quot;bottom-start&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-block [\\u0026_.lang]:flex relative [\\u0026_.lang]:flex-row [\\u0026_.lang]:gap-1.5 [\\u0026_.lang]:justify-start [\\u0026_.lang]:items-center [\\u0026_button.lang]:px-3.5 [\\u0026_button.lang]:py-2.5 [\\u0026_button.lang]:hover:bg-plain-light [\\u0026_button.lang]:rounded [\\u0026_button.lang]:border [\\u0026_button.lang]:transition-colors [\\u0026_button.lang]:[\\u0026\\u003e.label]:sr-only&quot;,&quot;css&quot;:&quot;.inline-block{display:inline-block}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex .lang{display:flex}.relative{position:relative}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex-row .lang{flex-direction:row}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:gap-1\\u005c.5 .lang{gap:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:justify-start .lang{justify-content:flex-start}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:items-center .lang{align-items:center}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:px-3\\u005c.5 button.lang{padding-inline:var(--spacing-3_5)}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:py-2\\u005c.5 button.lang{padding-block:var(--spacing-2_5)}@media (hover:hover){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:bg-plain-light button.lang:hover{background-color:var(--color-plain-light)}}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:rounded button.lang{border-radius:var(--radius)}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:border button.lang{border-style:var(--tw-border-style);border-width:1px}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:transition-colors button.lang{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.label\\u005c]\\u005c:sr-only button.lang\\u003e.label{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_button.lang]&quot;:{&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;3.5&quot;,&quot;y&quot;:&quot;2.5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksSelectors&quot;:[],&quot;skaBlocksScreenReaders&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;[\\u0026\\u003e.label]&quot;:{&quot;@&quot;:&quot;sr-only&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}}},&quot;[\\u0026_.lang]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1.5&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-block&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Circular flag dropdown<\/h3>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\"><div class=\"ska-language-switcher [&amp;_button.lang]:[&amp;&gt;img]:aspect-square inline-block [&amp;_button.lang]:[&amp;&gt;.dropdown-icon]:hidden [&amp;_.lang]:flex [&amp;_button.lang]:[&amp;&gt;img]:object-cover relative [&amp;_.lang]:flex-row shrink-0 [&amp;_.lang]:gap-1.5 [&amp;_.lang]:justify-start [&amp;_.lang]:items-center [&amp;_button.lang]:p-2.5 [&amp;_button.lang]:[&amp;&gt;img]:size-6 [&amp;_button.lang]:hover:bg-primary-light\/15 [&amp;_button.lang]:rounded-full [&amp;_button.lang]:[&amp;&gt;img]:rounded-full [&amp;_button.lang]:not-hover:opacity-75 [&amp;_button.lang]:transition-colors [&amp;_button.lang]:[&amp;&gt;.label]:sr-only\" x-data=\"skaDropdown({on:'hover',placement:'bottom'})\"><div x-bind=\"item('ska-language-switcher-3')\"><button class=\"lang active\" type=\"button\" aria-label=\"Open language switcher (current language: English)\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><template x-bind=\"dropdown('ska-language-switcher-3')\"><ul class=\"ska-preset--ska-theme--dropdown\"><li class=\"active\" data-language-id=\"placeholder-1\" data-language-code=\"en\" data-has-translation=\"true\"><a class=\"lang active\" href=\"#\" hreflang=\"en\" aria-label=\"Switch to language: English\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><\/a><\/li><li data-language-id=\"placeholder-2\" data-language-code=\"et\" data-has-translation=\"true\"><a class=\"lang\" href=\"#\" hreflang=\"et\" aria-label=\"Switch to language: Eesti\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiM0NjQ2NTUiIGQ9Ik0zNiAwSDB2MjRoMzZWMFoiLz48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMTZIMHY4aDM2di04WiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2OGgzNlYwWiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjRIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=\" alt=\"Eesti flag\" \/><span class=\"label\">Eesti<\/span><\/a><\/li><li data-language-id=\"placeholder-3\" data-language-code=\"fi\" data-has-translation=\"false\"><a class=\"lang\" href=\"#\" hreflang=\"fi\" aria-label=\"Switch to language: Suomi\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMEgwdjIzLjk4OGgzNlYwWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiA5LjEyMkgwdjUuOTk4aDM2VjkuMTIyWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0xNiAwaC02djIzLjk4OGg2VjBaIi8+PC9zdmc+\" alt=\"Suomi flag\" \/><span class=\"label\">Suomi<\/span><\/a><\/li><\/ul><\/template><\/div><\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/language-switcher {&quot;mode&quot;:&quot;dropdown&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[\\u0026_button.lang]:[\\u0026\\u003eimg]:aspect-square inline-block [\\u0026_button.lang]:[\\u0026\\u003e.dropdown-icon]:hidden [\\u0026_.lang]:flex [\\u0026_button.lang]:[\\u0026\\u003eimg]:object-cover relative [\\u0026_.lang]:flex-row shrink-0 [\\u0026_.lang]:gap-1.5 [\\u0026_.lang]:justify-start [\\u0026_.lang]:items-center [\\u0026_button.lang]:p-2.5 [\\u0026_button.lang]:[\\u0026\\u003eimg]:size-6 [\\u0026_button.lang]:hover:bg-primary-light\/15 [\\u0026_button.lang]:rounded-full [\\u0026_button.lang]:[\\u0026\\u003eimg]:rounded-full [\\u0026_button.lang]:not-hover:opacity-75 [\\u0026_button.lang]:transition-colors [\\u0026_button.lang]:[\\u0026\\u003e.label]:sr-only&quot;,&quot;css&quot;:&quot;.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:aspect-square button.lang\\u003eimg{aspect-ratio:1}.inline-block{display:inline-block}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.dropdown-icon\\u005c]\\u005c:hidden button.lang\\u003e.dropdown-icon{display:none}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex .lang{display:flex}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:object-cover button.lang\\u003eimg{object-fit:cover}.relative{position:relative}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex-row .lang{flex-direction:row}.shrink-0{flex-shrink:0}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:gap-1\\u005c.5 .lang{gap:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:justify-start .lang{justify-content:flex-start}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:items-center .lang{align-items:center}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:p-2\\u005c.5 button.lang{padding:var(--spacing-2_5)}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:size-6 button.lang\\u003eimg{width:var(--spacing-6);height:var(--spacing-6)}@media (hover:hover){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:bg-primary-light\\u005c\/15 button.lang:hover{background-color:color-mix(in srgb,color-mix(in oklab,var(--color-primary),white 10%)15%,transparent)}@supports (color:color-mix(in lab, red, red)){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:bg-primary-light\\u005c\/15 button.lang:hover{background-color:color-mix(in oklab,var(--color-primary-light)15%,transparent)}}}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:rounded-full button.lang{border-radius:3.40282e38px}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:rounded-full button.lang\\u003eimg{border-radius:3.40282e38px}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:not-hover\\u005c:opacity-75 button.lang:not(:hover){opacity:.75}@media not all and (hover:hover){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:not-hover\\u005c:opacity-75 button.lang{opacity:.75}}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:transition-colors button.lang{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.label\\u005c]\\u005c:sr-only button.lang\\u003e.label{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksRender&quot;:{&quot;noRender&quot;:false},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_button.lang]&quot;:{&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2.5&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;&quot;}},&quot;t&quot;:&quot;default&quot;},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003e.label]&quot;:{&quot;skaBlocksScreenReaders&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sr-only&quot;}}}},&quot;[\\u0026\\u003e.dropdown-icon]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}}},&quot;[\\u0026\\u003eimg]&quot;:{&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksAspectRatio&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;square&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;6&quot;}},&quot;a&quot;:[&quot;[1.4rem]&quot;]},&quot;skaBlocksObjectFit&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;cover&quot;}}}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;primary-light\/15&quot;}},&quot;a&quot;:[]},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}},&quot;skaBlocksOpacity&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;not-hover&quot;:{&quot;@&quot;:&quot;75&quot;}}}},&quot;[\\u0026_.lang]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1.5&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-block&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksFlexShrink&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}}} \/--&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Custom icon<\/h3>\n\n\n\n<p>It&#8217;s not possible to configure the Language Switcher block to use an icon, but it can be wrapped in a container element that has an icon (<a href=\"https:\/\/ska-blocks.com\/docs\/image-block\/\" data-type=\"post\" data-id=\"54\">Image block<\/a> in &#8220;Icon&#8221; mode) and the language switcher (with flag\/label hidden), producing the desired result.<\/p>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"inline-flex relative items-center rounded border wp-block-ska-element\"><div class=\"ska-language-switcher inline-block [&amp;_.lang]:flex relative [&amp;_button.lang]:[&amp;&gt;img]:invisible [&amp;_.lang]:flex-row shrink-0 [&amp;_.lang]:gap-1.5 [&amp;_.lang]:justify-start [&amp;_.lang]:items-center [&amp;_button.lang]:p-2.5 [&amp;_button.lang]:hover:bg-plain-light [&amp;_button.lang]:rounded [&amp;_button.lang]:[&amp;&gt;img]:opacity-0 [&amp;_button.lang]:transition-colors [&amp;_button.lang]:[&amp;&gt;.label]:sr-only\" x-data=\"skaDropdown({on:'hover',placement:'bottom'})\"><div x-bind=\"item('ska-language-switcher-4')\"><button class=\"lang active\" type=\"button\" aria-label=\"Open language switcher (current language: English)\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><template x-bind=\"dropdown('ska-language-switcher-4')\"><ul class=\"ska-preset--ska-theme--dropdown\"><li class=\"active\" data-language-id=\"placeholder-1\" data-language-code=\"en\" data-has-translation=\"true\"><a class=\"lang active\" href=\"#\" hreflang=\"en\" aria-label=\"Switch to language: English\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><\/a><\/li><li data-language-id=\"placeholder-2\" data-language-code=\"et\" data-has-translation=\"true\"><a class=\"lang\" href=\"#\" hreflang=\"et\" aria-label=\"Switch to language: Eesti\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiM0NjQ2NTUiIGQ9Ik0zNiAwSDB2MjRoMzZWMFoiLz48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMTZIMHY4aDM2di04WiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2OGgzNlYwWiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjRIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=\" alt=\"Eesti flag\" \/><span class=\"label\">Eesti<\/span><\/a><\/li><li data-language-id=\"placeholder-3\" data-language-code=\"fi\" data-has-translation=\"false\"><a class=\"lang\" href=\"#\" hreflang=\"fi\" aria-label=\"Switch to language: Suomi\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMEgwdjIzLjk4OGgzNlYwWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiA5LjEyMkgwdjUuOTk4aDM2VjkuMTIyWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0xNiAwaC02djIzLjk4OGg2VjBaIi8+PC9zdmc+\" alt=\"Suomi flag\" \/><span class=\"label\">Suomi<\/span><\/a><\/li><\/ul><\/template><\/div>\n\n\n<div aria-hidden=\"true\" class=\"grid absolute place-items-center ml-3 size-5 text-current pointer-events-none wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t<path d=\"M10.5 21L15.75 9.75L21 21M12 18H19.5M3 5.62136C4.96557 5.37626 6.96804 5.25 9 5.25M9 5.25C10.1208 5.25 11.2326 5.28841 12.3343 5.364M9 5.25V3M12.3343 5.364C11.1763 10.6578 7.68868 15.0801 3 17.5023M12.3343 5.364C13.2298 5.42545 14.1186 5.51146 15 5.62136M10.4113 14.1162C8.78554 12.4619 7.47704 10.4949 6.58432 8.31366\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n<\/svg><\/div>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-flex relative items-center rounded border&quot;,&quot;css&quot;:&quot;.inline-flex{display:inline-flex}.relative{position:relative}.items-center{align-items:center}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-flex&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;inline-flex relative items-center rounded border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/language-switcher {&quot;mode&quot;:&quot;dropdown&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-block [\\u0026_.lang]:flex relative [\\u0026_button.lang]:[\\u0026\\u003eimg]:invisible [\\u0026_.lang]:flex-row shrink-0 [\\u0026_.lang]:gap-1.5 [\\u0026_.lang]:justify-start [\\u0026_.lang]:items-center [\\u0026_button.lang]:p-2.5 [\\u0026_button.lang]:hover:bg-plain-light [\\u0026_button.lang]:rounded [\\u0026_button.lang]:[\\u0026\\u003eimg]:opacity-0 [\\u0026_button.lang]:transition-colors [\\u0026_button.lang]:[\\u0026\\u003e.label]:sr-only&quot;,&quot;css&quot;:&quot;.inline-block{display:inline-block}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex .lang{display:flex}.relative{position:relative}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:invisible button.lang\\u003eimg{visibility:hidden}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex-row .lang{flex-direction:row}.shrink-0{flex-shrink:0}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:gap-1\\u005c.5 .lang{gap:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:justify-start .lang{justify-content:flex-start}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:items-center .lang{align-items:center}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:p-2\\u005c.5 button.lang{padding:var(--spacing-2_5)}@media (hover:hover){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:bg-plain-light button.lang:hover{background-color:var(--color-plain-light)}}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:rounded button.lang{border-radius:var(--radius)}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:opacity-0 button.lang\\u003eimg{opacity:0}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:transition-colors button.lang{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.label\\u005c]\\u005c:sr-only button.lang\\u003e.label{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksRender&quot;:{&quot;noRender&quot;:false},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_button.lang]&quot;:{&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2.5&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;&quot;}},&quot;t&quot;:&quot;default&quot;},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003e.label]&quot;:{&quot;skaBlocksScreenReaders&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sr-only&quot;}}}},&quot;[\\u0026\\u003e.dropdown-icon]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;}}}},&quot;[\\u0026\\u003eimg]&quot;:{&quot;skaBlocksOpacity&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksVisibility&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;invisible&quot;}}}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}}},&quot;[\\u0026_.lang]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1.5&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-block&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksFlexShrink&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}}} \/--&gt;\n\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg data-svg-width=\\u002224\\u0022 data-svg-height=\\u002224\\u0022 viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\n\\t\\u003cpath d=\\u0022M10.5 21L15.75 9.75L21 21M12 18H19.5M3 5.62136C4.96557 5.37626 6.96804 5.25 9 5.25M9 5.25C10.1208 5.25 11.2326 5.28841 12.3343 5.364M9 5.25V3M12.3343 5.364C11.1763 10.6578 7.68868 15.0801 3 17.5023M12.3343 5.364C13.2298 5.42545 14.1186 5.51146 15 5.62136M10.4113 14.1162C8.78554 12.4619 7.47704 10.4949 6.58432 8.31366\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00221.5\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022 \/\\u003e\\n\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/outline\/language&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;grid absolute place-items-center ml-3 size-5 text-current pointer-events-none&quot;,&quot;css&quot;:&quot;.grid{display:grid}.absolute{position:absolute}.place-items-center{place-items:center}.ml-3{margin-left:var(--spacing-3)}.size-5{width:var(--spacing-5);height:var(--spacing-5)}.text-current{color:currentColor}.pointer-events-none{pointer-events:none}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;grid&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksPlaceItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;5&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}},&quot;skaBlocksPointerEvents&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;none&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;grid absolute place-items-center ml-3 size-5 text-current pointer-events-none wp-block-ska-image&quot;&gt;\n&lt;svg data-svg-width=&quot;24&quot; data-svg-height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n\t&lt;path d=&quot;M10.5 21L15.75 9.75L21 21M12 18H19.5M3 5.62136C4.96557 5.37626 6.96804 5.25 9 5.25M9 5.25C10.1208 5.25 11.2326 5.28841 12.3343 5.364M9 5.25V3M12.3343 5.364C11.1763 10.6578 7.68868 15.0801 3 17.5023M12.3343 5.364C13.2298 5.42545 14.1186 5.51146 15 5.62136M10.4113 14.1162C8.78554 12.4619 7.47704 10.4949 6.58432 8.31366&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;\/path&gt;\n&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"aspect-square inline-flex relative items-center bg-plain-light hover:bg-plain rounded-full border transition-colors wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"grid absolute inset-0 place-items-center p-2 size-full text-current pointer-events-none wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t<path d=\"M12 21C16.1926 21 19.7156 18.1332 20.7157 14.2529M12 21C7.80742 21 4.28442 18.1332 3.2843 14.2529M12 21C14.4853 21 16.5 16.9706 16.5 12C16.5 7.02944 14.4853 3 12 3M12 21C9.51472 21 7.5 16.9706 7.5 12C7.5 7.02944 9.51472 3 12 3M12 3C15.3652 3 18.299 4.84694 19.8431 7.58245M12 3C8.63481 3 5.70099 4.84694 4.15692 7.58245M19.8431 7.58245C17.7397 9.40039 14.9983 10.5 12 10.5C9.00172 10.5 6.26027 9.40039 4.15692 7.58245M19.8431 7.58245C20.5797 8.88743 21 10.3946 21 12C21 12.778 20.9013 13.5329 20.7157 14.2529M20.7157 14.2529C18.1334 15.6847 15.1619 16.5 12 16.5C8.8381 16.5 5.86662 15.6847 3.2843 14.2529M3.2843 14.2529C3.09871 13.5329 3 12.778 3 12C3 10.3946 3.42032 8.88743 4.15692 7.58245\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n<\/svg><\/div>\n\n\n<div class=\"ska-language-switcher inline-block [&amp;_button.lang]:[&amp;&gt;.dropdown-icon]:hidden [&amp;_.lang]:flex relative [&amp;_button.lang]:[&amp;&gt;img]:invisible [&amp;_.lang]:flex-row shrink-0 [&amp;_.lang]:gap-1.5 [&amp;_.lang]:justify-start [&amp;_.lang]:items-center [&amp;_button.lang]:p-2.5 [&amp;_button.lang]:hover:bg-(--contrast-color)\/15 [&amp;_button.lang]:rounded-full [&amp;_button.lang]:[&amp;&gt;img]:rounded-full [&amp;_button.lang]:opacity-85 [&amp;_button.lang]:hover:opacity-100 [&amp;_button.lang]:[&amp;&gt;img]:opacity-0 [&amp;_button.lang]:transition-colors [&amp;_button.lang]:[&amp;&gt;.label]:sr-only\" x-data=\"skaDropdown({on:'hover',placement:'bottom'})\"><div x-bind=\"item('ska-language-switcher-5')\"><button class=\"lang active\" type=\"button\" aria-label=\"Open language switcher (current language: English)\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><svg class=\"dropdown-icon\" aria-hidden=\"true\" viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><template x-bind=\"dropdown('ska-language-switcher-5')\"><ul class=\"ska-preset--ska-theme--dropdown\"><li class=\"active\" data-language-id=\"placeholder-1\" data-language-code=\"en\" data-has-translation=\"true\"><a class=\"lang active\" href=\"#\" hreflang=\"en\" aria-label=\"Switch to language: English\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2MjMuOTk2aDM2VjBaIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMzYgMHYyLjVsLTkuMDUyIDYuMDMzLTIuMDggMS4zODYtMy4xMTkgMi4wNzkgMy4xMiAyLjA4TDM2IDIxLjQ5NnYyLjQ5OWgtMy43NWwtMTAuNzg0LTcuMTg4LTEuMzg2LS45MjVMMTggMTQuNDk3bC0yLjA4IDEuMzg2LTEuMzg2LjkyNS0xMC43ODUgNy4xODhIMHYtMi41bDkuMDUyLTYuMDMzIDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMi40OTlWMGgzLjc1bDEwLjc4NCA3LjE4OCAxLjM4Ni45MjVMMTggOS40OTlsMi4wOC0xLjM4NiAxLjM4Ni0uOTI1TDMyLjI1MSAwSDM2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0ZGNEI1NSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjMuNjE4IDkuOTE5LTMuMTIgMi4wNzkgMy4xMiAyLjA4IDIuMDggMS4zODVMMzYgMjIuMzMxdjEuNjY1aC0yLjQ5OGwtMTIuMDM2LTguMDIzLTEuMzg2LS45MjRMMTggMTMuNjYzbC0yLjA4IDEuMzg2LTEuMzg2LjkyNC0xMi4wMzYgOC4wMjNIMHYtMS42NjVsMTAuMzAzLTYuODY4IDIuMDgtMS4zODYgMy4xMTktMi4wNzktMy4xMi0yLjA4LTIuMDc5LTEuMzg1TDAgMS42NjVWMGgyLjQ5OGwxMi4wMzYgOC4wMjMgMS4zODYuOTI0TDE4IDEwLjMzM2wyLjA4LTEuMzg2IDEuMzg2LS45MjRMMzMuNTAyIDBIMzZ2MS42NjVMMjUuNjk3IDguNTMzbC0yLjA4IDEuMzg2WiIgY2xpcC1ydWxlPSJldmVub2RkIi8+PHBhdGggZmlsbD0iI0YwRjBGMCIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMjEuNDY2IDE1LjQ2NHY4LjUzMmgtNi45MzJ2LTguNTMySDBWOC41MzNoMTQuNTM0VjBoNi45MzJ2OC41MzNIMzZ2Ni45M0gyMS40NjZaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBmaWxsPSIjRkY0QjU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMC4wOCAxNC4wNzd2OS45MTloLTQuMTZ2LTkuOTE5SDBWOS45MmgxNS45MlYwaDQuMTZWOS45MkgzNnY0LjE1OEgyMC4wOFoiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjMuOTk2SDB6Ii8+PC9jbGlwUGF0aD48L2RlZnM+PC9zdmc+\" alt=\"English flag\" \/><span class=\"label\">English<\/span><\/a><\/li><li data-language-id=\"placeholder-2\" data-language-code=\"et\" data-has-translation=\"true\"><a class=\"lang\" href=\"#\" hreflang=\"et\" aria-label=\"Switch to language: Eesti\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGZpbGw9IiM0NjQ2NTUiIGQ9Ik0zNiAwSDB2MjRoMzZWMFoiLz48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMTZIMHY4aDM2di04WiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiAwSDB2OGgzNlYwWiIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImEiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMzZ2MjRIMHoiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=\" alt=\"Eesti flag\" \/><span class=\"label\">Eesti<\/span><\/a><\/li><li data-language-id=\"placeholder-3\" data-language-code=\"fi\" data-has-translation=\"false\"><a class=\"lang\" href=\"#\" hreflang=\"fi\" aria-label=\"Switch to language: Suomi\"><img decoding=\"async\" class=\"flag\" src=\"data:image\/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgZmlsbD0ibm9uZSIgdmlld0JveD0iMCAwIDM2IDI0Ij48cGF0aCBmaWxsPSIjRjBGMEYwIiBkPSJNMzYgMEgwdjIzLjk4OGgzNlYwWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0zNiA5LjEyMkgwdjUuOTk4aDM2VjkuMTIyWiIvPjxwYXRoIGZpbGw9IiMwMDUyQjQiIGQ9Ik0xNiAwaC02djIzLjk4OGg2VjBaIi8+PC9zdmc+\" alt=\"Suomi flag\" \/><span class=\"label\">Suomi<\/span><\/a><\/li><\/ul><\/template><\/div><\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;aspect-square inline-flex relative items-center bg-plain-light hover:bg-plain rounded-full border transition-colors&quot;,&quot;css&quot;:&quot;.aspect-square{aspect-ratio:1}.inline-flex{display:inline-flex}.relative{position:relative}.items-center{align-items:center}.bg-plain-light{background-color:var(--color-plain-light)}@media (hover:hover){.hover\\u005c:bg-plain:hover{background-color:var(--color-plain)}}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksAspectRatio&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;square&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-flex&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;plain&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}}} --&gt;\n&lt;div class=&quot;aspect-square inline-flex relative items-center bg-plain-light hover:bg-plain rounded-full border transition-colors wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg data-svg-width=\\u002224\\u0022 data-svg-height=\\u002224\\u0022 viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\n\\t\\u003cpath d=\\u0022M12 21C16.1926 21 19.7156 18.1332 20.7157 14.2529M12 21C7.80742 21 4.28442 18.1332 3.2843 14.2529M12 21C14.4853 21 16.5 16.9706 16.5 12C16.5 7.02944 14.4853 3 12 3M12 21C9.51472 21 7.5 16.9706 7.5 12C7.5 7.02944 9.51472 3 12 3M12 3C15.3652 3 18.299 4.84694 19.8431 7.58245M12 3C8.63481 3 5.70099 4.84694 4.15692 7.58245M19.8431 7.58245C17.7397 9.40039 14.9983 10.5 12 10.5C9.00172 10.5 6.26027 9.40039 4.15692 7.58245M19.8431 7.58245C20.5797 8.88743 21 10.3946 21 12C21 12.778 20.9013 13.5329 20.7157 14.2529M20.7157 14.2529C18.1334 15.6847 15.1619 16.5 12 16.5C8.8381 16.5 5.86662 15.6847 3.2843 14.2529M3.2843 14.2529C3.09871 13.5329 3 12.778 3 12C3 10.3946 3.42032 8.88743 4.15692 7.58245\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00221.5\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022 \/\\u003e\\n\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/outline\/globe-alt&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;grid absolute inset-0 place-items-center p-2 size-full text-current pointer-events-none&quot;,&quot;css&quot;:&quot;.grid{display:grid}.absolute{position:absolute}.inset-0{inset:var(--spacing-0)}.place-items-center{place-items:center}.p-2{padding:var(--spacing-2)}.size-full{width:100%;height:100%}.text-current{color:currentColor}.pointer-events-none{pointer-events:none}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;grid&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;i&quot;:&quot;0&quot;}},&quot;t&quot;:&quot;inset&quot;},&quot;skaBlocksPlaceItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}},&quot;skaBlocksPointerEvents&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;none&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;grid absolute inset-0 place-items-center p-2 size-full text-current pointer-events-none wp-block-ska-image&quot;&gt;\n&lt;svg data-svg-width=&quot;24&quot; data-svg-height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n\t&lt;path d=&quot;M12 21C16.1926 21 19.7156 18.1332 20.7157 14.2529M12 21C7.80742 21 4.28442 18.1332 3.2843 14.2529M12 21C14.4853 21 16.5 16.9706 16.5 12C16.5 7.02944 14.4853 3 12 3M12 21C9.51472 21 7.5 16.9706 7.5 12C7.5 7.02944 9.51472 3 12 3M12 3C15.3652 3 18.299 4.84694 19.8431 7.58245M12 3C8.63481 3 5.70099 4.84694 4.15692 7.58245M19.8431 7.58245C17.7397 9.40039 14.9983 10.5 12 10.5C9.00172 10.5 6.26027 9.40039 4.15692 7.58245M19.8431 7.58245C20.5797 8.88743 21 10.3946 21 12C21 12.778 20.9013 13.5329 20.7157 14.2529M20.7157 14.2529C18.1334 15.6847 15.1619 16.5 12 16.5C8.8381 16.5 5.86662 15.6847 3.2843 14.2529M3.2843 14.2529C3.09871 13.5329 3 12.778 3 12C3 10.3946 3.42032 8.88743 4.15692 7.58245&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;\/path&gt;\n&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;!-- wp:ska\/language-switcher {&quot;mode&quot;:&quot;dropdown&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;inline-block [\\u0026_button.lang]:[\\u0026\\u003e.dropdown-icon]:hidden [\\u0026_.lang]:flex relative [\\u0026_button.lang]:[\\u0026\\u003eimg]:invisible [\\u0026_.lang]:flex-row shrink-0 [\\u0026_.lang]:gap-1.5 [\\u0026_.lang]:justify-start [\\u0026_.lang]:items-center [\\u0026_button.lang]:p-2.5 [\\u0026_button.lang]:hover:bg-(--contrast-color)\/15 [\\u0026_button.lang]:rounded-full [\\u0026_button.lang]:[\\u0026\\u003eimg]:rounded-full [\\u0026_button.lang]:opacity-85 [\\u0026_button.lang]:hover:opacity-100 [\\u0026_button.lang]:[\\u0026\\u003eimg]:opacity-0 [\\u0026_button.lang]:transition-colors [\\u0026_button.lang]:[\\u0026\\u003e.label]:sr-only&quot;,&quot;css&quot;:&quot;.inline-block{display:inline-block}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.dropdown-icon\\u005c]\\u005c:hidden button.lang\\u003e.dropdown-icon{display:none}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex .lang{display:flex}.relative{position:relative}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:invisible button.lang\\u003eimg{visibility:hidden}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:flex-row .lang{flex-direction:row}.shrink-0{flex-shrink:0}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:gap-1\\u005c.5 .lang{gap:var(--spacing-1_5)}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:justify-start .lang{justify-content:flex-start}.\\u005c[\\u005c\\u0026_\\u005c.lang\\u005c]\\u005c:items-center .lang{align-items:center}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:p-2\\u005c.5 button.lang{padding:var(--spacing-2_5)}@media (hover:hover){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:bg-\\u005c(--contrast-color\\u005c)\\u005c\/15 button.lang:hover{background-color:var(--contrast-color)}@supports (color:color-mix(in lab, red, red)){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:bg-\\u005c(--contrast-color\\u005c)\\u005c\/15 button.lang:hover{background-color:color-mix(in oklab,var(--contrast-color)15%,transparent)}}}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:rounded-full button.lang{border-radius:3.40282e38px}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:rounded-full button.lang\\u003eimg{border-radius:3.40282e38px}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:opacity-85 button.lang{opacity:.85}@media (hover:hover){.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:hover\\u005c:opacity-100 button.lang:hover{opacity:1}}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003eimg\\u005c]\\u005c:opacity-0 button.lang\\u003eimg{opacity:0}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:transition-colors button.lang{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.\\u005c[\\u005c\\u0026_button\\u005c.lang\\u005c]\\u005c:\\u005c[\\u005c\\u0026\\u005c\\u003e\\u005c.label\\u005c]\\u005c:sr-only button.lang\\u003e.label{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksRender&quot;:{&quot;noRender&quot;:false},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026_button.lang]&quot;:{&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2.5&quot;,&quot;x&quot;:&quot;&quot;,&quot;y&quot;:&quot;&quot;}},&quot;t&quot;:&quot;default&quot;},&quot;skaBlocksSelectors&quot;:{&quot;[\\u0026\\u003e.label]&quot;:{&quot;skaBlocksScreenReaders&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sr-only&quot;}}}},&quot;[\\u0026\\u003e.dropdown-icon]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;hidden&quot;}}}},&quot;[\\u0026\\u003eimg]&quot;:{&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksOpacity&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksVisibility&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;invisible&quot;}}}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;(--contrast-color)\/15&quot;}},&quot;a&quot;:[&quot;(--contrast-color)&quot;]},&quot;skaBlocksTransitionProperty&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;colors&quot;}}},&quot;skaBlocksOpacity&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;85&quot;},&quot;hover&quot;:{&quot;@&quot;:&quot;100&quot;}}}},&quot;[\\u0026_.lang]&quot;:{&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1.5&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;start&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;inline-block&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksFlexShrink&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}}} \/--&gt;&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Block options<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Mode<\/h3>\n\n\n\n<p>The block can be in &#8220;List&#8221; mode to render a basic <code>&lt;ul&gt; &gt; &lt;li&gt;<\/code> of the languages, or in &#8220;Dropdown&#8221; mode which utilizes the <a href=\"https:\/\/ska-blocks.com\/docs\/ska-theme\/dropdown\/\" data-type=\"post\" data-id=\"530\">Dropdown module<\/a> to show other languages in a dropdown.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Label<\/h3>\n\n\n\n<p>Allows to choose which language label to render: Name, Native name, Translated name, language Code or none. Additional customizations can be made with the following filter:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Custom language switcher label<\/span><span class=\"label language-php\">PHP<\/span><\/header><div class=\"content\"><pre class=\"code php language-php\"><code class=\"language-php\">\/**\n * @param string $label\n * @param array{id: string, code: string, name: string, native_name: string, translated_name: string, is_active: bool, has_translation: bool, url: string, flag_url: string} $lang\n * @param ?string $context 'button'|'item'\n * @return string\n *\/\nadd_filter('ska_blocks_language_switcher_label', function($label, $lang, $context) {\n\treturn sprintf(\n\t\t'%1$s (%2$s)', \n\t\tesc_attr($lang&#91;'native_name']), \n\t\tesc_attr($lang&#91;'translated_name'])\n\t);\n}, 10, 3);<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Toggles<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Show language flag<\/li>\n\n\n\n<li>Show active languages<\/li>\n\n\n\n<li>Show inactive languages<\/li>\n\n\n\n<li>Show missing languages<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The Language switcher block can display a placeholder language switcher when a multilingual plugin isn&#8217;t installed yet, but will switch to using languages from WPML or Polylang once detected. Block options Mode The block can be in &#8220;List&#8221; mode to render a basic &lt;ul&gt; &gt; &lt;li&gt; of the languages, or in &#8220;Dropdown&#8221; mode which utilizes&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[4],"class_list":["post-16","post","type-post","status-publish","format-standard","hentry","category-ska-theme","tag-blocks"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=16"}],"version-history":[{"count":7,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/16\/revisions"}],"predecessor-version":[{"id":619,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/16\/revisions\/619"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=16"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}