@import "../../assets/theme";
@import "datepicker";

div.input-group {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

div.input-field {
    margin: 1.5rem 0;

    label {
        font-weight: 600;
        font-size: 1.2rem;
        color: var(--color-grey);
        display: flex;
        justify-content: left;
        align-items: center;
        position: relative;
        margin-bottom: 2px;

        button.helper {
            width: 1.2rem;
            height: 1.2rem;
            margin-left: 0.5rem;

            svg {
                fill: var(--color-primary);
            }

            cursor: help;
        }
    }

    div.input-container {
        position: relative;

        svg {
            position: absolute;
            left: 1rem;
            width: 1rem;
            height: 1rem;
            top: 1.6rem;
            fill: var(--color-text);
        }

        input, textarea {
            height: 4.2rem;
            @extend .input-theme;
        }

        textarea {
            resize: vertical;
            padding: 1rem !important;
        }

        div.multiselect {
            height: 4.2rem;
            @extend .multiselect-theme;
        }

        div.editor {
            @extend .input-theme;
        }

        span.error {
            display: block;
            margin: 0.5rem 0;
            font-size: 1.2rem;
            color: var(--color-red);
        }

        &.has-icon {
            input {
                padding-left: 2.5rem;
            }
        }
    }
}

.input-theme {
    display: flex;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--color-grey);
    border: 1px solid var(--color-lighter-grey);
    padding: 0 1rem;
    width: 100%;
    border-radius: var(--input-radius);

    transition: all ease 0.18s;

    &:active, &:focus {
        outline: none;
    }

    &:hover {
        border: 1px solid var(--color-lighter-grey-hover);
    }

    &::placeholder {
        font-size: 1.3rem;
        opacity: 0.5;
        color: var(--color-light-grey);
    }

    &.error {
        border: 1px solid var(--color-red);
    }
}

.multiselect-theme {
    div.multiselect__tags {
        @extend .input-theme;
        align-items: center;

        .multiselect__placeholder {
            padding: 0;
            margin: 0;
            font-size: 1.3rem;
            opacity: 0.5;
            color: var(--color-light-grey);
        }
    }

    .multiselect__option {
        font-size: 1.3rem;
        color: var(--color-grey);
        transition: all ease 0.18s;
    }

    .multiselect__option--highlight,
    .multiselect__option--selected {
        background-color: var(--color-table-grey);
        color: var(--color-grey);
        font-weight: 400;
        font-size: 1.3rem;
    }

    .multiselect__single {
        padding: 0;
        margin: 0;
        font-size: 1.3rem;
        font-weight: 500;
        color: var(--color-grey);
    }

    .multiselect__select {
        display: flex;
        align-items: center;
        justify-content: center;

        &:before {
            position: initial;
        }
    }
}