/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_cmsform/Components/FormElement/OpenGemeentenCmsForm-FormElement.css
 * - opengemeenten_cmsform/Components/FormNavigation/OpenGemeentenCmsForm-FormNavigation.css
 * - opengemeenten_linkhandling/Partials/Button/OpenGemeentenLinkHandling-Button.css
 *
 * Variables can be set there globally or override them here!
 */

.site-search-form {
    --font-size: var(--root-font-size);
}

.site-search-form__intro {
    --color: var(--root-color-text);
    --font-family: inherit;
    --font-size: 1em;
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.site-search-form__input {
    /*--font-family: inherit;*/
    /*--font-size: 1em;*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/

    /*--color-text: var(--root-color-text);*/
    /*--color-background: var(--root-color--white);*/
    /*--color-placeholder: #696969;*/

    /*--color-border: var(--root-color-text);*/
    /*--border-width: var(--root-border-width);*/
    /*--border-radius: 0;*/
    /*--border-style: solid;*/
}

.form-navigation .btn.site-search-form__button {
    /*--background-color: var(--root-color--primary);*/
    /*--border-radius: var(--root-border-radius);*/

    /*--border-top-width: var(--root-border-width);*/
    /*--border-right-width: var(--root-border-width);*/
    /*--border-bottom-width: var(--root-border-width);*/
    /*--border-left-width: var(--root-border-width);*/

    /*--border-top-style: solid;*/
    /*--border-right-style: solid;*/
    /*--border-bottom-style: solid;*/
    /*--border-left-style: solid;*/

    /*--border-top-color: var(--root-color--primary);*/
    /*--border-right-color: var(--root-color--primary);*/
    /*--border-bottom-color: var(--root-color--primary);*/
    /*--border-left-color: var(--root-color--primary);*/

    /*--color: var(--root-color--white);*/
    /*--font-family: inherit;*/
    /*--font-size: var(--root-font-size); !* Reset, use REM *!*/
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.form-navigation .btn.site-search-form__button:active,
.form-navigation .btn.site-search-form__button:focus,
.form-navigation .btn.site-search-form__button:hover {
    /*--border-top-color: var(--root-color--primary-darkest);*/
    /*--border-right-color: var(--root-color--primary-darkest);*/
    /*--border-bottom-color: var(--root-color--primary-darkest);*/
    /*--border-left-color: var(--root-color--primary-darkest);*/
    /*--background-color: var(--root-color--primary-darkest);*/
}

.site-search-form__icon {
    /*--color-icon: #757575;*/
}

.site-search-form__additional-link.link {
    /*--color: var(--root-color-text-link);*/
    /*--font-family: inherit;*/
    /*--font-size: 1em;
    /*--font-style: normal;*/
    /*--font-weight: var(--root-font-weight--normal);*/
    /*--line-height: inherit;*/
}

.site-search-form__additional-link.link:active,
.site-search-form__additional-link.link:focus,
.site-search-form__additional-link.link:hover {
    /*--color: var(--root-color-text-link--hover);*/
}

.site-search-form__additional-link.link .icon {
    /*--fill: currentColor;*/
    /*--height: 1em;*/
}

.site-search-form__additional-link.link:hover .icon {
    /*--fill: currentColor;*/
}

.site-search-form {
    margin-top: 1rem;
}

.site-search-form__form {
    position: relative;
    display: flex;
    align-items: center;
    height: 3rem;
    margin-top: 1.5rem;
}

input[type="search"].site-search-form__input {
    line-height: 1.5;
    max-width: initial;
    height: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.75rem;
    transition: border-color 200ms;
    border-width: 0.125rem;
    border-style: solid;
    border-radius: 0.125rem;
}

input[type="search"].site-search-form__input:focus {
    box-shadow: 0 0 0 0 transparent;
    outline-offset: 4px;
}

.site-search-form__form-navigation {
    margin-top: 0;
    position: absolute;
    right: 0;
}

.site-search-form__button {
    height: 100%;
    padding: 0 0.625rem;
    cursor: pointer;
}

.site-search-form__icon {
    position: absolute;
    left: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
}

.site-search-form__additional-link {
    display: block;
    margin-top: 1rem;
}

.site-search-form {
    font-size: var(--font-size, 1rem);
}

.site-search-form__intro {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    color: var(--color, black);
    line-height: var(--line-height, 1.25);
}

input[type="search"].site-search-form__input {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    line-height: var(--line-height, inherit);
    color: var(--color-text, black);
    border-color: var(--color-border, black);
    border-width: var(--border-width, 0.125rem);
    border-radius: var(--border-radius, 0);
    border-style: var(--border-style, solid);
    background-color: var(--color-background, white);
}

input[type="search"].site-search-form__input::placeholder {
    color: var(--color-placeholder, hsl(0, 0%, 41%));
}

.site-search-form__button {
    font-size: var(--font-size, 1em);
    line-height: var(--line-height, inherit);
    color: var(--color, white);

    border-top-width: var(--border-top-width, 0.125rem);
    border-right-width: var(--border-right-width, 0.125rem);
    border-bottom-width: var(--border-bottom-width, 0.125rem);
    border-left-width: var(--border-left-width, 0.125rem);

    border-top-style: var(--border-top-style, solid);
    border-right-style: var(--border-right-style, solid);
    border-bottom-style: var(--border-bottom-style, solid);
    border-left-style: var(--border-left-style, solid);

    border-top-color: var(--border-top-color, black);
    border-right-color: var(--border-right-color, black);
    border-bottom-color: var(--border-bottom-color, black);
    border-left-color: var(--border-left-color, black);

    border-radius: var(--border-radius, 0.188rem);
    background-color: var(--background-color, #0349D1);
}

.site-search-form__icon {
    fill: var(--color-icon, #757575);
}

.site-search-form__additional-link {
    font-family: var(--font-family, inherit);
    font-size: var(--font-size, 1em);
    font-style: var(--font-style, normal);
    font-weight: var(--font-weight, normal);
    color: var(--color, black);
    line-height: var(--line-height, 1.25);
}