/*------------------------------------*\
    #FORMS
\*------------------------------------*/

form {
    position: relative;

    .col-12 {
        position: relative;
    }
}

.form-control {
    font-family     : var(--global--font-body);
    color           : var(--global--color-body);
    font-size       : 14px;
    font-weight     : 400;
    height          : 50px;
    line-height     : 1px;
    border-radius   : 4px;
    border          : 1px solid #eaeaea;
    background-color: var(--global--color-white);
    padding-left    : 20px;
    margin-bottom   : 25px;
    position        : relative;
    box-shadow      : none;
    transition      : all 0.3s ease-in-out;

    &:focus {
        border-color: var(--global--color-heading);
        box-shadow  : none;
    }

    &::-webkit-input-placeholder {
        font-family   : var(--global--font-body);
        color         : var(--global--color-body);
        font-size     : 14px;
        text-transform: capitalize;
    }

    &::-moz-placeholder {
        font-family   : var(--global--font-body);
        color         : var(--global--color-body);
        font-size     : 14px;
        text-transform: capitalize;
    }

    &:-ms-input-placeholder {
        font-family   : var(--global--font-body);
        color         : var(--global--color-body);
        font-size     : 14px;
        text-transform: capitalize;
    }

    &.nice-select {
        width      : 100%;
        display    : flex;
        align-items: center;

        &::after {
            width       : 6px;
            height      : 6px;
            border-color: var(--global--color-body);
            right       : 20px;
        }

        &.open {
            .list {
                width: 100%;
            }
        }

        .current {
            text-transform: capitalize;
        }

        .list {
            li {
                text-transform: capitalize;
            }
        }
    }

    &+.error {
        position: absolute;
        bottom  : 3px;
        left    : 16px;
        color   : red;
    }

    &.error {
        border-color: red;
    }
}

.form-label {
    font-family  : var(--global--font-body);
    font-weight  : 700;
    font-size    : 14px;
    color        : var(--global--color-secondary);
    margin-bottom: 9px;
}

.custom-radio-group {
    display      : flex;
    margin-bottom: 10px;

    @media #{$maxSmall} {
        flex-wrap: wrap;
    }

    .custom-control {
        position     : relative;
        min-height   : 0;
        margin-right : 30px;
        margin-bottom: 14px;

        .custom-control-input {
            opacity: 0;

            &:checked {
                ~label {
                    &::after {
                        background-color: var(--global--color-primary);
                        opacity         : 1;
                        transform       : scale(1);
                    }
                }
            }
        }

        label {
            font-size     : 14px;
            font-family   : var(--global--font-body);
            font-weight   : 400;
            color         : var(--global--color-body);
            margin-bottom : 0;
            line-height   : 1.9;
            text-transform: capitalize;
            cursor        : pointer;
            padding-left  : 10px;

            &::before {
                content      : '';
                position     : absolute;
                top          : 50%;
                transform    : translateY(-50%);
                left         : 0;
                border-radius: 4px;
                border       : 3px solid #eaeaea;
                width        : 17px;
                height       : 17px;
            }

            &::after {
                content         : '';
                display         : inline-block;
                position        : absolute;
                width           : 7px;
                height          : 7px;
                border-radius   : 50%;
                left            : 5px;
                top             : 9px;
                background-color: transparent;
                transition      : 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                opacity         : 0;
                transform       : scale(0)
            }
        }
    }
}

textarea.form-control {
    height: auto;
}

.form-select {
    position: relative;

    i {
        position      : absolute;
        font-size     : 19px;
        font-weight   : 400;
        line-height   : 49px;
        right         : 20px;
        top           : 0;
        z-index       : 1;
        pointer-events: none;
        cursor        : pointer;
        color         : var(--global--color-body);
    }

    select {
        line-height: 1;
        color      : var(--global--color-body);
        cursor     : pointer;
        appearance : none;
    }
}

/* Input Checkbox */

.input-checkbox {
    margin-bottom: 30px;

    p {
        display      : block;
        position     : relative;
        font-size    : 13px;
        padding-left : 30px;
        line-height  : 20px;
        text-align   : left;
        margin-bottom: 0;
    }
}

.label-checkbox {
    display    : block;
    position   : relative;
    cursor     : pointer;
    font-size  : 18px;
    line-height: 18px;
    z-index    : 2;

    input {
        position: absolute;
        z-index : -1;
        opacity : 0;
    }

    .check-indicator {
        position     : absolute;
        top          : 2px;
        left         : 0;
        height       : 17px;
        width        : 17px;
        background   : transparent;
        border       : 1px solid #e1e3e3;
        border-radius: 2px;

        &:after {
            content     : "";
            position    : absolute;
            display     : none;
            left        : 4px;
            top         : 1px;
            width       : 6px;
            height      : 12px;
            border      : solid var(--global--color-primary);
            border-width: 0 2px 2px 0;
            transform   : rotate(45deg);
        }
    }

    input:checked~.check-indicator {
        background: var(--global--color-white);

        &:after {
            display: block;
        }
    }
}