/**
 * @author: Yoann Le Crom <yoann.lecrom@abstractive.fr>
 */

.Form {
    width: 100%;
}

.Form-row {
    display: flex;
    align-items: flex-start;
    flex: 1 1 auto;
    margin: 2rem 0;
}
/* NB: not using .Form-row + .Form-row to defined top margin, because hidden input can be inserted between lines */
.Form-row:first-child {
    margin-top: 0;
}

.Form-inputWrapper {
    flex: 1 1 auto;
}

.Form-label {
    display: inline-block;
    margin-right: 2rem;
    margin-top: 1rem;
    font-weight: 600;
    min-width: 10rem;
    color: var(--primary-color);
}
.Form-label--autoWidth {
    min-width: unset;
}
.Form-label.required::after {
    content: " *";
}

.Form-input,
.ts-wrapper.Form-input:not(.form-control, .form-select) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 1rem 1.8rem .8rem;
    color: var(--body-color);
    background: var(--body-color-inverse);
    border-radius: .4rem;
    border: 1px solid transparent;
    transition: border-color .5s ease;
}
.ts-wrapper.Form-input:not(.form-control, .form-select) .ts-control {
    border: none;
}
.ts-wrapper.plugin-clear_button.Form-input .clear-button {
    margin-right: 1.2rem !important;
}
.ts-wrapper.Form-input.focus .ts-control {
    box-shadow: none;
}
textarea.Form-input {
    min-height: 2.4rem;
    resize: vertical;
    padding: 1rem;
}
select.Form-input,
.ts-wrapper.Form-input:not(.form-control, .form-select).single .ts-control {
    padding-right: 4rem;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='matrix(0 1 -1 0 23 1)'%3E%3Cpath d='m.262.266a.9.9 0 0 0 0 1.272l4.46 4.446a.9.9 0 0 0 1.24.028l4.394-4.38a.9.9 0 1 0 -1.268-1.273l-3.775 3.719-3.779-3.816a.9.9 0 0 0 -1.272.004z' fill='%230d0722' transform='matrix(0 -1 1 0 7.877 16.621)'/%3E%3Cpath d='m2.444 0h17.112a2.444 2.444 0 0 1 2.444 2.444v17.112a2.444 2.444 0 0 1 -2.444 2.444h-17.112a2.444 2.444 0 0 1 -2.444-2.444v-17.112a2.444 2.444 0 0 1 2.444-2.444z' fill='none' stroke='%230d0722' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 2rem;
}
.ts-wrapper.Form-input:not(.form-control, .form-select) {
    padding-right: .5rem;
}
input[type="file"].Form-input {
    border: none;
}
.Form-input::placeholder {
    color: var(--body-color-light);
}
.Form-input:hover,
.Form-input:focus,
.ts-wrapper.Form-input:hover,
.ts-wrapper.Form-input:focus,
.ts-wrapper.Form-input.focus {
    outline: none;
    border-color: var(--secondary-color);
}

/* Custom radio and checkbox controls */
input[type="radio"].Form-input,
input[type="checkbox"].Form-input {
    appearance: none;
    -webkit-appearance: none;
    /* Because of rouding bugs in some browsers, we can't use rem values to size the input */
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin: 0 1rem 0 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-color: unset;
    border: 2px solid #C6C6C6;
    transition: background-color .5s ease, border-color .5s ease;
}
input[type="radio"].Form-input {
    border-radius: 50%;
}
/* Custom radio and checkbox controls checked */
input[type="radio"]:checked.Form-input,
input[type="checkbox"]:checked.Form-input {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
}
input[type="radio"]:checked.Form-input {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff'%3E%3C/circle%3E%3C/svg%3E");
    background-size: 6px;
}
input[type="checkbox"]:checked.Form-input {
    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%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-size: 8px;
}
/* Custom radio and checkbox controls hover */
input[type="radio"].Form-input:hover,
input[type="checkbox"].Form-input:hover {
    border-color: var(--primary-color);
}
/* Custom radio and checkbox controls focus */
input[type="radio"]:focus.Form-input,
input[type="checkbox"]:focus.Form-input {
    outline: none;
    border-color: var(--secondary-color);
}
/* Custom radio and checkbox controls checked focus */
input[type="radio"]:checked:focus.Form-input,
input[type="checkbox"]:checked:focus.Form-input {
    border-color: var(--primary-color);
}

input[type="radio"].Form-input + .Form-label,
input[type="checkbox"].Form-input + .Form-label {
    display: inline;
    user-select: none;
    cursor: pointer;
    line-height: 1.3;
    margin-top: 0;
    min-width: unset;
}

input[type="checkbox"].Form-input--switch {
    position: relative;
    content: '';
    width: 3.5rem;
    height: 1.6rem;
    border-radius: .8rem;
    background: var(--error-color);
    border: none;
    box-shadow: rgba(0, 0, 0, 0.38) 0px 3px 3px 0px inset;
}
input[type="checkbox"].Form-input--switch::after {
    content: '';
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #fff;
    transition: left .5s ease, background-color .5s ease;
}

input[type="checkbox"].Form-input--switch:checked {
    background: var(--success-color);
}
input[type="checkbox"].Form-input--switch:checked::after {
    left: 2.1rem;
}

.Form-input--greyBg,
textarea.Form-input--greyBg {
    background-color: var(--body-bg-color-alt);
    border-color: transparent;
}

.Form-boxGroup {
    display: flex;
    flex-wrap: wrap;
}
.Form-boxGroup .Form-label {
    font-weight: normal;
}

.Form-inputGroup {
    position: relative;
    display: inline-flex;
    gap: 2rem;
    align-items: center;
    background: var(--body-color-inverse);
    border-radius: .4rem;
}
.Form-inputGroup--fullWidth {
    width: 100%;
}
.Form-inputGroup--fullWidth .Form-input,
.Form-input--fullWidth {
    width: 100%;
}
.Form-inputGroup--noBg {
    background: none;
}

.Form-inputIcon {
    position: absolute;
    margin-left: 1rem;
    font-size: 1.7em;
}
.Form-inputIcon + .Form-input {
    padding-left: 4rem;
}

.Form-input[disabled] {
    border: none;
}
select.Form-input[disabled] {
    background-image: none;
}
.Form-input[type="file"][disabled] {
    display: none;
}
.vich-file .Form-input[type="file"][disabled] + .button-group .btn-danger,
.vich-image .Form-input[type="file"][disabled] + .Form-row .Form-boxGroup {
    display: none;
}
.Form-input.disabled .ts-control {
    background: none !important;
}

.Form--inline,
.Form-inlineSection {
    display: inline-flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.Form--inline .Form-row,
.Form-inlineSection .Form-row {
    margin: 0;
    flex-grow: 0;
}

.Form-errors {
    list-style: none;
    padding: 0;
    margin: 0;
}

.Form-error {
    margin-top: .3rem;
    color: #dd0000;
}

.Form-help {
    margin-top: .3rem;
    color: var(--body-color-light);
}