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"],
textarea.form-control,
textarea {
    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,
textarea.form-control:hover,
textarea: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,
textarea.form-control:focus,
textarea: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;
    
    /* Workaround to set the "color" property. */
    --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 button:focus-visible,
.input-group a:focus-visible {
    outline: transparent;
    border: transparent;
    text-shadow: 0 0 3px var(--input-action-button-hover);
}

.input-group a.disabled {
    opacity: .5;
    /* Workaround to set the "background" property. */
    --button-disabled-background-color: transparent;
}

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

/* Combo box-like dropdown buttons */

.select-button.dropdown-toggle {
    padding-right: 40px;
}

.select-button.dropdown-toggle::after {
    /* Remove the original arrow */
    content: unset;
}

/* Combo boxes and combo box-like dropdown buttons */

select,
select.form-select,
.select-button.dropdown-toggle,
.select-button.dropdown-toggle.btn {
    outline: 3px solid transparent;
    outline-offset: 6px;
    background: var(--input-background-color)
                var(--select-arrow-svg) right 0.75rem center/15px 20px no-repeat;
    color: var(--input-text-color);
    border: unset;
    border-radius: 0.375rem;
}

select:hover,
select.form-select:hover,
.select-button.dropdown-toggle:hover {
    background-color: var(--input-hover-background);
    color: var(--input-hover-color);
}

select:focus,
select.form-select:focus,
.select-button.dropdown-toggle:focus {
    box-shadow: unset;
    outline: 3px solid var(--input-focus-outline-color);
    outline-offset: 0;
    background-color: var(--select-focus-background);
    color: var(--select-focus-text-color);
    transition: outline-color 50ms linear,
                outline-offset 200ms ease-out;
}

option {
    color: var(--select-dropdown-text-color);
}

optgroup {
    color: var(--select-group-heading-text-color);
    font-size: .75em;
    font-weight: normal;
    font-style: normal;
    line-height: 40px;
}

/* Check box & radio button commons */

/* The parent label */
label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
    --box-size: 1em;
    --box-label-gap: .5em;

    position: relative;
}

label:has(input[type="radio"]),
label:has(input[type="checkbox"]) {
    padding-left: calc(var(--box-size) + var(--box-label-gap)) !important;
}

/* The original input */
label > input[type="radio"],
label > input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--box-size);
    height: 100%;
    opacity: 0;
}

label:has(input[type="radio"])::before,
label:has(input[type="radio"])::after,
label:has(input[type="checkbox"])::before,
label:has(input[type="checkbox"])::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    width: var(--box-size);
    height: var(--box-size);
}

label:has(input[type="radio"]:focus-visible)::before,
label:has(input[type="checkbox"]:focus-visible)::before {
    outline: 2px solid var(--input-focus-outline-color);
}

/* Check boxes */

/* The check box background */
label:has(input[type="checkbox"])::before {
    border-radius: 3px;
    background: var(--radio-checkbox-background);
}

label:has(input[type="checkbox"]):hover:before {
    background: var(--radio-checkbox-hover-background);
}

@keyframes checkbox-checked {
    from {
        transform: scale(2);
    } to {
        transform: scale(1);
    }
}

/* The tick mark */
label:has(input[type="checkbox"])::after {
    mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3ctitle%3echeck-bold%3c/title%3e%3cpath d='M9%2c20.42L2.79%2c14.21L5.62%2c11.38L9%2c14.77L18.88%2c4.88L21.71%2c7.71L9%2c20.42Z' /%3e%3c/svg%3e");
    mask-position: center center;
    mask-size: .95em;
    background-color: var(--radio-checkbox-indicator-color);
    transform: scale(0);
    opacity: 0;
    transition: transform 300ms ease-out,
                opacity 300ms linear;
}

label:has(input[type="checkbox"]:checked)::after {
    opacity: 1;
    transform: scale(1);
    transition: opacity 100ms ease-in-out;
    animation: checkbox-checked 150ms ease-out;
}

/* Radio buttons */

label:has(input[type="radio"])::before,
label:has(input[type="radio"])::after {
    border-radius: 50%;
}

/* The outer circle */
label:has(input[type="radio"])::before {
    background: var(--radio-checkbox-background);
}

label:has(input[type="radio"]:hover)::before {
    background: var(--radio-checkbox-hover-background);
}

@keyframes radio-checked {
    from {
        transform: scale(1.5);
    } to {
        transform: scale(.5);
    }
}

/* The inner circle */
label:has(input[type="radio"])::after {
    background: var(--radio-checkbox-indicator-color);
    transform: scale(0);
    opacity: 0;
    transition: opacity 300ms linear,
                transform 300ms ease-in;
}

label:has(input[type="radio"]:checked)::after {
    transform: scale(.5);
    opacity: 1;
    transition: opacity 150ms linear;
    animation: radio-checked 200ms ease-out;
}