/* 
Skapar egen klass "ek-search" som läggs till som CSS-regel under 
Webbplatsinställningar / Dekorationer och som appliceras på modulen 
Sök på sidorna "Artiklar och press" samt "Fråga juristen".
*/

/* Wrapper för sökfält + knapp */
.ek-search [role="search"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Gemensamma inställningar */
.ek-search input[type="text"],
.ek-search input[type="submit"] {
    box-sizing: border-box;
    min-height: 2em;
    line-height: 1;
    font-size: 1em;
    border-radius: var(--env-button-border-radius);
}

/* Input-fält */
.ek-search input[type="text"] {
    border: 1px solid var(--env-element-primary-background-color);
    background-color: var(--env-form-input-background-color);
    color: var(--env-form-input-font-color);
    padding: 0 0.75em;
    appearance: none;
    -webkit-appearance: none;
}

/* Sökknapp */
.ek-search input[type="submit"] {
    border: 1px solid var(--env-element-primary-background-color);
    background-color: transparent;
    color: var(--env-element-primary-background-color);
    font-family: var(--env-button-font-family);
    font-weight: var(--env-button-font-weight);
    letter-spacing: var(--env-button-letter-spacing);
    text-transform: var(--env-button-text-transform);
    padding: 0 1.3125em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* Fokus */
.ek-search input[type="text"]:focus-visible,
.ek-search input[type="submit"]:focus-visible {
    box-shadow: 0 0 0 var(--env-focus-offset) var(--env-focus-inner-color);
    outline: var(--env-focus-size) solid var(--env-focus-outline-color);
    outline-offset: var(--env-focus-offset);
}

/* Hover-effekt för sökknappen */
.ek-search input[type="submit"]:hover {
    background-color: var(--env-element-primary-background-color-dark);
    color: var(--env-element-primary-font-color);
}