/* valuable - form --------------------------------------------------------*/

/* @group @variables */

:root {
--form-transition-type: all;
--form-transition-time: .2s;
--form-transition-delay: 0s;
--form-transition-cubic-bezier: .6, .5, .5, .75;
--form-border-size: 1px;
--form-border-focus-size: 2px;
}

/* @end @variables */

/* reset --------------------------------------------------------*/

/* @group @reset-form */

input,textarea,select,option{box-sizing:border-box;border-radius:0;}

input,textarea,[contenteditable]{min-width:0;margin-top:0;margin-bottom:0;}
textarea{overflow:auto;vertical-align:top;resize:vertical;white-space:pre-wrap;}
input,select{vertical-align:baseline;}
input:disabled, textarea:disabled{pointer-events: none;}

input[type="search"],input[type="number"],input[type="date"],input[type="datetime"],input[type="password"],textarea,[contenteditable]{-webkit-appearance:none;}

input[type="checkbox"],input[type="radio"]{padding:0;}

input[type="text"],input[type="tel"],input[type="email"],input[type="date"],input[type="datetime"],input[type="search"],input[type="number"],input[type="file"],input[type="password"],textarea,select,input[type="submit"],input[type="button"],[contenteditable]{outline:none;background-clip:padding-box;}

input[type="file"]{-webkit-appearance:none;overflow:hidden;display:block;}

fielset{margin-top:0;margin-right:0;margin-left:0;padding:0;border:0;}
legend{width:100%;padding:0;}

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner{
padding:0;
border:0
}

input[type="text"],input[type="tel"],input[type="email"],input[type="date"],input[type="datetime"],input[type="search"],input[type="number"],input[type="file"],input[type="password"],textarea,select,input[type="submit"],input[type="button"],[contenteditable] {
font-size: inherit;
}

@media all and (max-width:47.9375em) {
input[type="text"],input[type="tel"],input[type="email"],input[type="date"],input[type="datetime"],input[type="search"],input[type="number"],input[type="file"],input[type="password"],textarea,select,input[type="submit"],input[type="button"],[contenteditable]{font-size:16px;}
}

/* @end @reset-form */

/* @group @reset number */

input[type="number"]{-moz-appearance:textfield;background-clip:padding-box;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}

/* @end @reset number */

/* valuable - icon --------------------------------------------------------*/

/* @group @variables */

form {
 --icon-success: url('data:image/svg+xml;charset=utf-8, <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsla(120, 55%, 45%, 1)" fill-rule="evenodd" d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4.727 6.977l-6.5 6.5-2.954-2.954L5.5 12.295l4.727 4.728L18.5 8.75l-1.773-1.773z"/></svg>');
--icon-error:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="hsla(355, 55%, 55%, 1)" d="M12 0C5.376 0 0 5.376 0 12s5.376 12 12 12 12-5.376 12-12S18.624 0 12 0zm1.2 18h-2.4v-2.4h2.4V18zm0-4.8h-2.4V6h2.4v7.2z"/></svg>');
}

/* @end @variables */

/* form-list --------------------------------------------------------*/

/* @group @variables */

.a-form-list-quinary {
--content-block-gap-primary: 0;
--text-block-margin-bottom: 0;
--content-block-gap-primary: 1.875rem;
}

/* @end @variables */

/* @group @a-content-block */

.a-form-list-quinary {
display: grid;
align-content: start;
grid-template-columns: repeat(1, 1fr);
gap: var(--content-block-gap-primary);
}

/* @end @a-content-block */

/* input[text] / textarea --------------------------------------------------------*/

/* @group @variables */

form {
/*--form-input-background-color: hsla(220, 10%, 99%, 1);*/
--form-input-background-color: var(--color-white);
--form-input-border-color: var(--color-gainsboro);
--form-input-box-shadow-color: transparent;
--form-input-text-color: var(--color-text);
}

.a-form-input-text:not(:disabled):hover {
--check-btn-border-color: var(--color-focus-tertiary);
--check-btn-shadow-color: var(--color-focus-tertiary);
}

.a-form-input-text:not(:disabled):focus {
--form-input-border-color: var(--color-focus-primary);
--form-input-box-shadow-color: var(--color-focus-primary);
}

.a-form-input-text:not(:placeholder-shown),
.a-form-input-text:focus {
--form-input-background-color: var(--color-white);
}

.has-error {
--form-input-background-color: var(--color-white);
--form-input-border-color: var(--color-error-primary);
--form-input-box-shadow-color: var(--color-error-primary);
}

.has-success {
--form-input-background-color: var(--color-white);
--form-input-border-color: var(--color-success-primary);
--form-input-box-shadow-color: var(--color-success-primary);
}

.a-form-input-text:disabled {
--form-input-background-color: var(--color-dimgray-disabled);
--form-input-text-color: var(--color-text-disabled);
}

