.dds-search-field{& input{order:1;width:100%;clip-path:var(--clip-path-search-field-right-0)}& button,& input{border-radius:var(--border-radius-search-field-0)}& button{order:2}&.dds-search-field--submit-button-none{& input{border-radius:var(--border-radius-input-default);clip-path:none}}}.dds-search-field__wrapper{display:flex;position:relative}.dds-search-field__input-wrapper{width:100%;position:relative}.dds-search-field__search-icon-wrapper,.dds-search-field__secondary-button-wrapper{position:absolute;right:0;bottom:0;display:flex;align-items:center;justify-content:center;height:var(--dimension-input-m);margin-right:var(--spacing-2xs);svg{width:var(--spacing-m);height:var(--spacing-m)}}.dds-search-field__secondary-button-wrapper{svg.dds-search-field__clear-icon{fill:var(--color-input-icon-default)}&:hover{svg.dds-search-field__clear-icon{fill:var(--color-input-icon-hover)}}}.dds-search-field__search-icon-wrapper{width:var(--dimension-2xl);right:8px}.dds-search-field--submit-button-none .dds-search-field__secondary-button-wrapper{right:calc(var(--dimension-input-xs) + var(--spacing-2xs))}.dds-search-field__search-icon{width:var(--dimension-input-xs);fill:var(--color-search-field-icon)}.dds-search-field__secondary-button{position:relative;border-radius:var(--border-radius-button-control)}.dds-search-field__with-secondary-button{padding-right:var(--dimension-input-m)}.dds-search-field--large{.dds-search-field__search-icon-wrapper,.dds-search-field__secondary-button-wrapper{height:var(--dimension-input-l);svg{width:auto;height:auto}}.dds-search-field__with-secondary-button{padding-right:var(--dimension-input-l)}}.dds-search-field--geolocation:has(input:focus) .dds-search-field__with-secondary-button,.dds-search-field--geolocation:has(input:not(:placeholder-shown)) .dds-search-field__with-secondary-button,.dds-search-field--submit-button-none:has(input:focus) .dds-search-field__with-secondary-button,.dds-search-field--submit-button-none:has(input:not(:placeholder-shown)) .dds-search-field__with-secondary-button{padding-right:calc((var(--dimension-input-xs) * 2) + var(--spacing-s))}.dds-search-field--large.dds-search-field--geolocation:has(input:focus) .dds-search-field__with-secondary-button,.dds-search-field--large.dds-search-field--geolocation:has(input:not(:placeholder-shown)) .dds-search-field__with-secondary-button,.dds-search-field--large.dds-search-field--submit-button-none:has(input:focus) .dds-search-field__with-secondary-button,.dds-search-field--large.dds-search-field--submit-button-none:has(input:not(:placeholder-shown)) .dds-search-field__with-secondary-button{padding-right:calc((var(--dimension-input-s) * 2) + var(--spacing-s))}.dds-search-field--geolocation.dds-search-field--large.dds-search-field--submit-button-none:has(input:not(:placeholder-shown)) .dds-search-field__with-secondary-button,.dds-search-field--geolocation.dds-search-field--submit-button-none:has(input:focus) .dds-search-field__with-secondary-button{padding-right:calc((var(--dimension-input-xs) * 3) + var(--spacing-s))}.dds-search-field--geolocation.dds-search-field--large.dds-search-field--submit-button-none:has(input:focus) .with-secondary-button,.dds-search-field--geolocation.dds-search-field--large.dds-search-field--submit-button-none:has(input:not(:placeholder-shown)) .dds-search-field__with-secondary-button{padding-right:calc((var(--dimension-input-s) * 3) + var(--spacing-s))}