/* Basic input & textarea */
input,
textarea { display: block; width: 100%; max-width: 100%; padding: 8px 15px; font-size: 1rem; font-weight: 500; line-height: 1.5rem; color: var(--color-gray-darker); background-color: var(--color-white); border: 2px solid var(--color-gray-light); border-radius: 8px; outline: none; box-shadow: 0 2px 10px 0 rgba(var(--shadow-rgb), .025); transition: border-color .25s ease, box-shadow .25s ease; }
textarea { min-height: 5rem; resize: vertical; }
input:hover,
textarea:hover { box-shadow: 0 2px 10px 0 rgba(var(--shadow-rgb), .15); }
input:focus,
textarea:focus { border-color: var(--color-blue); box-shadow: 0 2px 10px 0 rgba(var(--shadow-rgb), .15); }
input::placeholder,
textarea::placeholder { color: var(--color-gray); }

/* Checkbox inputs */
input[type="checkbox"] { display: inline-block; width: 22px; height: 22px; padding: 0; border: 2px solid var(--color-gray-light); border-radius: 3px; box-shadow: 0 1px 8px 0 rgba(var(--shadow-rgb), .05); -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type="checkbox"]:checked { background-color: var(--color-gray-light); background-image: url('/ext/fontawesome/svgs/regular/check.svg'); background-size: 90%; background-position: center; background-repeat: no-repeat; border-color: var(--color-blue-light); }
input[type="checkbox"]:focus { border-color: var(--color-blue); box-shadow: 0 2px 10px 0 rgba(var(--shadow-rgb), .25); }

/* Radio inputs */
input[type="radio"] { display: inline-block; width: 22px; height: 22px; padding: 0; border: 2px solid var(--color-gray-light); border-radius: 50%; box-shadow: 0 1px 8px 0 rgba(var(--shadow-rgb), .05); -webkit-appearance: none; appearance: none; cursor: pointer; }
input[type="radio"]:checked { background-color: var(--color-gray-light); background-image: url('/ext/fontawesome/svgs/solid/circle.svg'); background-size: 90%; background-position: center; background-repeat: no-repeat; border-color: var(--color-blue-light); }
input[type="radio"]:focus { border-color: var(--color-blue); box-shadow: 0 2px 10px 0 rgba(var(--shadow-rgb), .25); }

/* Typed inputs */
.typed-input { display: block; position: relative; }
.typed-input input { padding-right: 2em; }
.typed-input .type { position: absolute; top: -1px; right: 15px; display: flex; height: 100%; justify-content: center; align-items: center; font-size: 1.15em; font-weight: 600; pointer-events: none; }

/* Input size */
.tiny:is(input, select) { width: 8ch; }
.small:is(input, select) { width: 25ch; }
.medium:is(input, select) { width: 40ch; }
.date:is(input, select) { width: 12ch; }