label { cursor: pointer; display: inline-block; font-weight: var(--font-weight-bold); margin-block-end: var(--space-third); } label.required, .required { color: var(--color-primary); } input, textarea { font-family: inherit; font-size: inherit; line-height: inherit; padding: var(--space-half); } :is( input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], textarea ) { background-color: var(--color-content-bg); border-radius: var(--radius-m); border: 2px solid var(--color-border); margin-block-end: var(--space-half); position: relative; width: 100%; appearance: none; line-height: 1.5; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } :is( input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], textarea ):hover { border-color: color-mix(in srgb, var(--color-border), #000 20%); } :is( input[type="text"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], input[type="tel"], input[type="number"], textarea ):focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1); outline: none; } textarea { min-height: 120px; resize: vertical; field-sizing: content; min-block-size: 120px; } fieldset { border: 2px solid var(--color-border); border-radius: var(--radius-m); padding: var(--space-single); } legend { background-color: var(--color-content-bg); font-weight: var(--font-weight-bold); padding-inline: 0.5rem; } ::placeholder { color: var(--color-text-sec); opacity: 0.7; } :focus-visible::placeholder { opacity: 0.5; } select { appearance: none; background-color: var(--color-content-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-position: right 1rem center; background-repeat: no-repeat; background-size: 12px; border: 2px solid var(--color-border); border-radius: var(--radius-m); cursor: pointer; max-width: 100%; padding-block: var(--space-half); padding-inline-start: var(--space-half); padding-inline-end: 2.5rem; transition: border-color var(--transition), box-shadow var(--transition); } select:hover { border-color: color-mix(in srgb, var(--color-border), #000 20%); } select:focus-visible { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1); outline: none; } input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); cursor: pointer; block-size: 1.1rem; inline-size: 1.1rem; } input[type="range"] { accent-color: var(--color-primary); } progress { accent-color: var(--color-primary); } input[type="checkbox"] + label, input[type="radio"] + label { cursor: pointer; margin-inline-start: 0.5rem; } .form-input-name, .form-input-email { background-repeat: no-repeat; background-position: 16px center; background-size: 16px 16px; padding-inline-start: 45px; } .form-input-name { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23888' d='M144 128a80 80 0 1 1 160 0 80 80 0 1 1-160 0zm208 0a128 128 0 1 0-256 0 128 128 0 1 0 256 0zM48 480c0-70.7 57.3-128 128-128l96 0c70.7 0 128 57.3 128 128l0 8c0 13.3 10.7 24 24 24s24-10.7 24-24l0-8c0-97.2-78.8-176-176-176l-96 0C78.8 304 0 382.8 0 480l0 8c0 13.3 10.7 24 24 24s24-10.7 24-24l0-8z'/%3E%3C/svg%3E"); } .form-input-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23888' d='M61.4 64C27.5 64 0 91.5 0 125.4c0 .9 0 1.7.1 2.6L0 128l0 256c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-256-.1 0c0-.9.1-1.7.1-2.6C512 91.5 484.5 64 450.6 64L61.4 64zM464 192.3L464 384c0 8.8-7.2 16-16 16L64 400c-8.8 0-16-7.2-16-16l0-191.7 154.8 117.4c31.4 23.9 74.9 23.9 106.4 0L464 192.3zM48 125.4C48 118 54 112 61.4 112l389.2 0c7.4 0 13.4 6 13.4 13.4 0 4.2-2 8.2-5.3 10.7L280.2 271.5c-14.3 10.8-34.1 10.8-48.4 0L53.3 136.1c-3.3-2.5-5.3-6.5-5.3-10.7z'/%3E%3C/svg%3E"); } [data-theme="dark"] .form-input-name { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23a1a1aa' d='M144 128a80 80 0 1 1 160 0 80 80 0 1 1-160 0zm208 0a128 128 0 1 0-256 0 128 128 0 1 0 256 0zM48 480c0-70.7 57.3-128 128-128l96 0c70.7 0 128 57.3 128 128l0 8c0 13.3 10.7 24 24 24s24-10.7 24-24l0-8c0-97.2-78.8-176-176-176l-96 0C78.8 304 0 382.8 0 480l0 8c0 13.3 10.7 24 24 24s24-10.7 24-24l0-8z'/%3E%3C/svg%3E"); } [data-theme="dark"] .form-input-email { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23a1a1aa' d='M61.4 64C27.5 64 0 91.5 0 125.4c0 .9 0 1.7.1 2.6L0 128l0 256c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-256-.1 0c0-.9.1-1.7.1-2.6C512 91.5 484.5 64 450.6 64L61.4 64zM464 192.3L464 384c0 8.8-7.2 16-16 16L64 400c-8.8 0-16-7.2-16-16l0-191.7 154.8 117.4c31.4 23.9 74.9 23.9 106.4 0L464 192.3zM48 125.4C48 118 54 112 61.4 112l389.2 0c7.4 0 13.4 6 13.4 13.4 0 4.2-2 8.2-5.3 10.7L280.2 271.5c-14.3 10.8-34.1 10.8-48.4 0L53.3 136.1c-3.3-2.5-5.3-6.5-5.3-10.7z'/%3E%3C/svg%3E"); } .email-form-title:empty, .email-form-footer:empty { display: none; } .email-form-footer { clear: both; font-size: 0.8em; font-style: italic; line-height: 1.5em; text-align: center; } .form-input, .form-submit { width: 100%; } .form-input, .form-submit:not(:last-child) { margin-block-end: var(--space-half); } .form-full .form-input { display: block; } [class*="form-attached"] { display: grid; grid-template-columns: 1fr auto; } .form-attached-2 { grid-template-columns: 1fr 1fr auto; } [class*="form-attached"] .form-input { border-inline-end-width: 0; border-radius: var(--radius-m) 0 0 var(--radius-m); margin-block-end: 0; width: auto; } [class*="form-attached"] .form-submit { border-radius: 0 var(--radius-m) var(--radius-m) 0; width: auto; }