span.save_widget {
    height: 30px;
    margin-top: 4px;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    width: 50%;
    flex: 1;
    
    span.filename {
        height: 100%;
        line-height: 1em;
        margin-left: @padding-large-horizontal;
        border: none;
        font-size: 146.5%;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        &:hover{
            // ensure body is lighter on dark palette, 
            // and vice versa
            background-color:contrast(@body-bg, lighten(@body-bg,30%), darken(@body-bg,10%));
        }
        .corner-all;
    }
}

[dir="rtl"] span.save_widget.pull-left {
    .pull-right();
}

[dir="rtl"] span.save_widget {
    span.filename {
        margin-left : 0;
        margin-right : @padding-large-horizontal;
    }
}

span.checkpoint_status, span.autosave_status {
    font-size: small;
    white-space: nowrap;
    padding: 0 5px;
}

@media (max-width: @screen-xs-max) {
    span.save_widget {
        font-size: small;
        padding: 0 0 0 5px;
    }
    span.checkpoint_status, span.autosave_status {
        display: none;
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    span.checkpoint_status {
        display: none;
    }
    span.autosave_status {
        font-size: x-small;
    }
}
