@use '../../base';

.list-widget,
.search-widget,    
.timedatepicker-widget {
    &>div,
    &>input {
        display: inline-block;
    }
    &>input {
        // margin-left: 5px;
        // height: 35px;
        // width: 60px;
        height: 35px;
        border-color: #ccc;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        color: #555;
        float: none;
        padding: 6px 12px;
    }
    &>input.day {
        width: 105px;
    }
    &>input.year {
        width: 60px;
    }
}

.date-widget {
    &>.easy-autocomplete {
        width: 176px!important;
        
        .easy-autocomplete-container {
            
            ul {
                
                li {
                    position: relative;
                    width: 296px;
                    padding-right: 120px;
                    
                    span {
                        display: block;
                        position: absolute;
                        top: 0;
                        right: 0;
                        height: 30px;
                        width: 60px;
                        line-height: 20px;
                        text-align: left;
                        padding: 5px 12px;
                        font-size: 14px;
                        
                        &.start {
                            right: 60px;
                        }
                    }
                }
            }
        }
    }
    input {
        border-color: #ccc;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        color: #555;
        float: none;
        padding: 6px 10px;
    }
}

.search-widget {
    
    &>input {
        width: 150px;
        border-color: #ccc;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        color: #555;
        float: none;
        padding: 6px 12px;
    }
    
}

.number-widget {
    &>form {
        display: inline-block;
        
        &>input {
            height: 35px;
            border-color: #ccc;
            border-radius: 4px;
            border-style: solid;
            border-width: 1px;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
            color: #555;
            float: none;
            padding: 6px 12px;
        } 
    }
    &>div {
        display: inline-block;
    }
}

.SearchWidget,
.DatesWidget {
    max-width: 600px;
    white-space: nowrap;
    &>div,
    &>input {
        display: inline-block;
        
    }
    &>input {
        width: 70px;
        height: base.$height-components-under;
        border-color: #ccc;
        border-radius: 4px;
        border-style: solid;
        border-width: 1px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) inset;
        color: #555;
        float: none;
        padding: 6px 12px;
    }
    .easy-autocomplete>input {
        width: 100%;
    }
}

.SearchWidget {
    &>input {
        width: 200px;
    }
}