.inputContainer {
    display: flex;
    flex-direction: row;
}

input {
    flex-grow: 1;
    box-sizing: border-box;
    height: 100%;
    border:none;
    outline:none;
    background:none;
    min-width: 20px;
    width: inherit;

    &::placeholder {
        font-style: italic;
        color: #c9c9c9;
    }
}

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

    &:hover {
        cursor: pointer;

        svg {
            fill: #0577b0;
        }
    }
}
:global(textarea.ant-input) {
    border-radius: 4px;
    padding: 4px 5px;
    font-size: 13px;
    color: #666666;
}


.readonly {
     input {
         cursor: default;
     }

    .allowClearContainer:hover {
        cursor: default;

        svg {
            fill: #636363;
        }
    }
}

.disabled {
    input {
        cursor: not-allowed;
    }

    .allowClearContainer:hover {
        cursor: not-allowed;

        svg {
            fill: #636363;
        }
    }
}

.disabled input, .readonly input {
    text-overflow: ellipsis;
}

/* * *
 * INPUT-NUMBER
 * * *
 */
.incrementArrowsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;

    &.disabled {
        .incrementArrowsButton svg,
        .incrementArrowsButton:hover svg,
        .incrementArrowsButton:active svg{
            fill: #929292;
        }
    }

    .incrementArrowsButton {
        position: relative;

        height: 50%;
        width: 100%;

        &:hover {
            svg {
                fill: #019cf5;
            }
        }

        &:active {
            svg {
                fill: #0074b7;
            }
        }

        svg {
            position: absolute;
            left: 50%;
            top: 50%;
            display: block;
            transform: translate(-50%, -50%) scale(0.5);
        }
    }
}

/* * *
 * SIZE-EXTRA-SMALL
 * * *
 */
.sizeXs {
    input {
        font-size: 9px;
        height: 9px;
    }

    .allowClearContainer {
        width: 9px;
        height: 9px;
    }

    &.incrementArrowsContainer {
        width: 9px;
        height: 8px;
    }
}

/* * *
 * SIZE-SMALL
 * * *
 */

.sizeS {
    input {
        font-size: 12px;
        height: 18px;
    }

    .allowClearContainer {
        width: 11px;
        height: 18px;
    }

    &.incrementArrowsContainer {
        height: 18px;
        width: 11px;
    }
}

/* * *
 * SIZE-MIDDLE
 * * *
 */

.sizeM {
    input {
        padding: 4px 0;
        font-size: 13px;
        height: 26px;
    }

    .allowClearContainer {
        width: 13px;
        height: 26px;
    }

    &.incrementArrowsContainer {
        height: 24px;
        width: 13px;

        .incrementArrowsIcon {
            width: 13px;
            height: 13px;
        }
    }
}

/* * *
 * SIZE-LARGE
 * * *
 */

.sizeL {
    input {
        padding: 8px 0;
        font-size: 15px;
        height: 38px;
    }

    .allowClearContainer {
        width: 15px;
        height: 38px;
    }

    &.incrementArrowsContainer{
        width: 15px;
        height: 38px;

        .incrementArrowsIcon {
            width: 15px;
            height: 15px;
        }
    }
}

/* * *
 * SIZE-EXTRA-LARGE
 * * *
 */

.sizeXl {
    input {
        padding: 0;
        font-size: 18px;
        height: 46px;
    }

    .allowClearContainer {
        width: 19px;
        height: 46px;
    }

    &.incrementArrowsContainer {
        width: 19px;
        height: 46px;

        .incrementArrowsIcon {
            width: 20px;
            height: 20px;
        }
    }
}

.colorInputPrefix {
    margin: 0px -8px 0px -8px;

    svg {
        margin: 6px 0px 3px 0px;
        width: 45px;
    }
}