/* Søkefeltet i toppen (forsiden, NavSearchAd og NavSearchSmall).

   .sokefelt er nøyaktig like høy som feltet, så ikonet, krysset og Søk-knappen
   sentreres vertikalt mot selve feltet. .har-tekst settes av
   Scripts/autoCompleteSearch.js så snart det står noe i feltet, og viser krysset
   og Søk-knappen.

   Eldre regler for .search-icon og .clear-button ligger fortsatt i flere filer
   (bl.a. sok.css og utforsker.css) med top i prosent. Reglene her har høyere
   spesifisitet og vinner over dem. */

.sokefelt {
    position: relative;
    display: flex;
}

    .sokefelt > input.search_input {
        margin: 0;
        padding-left: 50px !important;
        padding-right: 20px !important;
    }

    /* Samme hjørner på alle søkefelt. Mens forslagslisten er åpen gjelder
       .border-radius-bottom-remove (flat underkant) i stedet. */
    .sokefelt > input.search_input:not(.border-radius-bottom-remove) {
        border-radius: 5px !important;
    }

    /* .border-radius-bottom-remove fjerner underkanten (border-bottom: none), og da
       blir feltet 2px lavere mens listen er åpen. Knappen og krysset følger høyden
       og flytter seg. Underkanten beholdes derfor, bare usynlig. */
    .sokefelt > input.search_input.border-radius-bottom-remove {
        border-bottom-style: solid !important;
        border-bottom-width: 2px !important;
        border-bottom-color: transparent !important;
    }

    .sokefelt.har-tekst > input.search_input {
        padding-right: 116px !important;
    }

    .sokefelt > .search-icon,
    .sokefelt > .clear-button,
    .sokefelt > .sok-knapp {
        position: absolute;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }

    .sokefelt > .search-icon {
        left: 16px;
        right: auto;
        width: 24px;
        height: 24px;
        margin: 0;
        color: #5f5f5f;
        cursor: pointer;
    }

    /* Krysset og knappen vises bare når det står noe i feltet */
    .sokefelt:not(.har-tekst) > .clear-button,
    .sokefelt:not(.har-tekst) > .sok-knapp {
        display: none !important;
    }

    .sokefelt > .clear-button {
        display: flex !important;
        align-items: center;
        justify-content: center;
        right: 85px;
        left: auto;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        color: #5f5f5f !important;
        cursor: pointer;
    }

        .sokefelt > .clear-button svg {
            width: 14px;
            height: 14px;
        }

    .sokefelt > .sok-knapp {
        right: 10px;
        left: auto;
        height: calc((100% - 12px) * 0.8);
        height: round(calc((100% - 12px) * 0.8), 2px);
        margin: 0;
        width: 67px;
        padding: 0;
        border: 0;
        border-radius: var(--sokefelt-radius, 18px);
        background: #1f7885;
        color: white;
        font-size: 15px;
        font-weight: 600;
        line-height: 1;
        cursor: pointer;
    }

        .sokefelt > .sok-knapp:hover {
            background: #18606b;
        }

@media screen and (max-width: 767px) {
    .sokefelt > input.search_input {
        padding-left: 48px !important;
    }

    .sokefelt.har-tekst > input.search_input {
        padding-right: 104px !important;
    }

    .sokefelt > .search-icon {
        left: 12px;
    }

    .sokefelt > .clear-button {
        right: 70px;
    }

    .sokefelt > .sok-knapp {
        right: 10px;
        height: calc((100% - 10px) * 0.8);
        height: round(calc((100% - 10px) * 0.8), 2px);
        width: 55px;
    }
}