/**
 * @file
 * Form component's rules.
 *
 * Defines rules for form components : input, label, etc.
 *
 */


/**
 * Forms bases
 */

 input[type="text"],
 input[type="email"],
 input[type="password"],
 input[type="tel"],
 textarea {
   display: block;
   padding: 0.5rem 1rem;
   border-radius: 2px;
   border: 1px solid #D9D9D9;
   background: #FCFCFC;
   max-width: 100%;
 }
 input[type="text"]:focus-within,
 input[type="email"]:focus-within,
 input[type="password"]:focus-within,
 input[type="tel"]:focus-within,
 textarea:focus-within {
   border: 1px solid #48B386;
   outline: none;
 }
 
 /**
  * Textaera
  */
 
 textarea {
   padding: 0.75rem;
 }
 
 /**
  * Select List
  */
 
 .form-type-select select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background-color: transparent;
   border: none;
   padding: 0.5rem 40px 0.5rem 0.5rem;
   margin: 0;
   width: 100%;
   cursor: inherit;
   line-height: inherit;
   z-index: 1;
   outline: none;
   font-family: 'Rebond Grotesque', sans-serif;
   font-weight: 300;
   height: 100%;
 }
 .form-type-select select::-ms-expand {
   display: none;
 }
 .select {
   display: grid;
   grid-template-areas: "select";
   align-items: center;
   position: relative;
   max-width: 500px;
   border-radius: 2px;
   cursor: pointer;
   border: 1px solid #D9D9D9;
   background: #FCFCFC;
   margin-top: 0.5rem;
   max-height: 42px;
 }
 .select select, .select::after {
   grid-area: select;
 }
 .select::after {
   content: "";
   justify-self: end;
   width: 40px;
   height: 100%;
   background-image: url('../../images/form/arrow-select.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: 12px;
   background-color: #48B386;
   border: 1px solid #48B386;
 }
 .select:focus-within {
   border: 1px solid #48B386;
 }
 
 
 /**
 * Checkbox
 */
 
 div.form-type-checkbox {
   display: flex;
   gap: 0.5rem;
   cursor: pointer;
   align-items: center;
 }
 .user-register-form div.form-type-checkbox {
   display: grid;
   grid-template-columns: 15px 100%;
 }
 .user-register-form div.form-type-checkbox .description {
   grid-column-start: 1;
   grid-column-end: 3;
 }
 input[type="checkbox"] {
   -webkit-appearance: none;
   appearance: none;
   background-color: #FFFFFF;
   margin: 0;
   font: inherit;
   color: currentColor;
   cursor: pointer;
   width: 16px;
   height: 16px;
   border: 2px solid #48B386;
   transform: translateY(-0.075em);
   display: grid;
   place-content: center;
 }
 input[type="checkbox"]:hover,
 input[type="checkbox"]:checked {
   background-color: #48B386;
 }
 input[type="checkbox"]::before {
   content: "";
   width: 14px;
   height: 8px;
   transform: scale(0);
   transform-origin: bottom left;
   transition: 120ms transform ease-in-out;
   background-image: url('../../images/filters-sort/check--white.svg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
 }
 input[type="checkbox"]:checked::before {
   transform: scale(1);
 }