@import "/./src/assets/scss/variables.scss";
@import "/./src/assets/scss/fonts.scss";

.form-control {
    padding: 12px 22px;
    border: none;
    border-radius: 5px;
    color: $grey-1;
    background: $white-2;

    &:focus {
        outline: none;
        box-shadow: 0 0 0 1px $green;

        body & {
            outline: none;
            box-shadow: 0 0 0 1px $green;
            background: $white-2;
        }

        .mat-table & {
            body & {
                border-color: $green;
                background: $white;
            }
        }
    }

    .search-wrap & {
        background: $white-2;
        width: 767px;
        height: 54px;
        border-radius: 5px;
        padding: 9px 22px 9px 55px;
        @include font-style($nominee-regular,15px,15px,normal);
        @include placeholder($nominee-regular,$grey-2,15px,15px,normal,1);
        color: $grey-2;

        @media only screen and (min-width: $small-screen) {
            width: 535px
        }
    }

    .mat-accordion & {
        @include font-style($nominee-regular,16px,16px,normal);
        color: $blue-1;
        padding: 13px 20px;
        border: none;
        border-radius: 5px;
        background: $white-2;
    }

    .mat-sort-header-content & {
        margin: 15px 0 12px;
        border-color: $green;
    }

    .mat-table-wrapper & {
        padding: 8px 10px;
        border: 1px solid $green;
        border-radius: 5px;
        color: $grey-1;
        background: $white;
        margin: 8px 0 12px;
    }
}

.form-label, mat-label {
    @include font-style($nominee-regular,16px,22px,normal);
    color: $blue;
    margin-bottom: 15px;

    .mat-form-field-type-mat-input &, .mat-form-field-type-mat-native-select & {
        color: $grey-7;
    }

    .ng-placeholder & {
        color: $grey-7;
    }
}

.ng-placeholder {
    position: absolute;
    top: 16px;
    left: 32px;
    transform-origin: 0 0;
    transition: transform 400ms cubic-bezier(0.25, 0.8, 0.25, 1);

    .active & {
        transform: translateY(-15px) scale(0.7);
    }

    .active-input & {
        transform: translateY(-15px) scale(0.7);
    }
}

.form-group {
    position: relative;
    margin-bottom: 30px;

    //select
    .mat-form-field-type-mat-select {
        width: 100%;

        .pop-report & {
            padding: 10px 15px 9px 20px;
            border-radius: 5px;
            background: $white-2;
            margin-top: 10px;
        }

        .mat-form-field-infix {
            padding: 10px 15px 9px 20px;
            border-radius: 0;
            background: $white-2;
            border-bottom: 2px solid $green;
            height: 56px;
        }

        .mat-form-field-wrapper {
            padding: 0;
        }

        .mat-form-field-label {
            top: 20px;
            left: 20px;
        }

        &.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
            top: 23px;
        }

        mat-label {
            color: $grey-7;
        }

        .mat-select-value-text {
            @include font-style($nominee-regular,15px,15px,normal);
            color: $blue-1;
        }

        .mat-select-arrow {
            border: none;
            width: 12px;
            height: 8px;
            background: url("/assets/icons/puce-down.svg") no-repeat 0 0;
            transform: rotate(180deg);
        }

        .mat-form-field-label-wrapper {
            top: -15px;
        }
    }

    .mat-form-field-underline {
        display: none;
    }

    //Material input
    .mat-form-field-type-mat-input, .mat-form-field-type-mat-native-select {
        width: 100%;

        .mat-form-field-wrapper {
            padding: 0;
        }

        .mat-form-field-label-wrapper {
            top: -16px;
        }

        .mat-form-field-flex {
            padding: 8px 20px 6px;
            border-radius: 0;
            color: $grey-1;
            background: $white-2;
            border-bottom: 2px solid $green;
        }

        .mat-form-field-label {
            color: $grey-7;
        }
    }

    .mat-input-element {
        @include font-style($nominee-regular,15px,18px,normal);
        color: $blue;
        resize: none;
    }

    textarea {
        min-height: 70px;
    }

    //Date picker
    .mat-datepicker-input {
        @include font-style($nominee-regular,16px,16px,normal);
        color: $blue;
        padding: 8px 0;
        border-radius: 0;

        &:focus {
            body & {
                outline: none;
                box-shadow: none;
            }
        }
    }

    &.date {
        .mat-form-field-type-mat-input {
            .mat-form-field-label-wrapper {
                top: 0;
            }

            .mat-form-field-flex {
                padding: 0 20px;
                .block-interne & {
                    height: 56px;
                }
            }

            .mat-form-field-infix {
                padding: 0;
                border: 0;
            }
        }
    }

    //Autocomplete
    .wrap-autocomplete {
        background: $white-2;
    
        .autocomplete-container {
            height: 56px;

            .form-details & {
                height: 35px;
            }
    
            input {
                height: 56px;
                padding: 0 20px;

                .form-details & {
                    padding: 0 15px;
                    height: 35px;
                }
            }
        }
    }

    //details
    app-vue-detail & {
        margin: 0;
    }
}

