form{display: grid; gap: 32px;}

label{display: inline-block; margin-bottom: 8px; font-weight: bold; font-size: 0.85rem; color: var(--form_label);}

input[type="text"],
input[type="password"],
input[type="file"],
input[type="color"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
button:not(button.link),
select,
.button{font-family: var(--text_font); background: var(--input); color: var(--input_colour); display: block; width: 100%; border: none; box-shadow: var(--box_shadow); padding: 16px; border-radius: 8px; font-size: 1rem;}

button.link{border: none; font-size: 1rem; display: inline;}

input::placeholder{color: var(--input_placeholder); font-size: 0.8rem;}

input[name="slug"]{text-transform: lowercase;}
input[type="color"]{background: transparent; width: 100%; height: 2rem; overflow: hidden; padding: 0; box-shadow: none;}
textarea{resize: none; field-sizing: content; min-height: 5rem; word-break: break-all;}
button{cursor: pointer;}

input:hover,
button:hover,
select:hover,
textarea:hover,
.button:hover{background: var(--input_hover);}

div:has(textarea) > small,
div:has(input) > small{font-size: 0.7rem; color: var(--text_colour_dim); display: block; position: relative; bottom: 24px; right: 8px; justify-self: right; height: 0; pointer-events: none; font-family: monospace;}

/* formatting */
.form_split{display: grid; grid-template-columns: 1fr 1fr; gap: 32px;}
.form_split_three{display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center;}
.form_split_three > p{height: 0rem;}

button:not(button.link){letter-spacing: 1px; transition: letter-spacing 0.3s, transform 0.3s;}
button:not(button.link):hover{letter-spacing: 2px; transform: translateY(-8px);}
button[hidden]{display: none;}

/* checkbox */
form div:has(input[type="checkbox"]){display: flex; align-items: center; gap: 0.6rem;}
form div:has(input[type="checkbox"]) > label{margin-bottom: 0;}
form div:has(input[type="checkbox"]) > input{width: 1.2rem; height: 1.2rem;}