@import "../../../css/static/mixin";
@import "../../../css/static/properties";

html:root {
    --input-field-border: #111112;
    --input-field-background: #121213;
    --input-field-text: #b3b3b3;
    --input-field-placeholder: #606060;

    --input-field-disabled-background: #1a1819;

    --input-field-focus-border: #111112;
    --input-field-focus-background: #121213;
    --input-field-focus-text: #b3b3b3;

    --input-field-invalid-border: #721c1c;
    --input-field-invalid-background: #180d0d;
    --input-field-invalid-text: #b3b3b3;
}

.container {
    border-radius: .2em;
    border: 1px solid var(--input-field-border);

    background-color: var(--input-field-background);

    display: flex;
    flex-direction: row;
    justify-content: stretch;

    color: var(--input-field-text);

    &.size-normal {
        height: 2em;
    }

    &.size-large {
        height: 2.5em;
    }

    &.size-small {
        height: 1.7em;
    }

    @include placeholder(&) {
        color: var(--input-field-placeholder);
    };

    .prefix {
        flex-grow: 0;
        flex-shrink: 0;

        margin: 0;

        line-height: initial;
        align-self: center;
        padding: 0 .5em;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        opacity: 1;

        @include transition($button_hover_animation_time ease-in-out);
    }

    &.is-invalid {
        background-color: var(--input-field-invalid-background);
        border-color: var(--input-field-invalid-border);
        color: var(--input-field-invalid-text);

        background-image: unset!important;
    }

    &:focus, &:focus-within {
        background-color: var(--input-field-focus-background);
        border-color: var(--input-field-focus-border);

        color: var(--input-field-focus-text);

        .prefix {
            width: 0;
            padding-left: 0;
            padding-right: 0;
            opacity: 0;
        }
    }

    input, select, .inputBox {
        flex-grow: 1;
        flex-shrink: 1;

        background: transparent;

        border: none;
        outline: none;
        margin: 0;

        //color: #b3b3b3;
        min-width: 2em;

        &.editable {
            cursor: text;
        }
    }

    .inputBox {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .prefix + input {
        padding-left: 0;
    }


    &:focus, &:focus-within {
        .prefix + input {
            padding-left: .5em;
        }
    }

    &.disabled, &:disabled {
        background-color: var(--input-field-disabled-background);
    }

    &.noRightIcon {
        input, select {
            padding-right: .5em;
        }
    }

    &.noLeftIcon {
        input, select {
            padding-left: .5em;
        }
    }

    @include transition($button_hover_animation_time ease-in-out);
}