.app-base-component-container {
    //font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-family: 'Roboto', sans-serif;

    position: relative;

    &.transparent {
        input {
            background: transparent !important;
        }
    }

    &.rounded {
        input {
            @include border-radius(100px !important);
        }
    }

    //INPUT---------------
    > .ui.input {
        & + .app-placeholder-label {
            font-size: 1em;
            //line-height: 1em;
            font-weight: 400;
            position: absolute;
            top: 21px;
            pointer-events: none;
            left: 20px;
            color: #93a4aa;
            height: auto;
            z-index: 1;
            cursor: text;
            text-align: left;
            display: inline-block;
            @include transition(0.2s ease all);
        }

        &.huge {
            & + .app-placeholder-label {
                font-size: 20px;
                top: 23px;
            }
        }

        &.massive {
            & + .app-placeholder-label {
                font-size: 27px;
                top: 30px;
            }
        }

        &.large {
            & + .app-placeholder-label {
                font-size: 15px;
                top: 18px;
            }
        }

        &.medium {
            & + .app-placeholder-label {
                font-size: 13px;
                top: 16px;
            }
        }

        &.small {
            & + .app-placeholder-label {
                font-size: 12px;
                top: 14px;
            }
        }

        &.selection {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            height: auto;
            //padding: .67857143em 1em;
            //padding: 0 !important;
            padding-left: 18px;
            padding-top: 15px;


            &.small {
                font-size: 13px ;
                min-height: 40px;

                & > .ui.label {
                    padding: 2px 4px;
                    margin: 3px 3px 0 0;
                }
            }

            &.medium {
                font-size: 14px ;
                min-height: 43px;

                & > .ui.label {
                    padding: 2px 4px;
                    margin: 3px 3px 0 0;
                }
            }

            &.large {
                font-size: 17px ;
                min-height: 49px;

                & > .ui.label {
                    padding: 2px 4px;
                    margin: 3px 3px 0 0;
                }
            }

            &.big {
                min-height: 54px !important;

                & > input.search {
                    font-size: 15px;
                    //margin-top: -5px !important;
                }

                & > .text {
                    top: 4px !important;
                }
            }

            &.massive {
                min-height: 72px !important;

                & > .text {
                    top: 6px !important;
                }

            }

            &.multiple {
                padding-bottom: 5px;
            }

            &:not(.multiple) {
                // height: 54px;
                // min-height: 54px;
                align-items: center;
                justify-content: flex-start;
                flex-wrap: wrap;

                & > .text {
                    top: 1px;
                }

                & > input.search {
                    width: 100% !important;
                    height: 100%;
                    padding: .67857143em 2.1em .67857143em 1em !important;
                    padding-left: 18px !important;
                }
            }

            & > .ui.label {
                font-size: 11px;
                margin: 4px 3px 0 0;
                padding: 4px 4px;
                border-radius: 1px;
                font-weight: 400;
                border: none !important;
                box-shadow: none;
                background: #eee;
                flex-shrink: 0;

                i {
                    font-size: 11px;
                }
            }

            & > input.search {
                align-self: center;
            }

            & > .menu {
                div {
                    font-size: 13px;

                    &.header {
                        font-size: 15px;
                    }
                }
            }

            & > input {
                margin: 0 !important;
                padding: 0 !important;
                padding-left: 5px !important;
                flex-grow: 1;
                flex-shrink: 1;
                left: 0 !important;
                width: 0 !important;
            }
        }

        &.labeled {
            .label.label {
                display: flex;
                align-items: center;
                font-size: 14px;
                color: $text
            }

            &:not(.right) {
                & + .app-placeholder-label {
                    display: none;
                }
            }
        }

        > input {
            //width: 100%;
            padding-left: 18px !important;

            & + i {
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }

    }

    &.data-active {
        > .ui.input {
            & + .app-placeholder-label {
                font-size: 10px;
                letter-spacing: .5px;
                top: 5px;
                //color: #39495B;
            }
        }

        &.small {
            & + .app-placeholder-label {
                top: 2px !important;
            }
        }

    }

    &.line {
        > .ui.input {

            & + .app-placeholder-label {
                left: 0px;
            }

            input {
                padding-left: 0 !important;
                @include border-radius(0 !important);
                border-top: none !important;
                border-left: none !important;
                border-right: none !important;
                background: transparent;

                &:focus {
                    background: transparent;
                }
            }
        }

        &.data-active {
            > .ui.input {
                & + .app-placeholder-label {
                    font-size: 10px;
                    letter-spacing: .5px;
                    top: 0px;
                    //color: #39495B;
                }
            }

        }

    }

    &.error-label {
        > .app-form-error-container {
            font-size: 11px;
            color: $red;
            margin-top: 2px;
            margin-left: 18px;
            position: absolute;
            top: 100%;

            svg {
                font-size: 10px;
                margin-right: 5px;
            }
        }

        input, .selection {
            border:1px solid $red !important;
            background: lighten($red, 48%) !important;
        }

    }
}