.a-form-input-text:-webkit-autofill,
.a-form-input-text:autofill {
--form-input-background-color: var(--color-autofill-secondary);
--form-input-border-color: var(--color-autofill-primary);
--form-input-box-shadow-color: var(--color-autofill-primary);
}

/* @end @variables */

/* @group @a-form-input-text */

.a-form-input-text {
display: grid;
align-items: center;
height: inherit;
min-height: 3.75rem;
padding:calc(.75rem - var(--form-border-size));
background-color: var(--form-input-background-color);
border: var(--form-border-size) solid var(--form-input-border-color);
box-shadow: inset 0 0 0 var(--form-border-size) var(--form-input-box-shadow-color);
color: var(--form-input-text-color);
caret-color: var(--form-input-text-color);
transition: var(--link-transition);
}

.a-form-input-text:not(:placeholder-shown),
.a-form-input-text:focus {
padding-top: calc(1.5rem - var(--form-border-size));
}

.a-form-input-text:-webkit-autofill,
.a-form-input-text:autofill {
-webkit-text-fill-color: var(--color-brand);
text-fill-color: var(--color-brand);
caret-color: var(--color-text);
}

.a-form-input-text:disabled {
opacity: var(--alpha-disabled);
-webkit-text-fill-color: var(--color-text-disabled);
text-fill-color: var(--color-text-disabled);
}

.a-form-input-text:focus::-webkit-input-placeholder {opacity:0;}
.a-form-input-text:focus::-moz-placeholder {opacity:0;}
.a-form-input-text:focus::-ms-input-placeholder {opacity:0;}
.a-form-input-text:focus::placeholder{opacity:0;}

/* @end @a-form-input-text */

/* validate message --------------------------------------------------------*/

/* @group @variables */

form {
--validate-message-color: var(--color-dimgray);
--validate-message-text-color: var(--color-focus-primary);
}

/* @end @variables */

/* @group @a-validate-message */

.a-validate-message {
min-height: 1.5rem;
margin-top: 2.25rem;
padding: .75rem;
background-color: var(--color-whitesmoke);
font-weight: 500;
color: var(--validate-message-text-color);
text-align: center;
}

/* @end @a-validate-message */

/* error message --------------------------------------------------------*/

/* @group @variables */

form {
--validate-message-color: var(--color-dimgray);
--validate-message-text-color: var(--color-focus-primary);
}

/* @end @variables */

/* @group @a-error-message */

.a-error-message,
.a-error-message-text,
.a-error-message-check {
overflow: hidden;
visibility: hidden;
display: block;
max-height: 0;
color: var(--color-error-primary);
}

.has-error .a-error-message,
.has-error .a-error-message-text,
.has-error .a-error-message-check {
visibility: visible;
opacity: 1;
min-height: 1.5rem;
max-height: 3rem;
margin-top: .375rem;
}

/* @end @a-error-message */

/* form label --------------------------------------------------------*/

/* @group @a-form-label */

.a-form-label,
.a-form-label-text,
.a-form-label-check {
display: flex;
flex-wrap: wrap;
font-weight: 500;
transition: var(--link-transition);
}

/* @end @a-form-label */

/* form label status --------------------------------------------------------*/

/* @group @variables */

.a-status-required {
--status-label-background-color: var(--color-brand);
}

.a-status-any {
--status-label-background-color: hsla(220, 10%, 60%, 1);
}

/* @end @variables */

/* @group @a-status-required */

.a-status-required,
.a-status-any {
align-self: center;
display: flex;
justify-content: center;
align-items: center;
width: 3rem;
height: 1.125rem;
margin-left: .375rem;
background-color: var(--status-label-background-color);
font-size: .625rem;
color: var(--color-white);
}

/* @end @a-status-required */

/* precautions message --------------------------------------------------------*/

/* @group @variables */

.a-status-required {
--status-label-background-color: var(--color-brand);
}

.a-status-any {
--status-label-background-color: hsla(220, 10%, 60%, 1);
}

/* @end @variables */

/* @group @a-form-precautions */

.a-form-precautions,
.a-form-precautions-text {
overflow: hidden;
font-size: .625rem;
opacity: 0;
transition: var(--link-transition);
}

.a-form-input-text:focus + .a-form-precautions,
.a-form-input-text:not(:placeholder-shown) + .a-form-precautions {
opacity: 1;
}

.a-form-precautions-check {
overflow: hidden;
font-size: var(---font-size-form-calc-placetext);
transition: var(--link-transition);
}

/* @end @a-form-precautions */

/* stutus icon --------------------------------------------------------*/

/* @group @variables */

form {
--status-icon-background-size: 1.5rem auto;
--status-icon-error-z-index: 1;
--status-icon-error-opacity: 0;
--status-icon-success-z-index: 1;
--status-icon-success-opacity: 0
}

.a-input-status-icon-success {
--status-icon-background-image: var(--icon-success);
}

.a-input-status-icon-error {
--status-icon-background-image: var(--icon-error);
}

