Notes/src/public/stylesheets/theme-next/forms.css

/* 
 * Input boxes
 */

input:disabled {
    opacity: .33;
}

/* Text boxes */

input:not([type]),
input[type="text"],
input[type="number"],
input[type="password"],
.form-control {
    outline: 3px solid transparent;
    outline-offset: 6px;
    border: unset;
    background: var(--input-background-color);
    color: var(--input-text-color);
}

input:not([type]):hover,
input[type="text"]:hover,
input[type="number"]:hover,
input[type="password"]:hover,
.form-control:hover {
    background: var(--input-hover-background);
    color: var(--input-hover-color);
}

input:not([type]):focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
.form-control:focus {
    box-shadow: unset;
    outline: 3px solid var(--input-focus-outline-color);
    outline-offset: 0;
    background: var(--input-focus-background);
    color: var(--input-focus-color);
    transition: outline-color 50ms linear,
                outline-offset 200ms ease-out;
}

input::placeholder,
.form-control::placeholder {
    --muted-text-color: var(--input-placeholder-color);
}

input::selection,
.form-control::selection {
    background: var(--input-selection-background);
    color: var(--input-selection-text-color);
}

/* Input groups */

.input-group {
    outline: 3px solid transparent;
    outline-offset: 6px;
    background: var(--input-background-color);
    border-radius: 6px;
    padding-right: 8px;
    color: var(--quick-search-color);
}

.input-group:hover {
    background: var(--input-hover-background);
}

.input-group:focus-within {
    outline: 3px solid var(--input-focus-outline-color);
    outline-offset: 0;
    background: var(--input-focus-background);
    transition: outline-color 50ms linear,
                outline-offset 200ms ease-out;
}

.input-group input
.input-group input:hover,
.input-group input:focus,
.input-group .form-control,
.input-group .form-control:hover,
.input-group .form-control:focus {
    /* Ignore the focus outline for the inputs that are children of an input group */
    outline: unset;

    background: transparent;
}

.input-group button,
.input-group a {
    display: flex;
    --bs-border-width: 0;
    --accented-background-color: transparent;
    background: transparent;
    padding: 0 4px;
    
    --muted-text-color: var(--input-action-button-color);
}

.input-group button:hover,
.input-group a:hover {
    --muted-text-color: var(--input-action-button-hover);
}

.input-group a.disabled {
    opacity: .5;
}

.input-group .input-clearer-button {
    background: transparent !important;
}