.InputWithIcon {
    display: flex;
    flex-direction: row;

    color: var(--fg-field-off);
    margin: 2px;
}

.InputWithIcon.Focused {
    color: var(--fg-field-on);
}

.InputWithIcon .IconPart {
    border-radius: 25px 0 0 25px;
    padding: 2px 4px;

    background-color: var(--bg-field-off);
}

.InputWithIcon.Focused .IconPart {
    background-color: var(--bg-field-on);
}

.InputWithIcon .InputPart {
    border-radius: 0 25px 25px 0;
    padding: 2px;

    background-color: var(--bg-field-off);
    border-width: 0;

    outline: 0; /* TODO: Questo è sconsigliato dalle linee guida sull'accessibilità! */

    /* Repeat the color, as it is overridden by <input> */
    color: var(--fg-field-off);
}


.InputWithIcon.Focused .InputPart {
    background-color: var(--bg-field-on);
    color: var(--fg-field-on);
}