Elementor Expandable Search

template.json

{"content":[{"id":"41c39ea4","settings":{"content_width":"full","flex_direction":"row","flex_align_items":"center","_element_id":"search-container","custom_css":"#search-container{\r\n    --open-width: 200px;\r\n}\r\n.search-icon-wrapper {\r\n    position: relative;\r\n    display: inline-block;\r\n    \r\n}\r\n\r\n.search-toggle {\r\n    display: none;\r\n}\r\n\r\n.search-icon {\r\n    cursor: pointer;\r\n    font-size: 20px;\r\n    display: inline-block;\r\n    padding: 5px;\r\n    transition: color 0.3s;\r\n    color: #333;\r\n}\r\n\r\n.search-icon:hover {\r\n    color: #0073e6;\r\n}\r\n\r\n#search-container .e-search-input {\r\n    max-width: 0;\r\n    width: var(--open-width)x;\r\n    opacity: 0;\r\n    transition: max-width 0.6s ease, opacity 0.3s ease;\r\n}\r\n\r\n#search-container:has(:checked) .e-search-input {\r\n    max-width: var(--open-width);\r\n    opacity: 1;\r\n}","_title":"Search Container"},"elements":[{"id":"6e60c52d","settings":{"html":"<div class=\"search-icon-wrapper\">\r\n  <input type=\"checkbox\" id=\"search-toggle\" class=\"search-toggle\" \/>\r\n  <label for=\"search-toggle\" class=\"search-icon\">\r\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" width=\"20\" height=\"20\">\r\n      <circle cx=\"11\" cy=\"11\" r=\"7\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" \/>\r\n      <line x1=\"16.5\" y1=\"16.5\" x2=\"21\" y2=\"21\" stroke=\"currentColor\" stroke-width=\"2\" \/>\r\n    <\/svg>\r\n  <\/label>\r\n<\/div>\r\n\r\n\r\n"},"elements":[],"isInner":false,"widgetType":"html","elType":"widget"},{"id":"85f77df","settings":{"search_input_placeholder_text":"Type to start searching...","submit_trigger":"key_enter","submit_button_text":"Search","nothing_found_message_text":"It seems we can\u2019t find what you\u2019re looking for.","pagination_prev_label":"Previous","pagination_next_label":"Next"},"elements":[],"isInner":false,"widgetType":"search","elType":"widget"}],"isInner":true,"elType":"container"}],"page_settings":[],"version":"0.4","title":"ExpandableSearch","type":"container"}