.has-error {
--status-icon-error-z-index: 2;
--status-icon-error-opacity: 1;
}

.has-success {
--status-icon-success-z-index: 2;
--status-icon-success-opacity: 1;
}

/* @end @variables */

/* @group @a-input-status-icon */

.a-input-status-icon-success,
.a-input-status-icon-error {
position: relative;
display: block;
width: 1.5rem;
height: 1.5rem;
background-image: var(--status-icon-background-image);
background-size: 1.5rem auto;
background-position: center center;
background-repeat: no-repeat;
pointer-events: none;
transition: var(--link-transition);
}

.a-input-status-icon-success {
z-index: var(--status-icon-success-z-index);
opacity: var(--status-icon-success-opacity);
}

.a-input-status-icon-error {
z-index: var(--status-icon-error-z-index);
opacity: var(--status-icon-error-opacity);
}

/* @end @a-input-status-icon */

/* form grid --------------------------------------------------------*/

/* @group @variables */

.a-form-type-input {
--form-type-detail-grid-rows: auto .375rem .375rem 1.125rem auto .375rem auto auto 0;
--form-type-detail-input-grid-row: 3 / 7;
--form-type-detail-label-grid-row: 1;
--form-type-detail-precautions-grid-row: 4;
--form-type-detail-status-grid-row: 3 / 7;
--form-type-detail-error-message-grid-row: 9;


--form-type-detail-note-message-grid-row: 10;
}

.a-form-type-input {
--form-type-detail-grid-columns: .75rem 1fr .375rem 1.5rem .75rem;
--form-type-detail-input-grid-column: 1 / 6;
--form-type-detail-label-grid-column: 1 / 6;
--form-type-detail-precautions-grid-column: 2 / 5;
--form-type-detail-status-grid-column: 4;
--form-type-detail-error-message-grid-column: 1 / 6;
--form-type-detail-note-message-grid-column: 1 / 6;
}

.has-error {
--form-type-detail-error-message-grid-row: 8;
}

/* @end @variables */

/* @group @variables */

.a-form-type-input-secondary {
--form-type-detail-grid-columns: .75rem 1fr .375rem 1.5rem .75rem 0;
}

@media all and (min-width: 48em) {

.a-form-type-input-secondary {
--form-type-detail-grid-columns: .75rem 12rem .375rem 1.5rem .75rem 1fr;
}

}

.a-form-type-input-secondary {
--form-type-detail-input-grid-column: 1 / 6;
--form-type-detail-label-grid-column: 1 / 7;
--form-type-detail-precautions-grid-column: 2 / 5;
--form-type-detail-status-grid-column: 4;
--form-type-detail-error-message-grid-column: 1 / 7;
--form-type-detail-note-message-grid-column: 1 / 7;
}

/* @end @variables */

/* @group @a-form-type-input */

.a-form-type-input {
position: relative;
display: grid;
grid-template-columns: var(--form-type-detail-grid-columns);
grid-template-rows: var(--form-type-detail-grid-rows);
}

.a-form-input-text {
grid-column: var(--form-type-detail-input-grid-column);
grid-row: var(--form-type-detail-input-grid-row);
}

.a-form-label-text {
grid-column: var(--form-type-detail-label-grid-column);
grid-row: var(--form-type-detail-label-grid-row);
}

.a-form-precautions-text {
grid-column: var(--form-type-detail-precautions-grid-column);
grid-row: var(--form-type-detail-precautions-grid-row);
}

.a-input-status-icon-success-text,
.a-input-status-icon-error-text {
grid-column: var(--form-type-detail-status-grid-column);
grid-row: var(--form-type-detail-status-grid-row);
align-self: center;
}

.a-error-message-text {
grid-column: var(--form-type-detail-error-message-grid-column);
grid-row: var(--form-type-detail-error-message-grid-row);
}

.a-form-note {
grid-column: var(--form-type-detail-note-message-grid-column);
grid-row: var(--form-type-detail-note-message-grid-row);
}

/* @end @a-form-type-input */

/* --------------------------------------------------------*/

/* @group @variables */

.a-form-type-check {
--form-type-check-grid-rows: auto .375rem auto auto auto 0;
--form-type-check-input-grid-row: 3;
--form-type-check-label-grid-row: 1;
--form-type-check-precautions-grid-row: 4;
--form-type-check-error-message-grid-row: 6;
}

.has-error {
--form-type-check-error-message-grid-row: 5;
}

/* @end @variables */

/* @group @a-form-type-check */

.a-form-type-check {
position: relative;
display: grid;
grid-template-rows: var(--form-type-check-grid-rows);
}

.m-form-check-list {
grid-row: var(--form-type-check-input-grid-row);
}

.a-form-label-check {
grid-row: var(--form-type-check-label-grid-row);
}

.a-form-precautions-check {
grid-row: var(--form-type-check-precautions-grid-row);
}

.a-error-message-check {
grid-row: var(--form-type-check-error-message-grid-row);
}

/* @end @a-form-type-check */