.mat-checkbox {
    display: table-cell !important;
    .mat-checkbox-inner-container {
        width: 20px;
        height: 20px;
    }
    .mat-checkbox-frame {
        border-color: $green;
    }
}

//Date picker
.mat-datepicker-input {
    @include font-style($nominee-regular,16px,16px,normal);
    color: $blue;
    padding: 5px 10px;
    background: $white-2;
    border: 2px solid $green;
    border-radius: 0;
    &:focus {
        body & {
            outline: none;
            box-shadow: none;
        }
    }
}

.mat-datepicker-toggle {
    color: $green;
}

//Select
.mat-option-text {
    @include font-style($nominee-regular,16px,22px,normal);
    color: $blue-1;
}

.mat-select-panel:not([class*="mat-elevation-z"]) {
    box-shadow: none;
    border: 1px solid $green;
}

.mat-option {
    &.mat-active {
        background: $green;

        .mat-option-text {
            color: $white;
        }
    }

    &:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {
        background: $green-hover;
        .mat-option-text {
            color: $blue-1;
        }
    }
}

.mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
    background: $green;
    color: $white;

    &:hover {
        background: $green;
        .mat-option-text {
            color: $white;
        }
    }
}

.mat-form-field {
    &.mat-focused {
        &.mat-primary .mat-select-arrow {
            color: $green;
        }
        
        .mat-form-field-ripple {
            background: $green;
        }
    }
}

.invalid-feedback , .error  {
    @include font-style($nominee-regular,14px,14px,normal);
    color: $red;
    position: absolute;
    left: 0;
    bottom: -18px;

    .mat-table-wrapper & {
        bottom: auto;
        top: 102px;
        left: 70px;
        z-index: 5;
        @include font-style($nominee-bold,15px,15px,normal);
        color: $black;
    }

    app-depors &, app-prospects &, app-projects &, app-opportunite & {
        left: 32px;
    }
}

.pRequis {
    @include font-style($nominee-regular,14px,14px,normal);
    color: $red;
    margin-top: 6px;
}

.form-report, .mat-expansion-panel-body, .form-details {
    .ng-autocomplete {
        display: block;
        width: 100%;
    }
    .autocomplete-container {
        box-shadow: none;
        .input-container {
            .x {
                i {
                    color: $green;
                }
            }
        }
        
        input {
            color: $blue;
            background: $white-2;
            @include font-style($nominee-regular,15px,15px,normal);
            border-radius: 5px;

            .add-project & {
                border-radius: 0;
                border-bottom: 2px solid $green;
                background: transparent;
            }

            app-vue-detail & {
                background: transparent;
                font-size: 13px;
                line-height: 13px;
            }

            app-modal-generate-reporting & {
                background: $white-2;
            }

            &:focus {
                border: 1px solid $green;
            }
        }

        .not-found {
            @include font-style($nominee-regular,15px,15px,normal);
            padding: 10px;
            border: 1px solid $green;
            margin-top: 2px;
        }

        .suggestions-container {
            a {
                @include font-style($nominee-regular,15px,15px,normal);
                color: $blue;

                &:hover {
                    background: $green-hover;
                }
            }
        }

        &.active {
            .suggestions-container.is-visible {
                box-shadow: none;
                border: 1px solid $green;
                margin-top: 2px;
            }
        }
    }
}

.mat-checkbox-checked, .mat-checkbox:active {
    &:not(.mat-checkbox-disabled){
        &.mat-accent {
            .mat-ripple-element {
                background: $green;
            }
        }
    }
}

.mat-checkbox-indeterminate, .mat-checkbox-checked {
    &.mat-accent{
        .mat-checkbox-background {
            background: $green;
        }
    } 
}
