.searchinput {
    --button-width: calc(var(--apSearchInputBorderRadius) * 2);

    --border-color: var(--apSearchInputBorderColor);
    --background-color: var(--apSearchInputBgColor);
    --color: var(--apSearchInputColor);
    --placeholder-color: var(--apSearchInputPlaceholderColor);

    border: var(--apBorderWidth) solid var(--border-color);
    background-color: var(--background-color);
    border-radius: var(--apSearchInputBorderRadius);
    min-height: calc(var(--apSearchInputBorderRadius) * 2);
    display: flex;
    align-items: stretch;
}

.searchinput:focus-within {
    border-color: var(--apSearchInputBorderFocusColor);
    background-color: var(--apSearchInputBgFocusColor);
    --color: var(--apSearchInputColorFocus);
    --placeholder-color: var(--apSearchInputPlaceholderFocusColor);
}


.searchinput__input {
    background: none;
    border: none;
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--apInputHPadding) 0.2rem var(--apInputVPadding) var(--apSearchInputBorderRadius);
    color: var(--apTextColor);
    outline: none;
    flex: 1 1 auto;
    border-radius: var(--apSearchInputBorderRadius) 0 0 var(--apSearchInputBorderRadius);
    color: var(--color);
}
.searchinput__input::placeholder {
    color: var(--placeholder-color);
    font-style: italic;
    opacity: 1;
}

.searchinput__button {
    background-color: transparent;
    width: var(--button-width);
    flex: 0 0 auto;
    border-radius: 0 var(--apSearchInputBorderRadius) var(--apSearchInputBorderRadius) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.searchinput__button:focus {
    outline: var(--apOutlineColor) solid var(--apBorderWidth);
}

.searchinput__buttonicon {
    fill: var(--color);
    height: var(--apFontSizeDefault);
    width: var(--apFontSizeDefault);
}


.searchinput.searchinput--white {
    --border-color: var(--apSearchInputBorderColor);
    --background-color: #fff;
    --color: var(--apSearchInputColor);
    --placeholder-color: var(--apSearchInputPlaceholderColor);
}

.searchinput.searchinput--white:focus-within {
    border-color: var(--apSearchInputBorderFocusColor);
    background-color: #fff;

}