@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';
@import '../2-Tools/transitions';

$input-margin-vertical: 10px;
$input-margin-horizontal: 8px;

.input-field {
    margin-bottom: 15px;

    label, span:not(.help-text) {
        display: block;
        text-align: left;
        margin-bottom: 5px;
        text-transform: capitalize;
    }

    input {
        &[type=text],
        &[type=email],
        &[type=search],
        &[type=password] {
            margin-bottom: 5px;
            border-radius: 5px;
            display: block;
            padding: $input-margin-vertical $input-margin-horizontal;
            outline: none;
            width: 100%;
            box-sizing: border-box;
            transition: $transition-xfast-out;
            
            @include themify {
                background: themed('textInputBackground');
                border: 2px solid themed('textInputBorder');
                color: themed('textInputColor');
            }

            &::placeholder {
                font-style: italic;
                color: $text-inactive-color;
            }
        }
    }

    .help-text {
        font-size: .8rem;

        &.error, &.info {
            background: none;
        }

        &.error {
            color: $error;
        }

        &.info {
            color: $info;
        }
    }

    // overrides for input flavours
    &.inline {
        margin-bottom: 0;
    }
    &.error, &.success {
        background: transparent !important;
        border: none;
    }

    &.error {
        input[type=text],
        input[type=email],
        input[type=search],
        input[type=password] {
            border-color: $error;
            background-color: $error-tint;
        }

        span, .help-text, * {
            color: $error;
        }
    }

    &.success {
        input[type=text],
        &[type=email],
        input[type=search],
        input[type=password] {
            border-color: $success;
            background-color: $success-tint;
        }

        span, .help-text {
            color: $success;
        }
    }

    // to override every class on hover
    &.has-icon {
        // display: flex;
        // align-items: center;
        position: relative;

        .icon-container {
            position: relative;
        }

        input {
            &[type=text],
            &[type=email],
            &[type=search],
            &[type=password] {
                padding-right: 32px;

                &:focus {
                    padding-right: 32px;
                }
            }

            & + .material-icons {
                position: absolute;
                right: 5px;
                top: 50%;
                transform: translateY(-50%);
                color: $text-color;
                opacity: .6;
                pointer-events: none;
                transition: $transition-mid-out;

                &.clickable {
                    pointer-events: all;
                    cursor: pointer;
        
                    &:hover {
                        opacity: 1;
                    }
                }
            }
        }
    }

    input {
        &[type=text],
        &[type=email],
        &[type=search],
        &[type=password] {
            &:focus {
                border-color: $input-text-focus-border-color;
                // padding: ($input-margin-vertical - 1) $input-margin-horizontal;
                background: transparent !important;
            }
        }
    }
}


.file-input {
    // position: relative;

    input[type=file] {
        display: none;
    }

    .input-display {
        height: 100%;
        display: flex;

        button, .btn {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .file-name {
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            flex: 1;
            display: flex;
            align-items: center;
            padding: 0 10px;
            cursor: pointer;

            @include themify {
                background: themed('fileInputBackground')
            }

            span {
                flex: 1;
            }

            .close-btn {
                opacity: 0;
                transition: $transition-fast-in-out;

                &.show {
                    opacity: 1;
                }
            }
        }
    }

    .drop-area {
        width: 100%;
        min-height: 100px;
        margin-top: 10px;
        cursor: pointer;
        transition: $transition-fast-in-out;
        
        @include themify {
            border: 2px dashed themed('fileInputBorder')
        }

        @include mobile-only {
            display: none
        }
        
        .placeholder {
            width: 100%;
            height: 100%;
            text-align: center;
            margin: 20px 0;
            transition: $transition-fast-in-out;

            i.material-icons, span {
                display: block;
                transition: $transition-fast-in-out;
            }

            i.material-icons {
                font-size: 74px;

                @include themify {
                    color: themed('fileInputIcon')
                }
            }

            span {
                color: $grey;
                text-transform: capitalize;
                margin-bottom: 5px;
            }

            button {
                display: none;
                padding: .75rem .9rem;

                &.show {
                    display: inline-block;
                }
            }

            &.close-height {
                transition-duration: 2s;
            }

        }

        // flavour
        &.error {
            background: none; /* reset default error class */
            border-color: $error;
            
            i.material-icons, span {
                color: $error;
            }
        
        }
        
        &:hover, &.highlight {
            border-color: $primary-color;
            
            span {
                @include themify {
                    color: themed('fileInputHoverText')
                }
            }
            
            i.material-icons {
                @include themify {
                    color: themed('fileInputHoverIcon')
                }
            }
        }


        .image-preview {
            width: 100%;
            height: 100%;


            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .help-text {
        font-size: .8rem;

        &.error {
            color: $error;
            background: none;
        }

        &.info {
            color: $info;
            background: none;
        }
    }
}