// Custom input file upload
.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    width: 100%;
    border: 1px solid $input-border;
    border-radius: $border-radius-base;
    font-weight: normal;
    height: 32px;
    
    line-height: 19px; //Puts text in vertical center
    position: relative;
    display: table;
    margin-bottom: 0;

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


    div.text {
        color: $color-gray-60;
        display: table-cell;
        float: left;
        margin-top: -1px;
        padding: 6px 8px;
        padding-top: 7px;
        padding-bottom: 5px;
        width: 100%;
        overflow: hidden;
        font-size: 14px;
        letter-spacing: normal;
    }

    div.icon {
        display: table-cell;
        width: 1%;
        white-space: nowrap;
        vertical-align: middle;
        line-height: 1;
        border-left: 1px solid $input-border;
        padding: 5px;

        svg {
            width: 20px;
            height: 20px;
            color: $color-primary;
            fill: $color-primary;
            margin-bottom: -3px;
        }
    }

    
    &.file-selected span.text {
        color: $text-color;
    }
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 0;
}
//Custom file input end