/*** Common form elements style ***/

#uploadform {
    display: none;
}

form.smart-upload,
input.smart-upload {
    visibility: hidden;
    width: 1px;
    height: 1px;
    opacity: 0;
}


/* TODO: review when decided what css framework to use */
.propform {
    width: 100%;
}

.formcontent {
    padding: 1em;

    .row {
        margin-right: 0; /* without these the form is too wide causing horizontal scrollbar appearence */
        margin-left: 0;
    }
    .row .input-group {
        padding-right: 0; /* without these e.g. inputs in compose screen are not aligned properly */
        padding-left: 0;
    }
}

.formbuttons {
    padding: 0 1em 1em 1em;
}


/* Some common icons for "iconized inputs" */
.input-group-addon.icon {
    text-decoration: none;

    &:before {
        &:extend(.font-icon-class);
        margin: 0;
        line-height: 1;
    }
    &.user:before {
        content: @fa-var-user;
    }
    &.pass:before {
        content: @fa-var-lock;
    }
    &.host:before {
        content: @fa-var-home;
    }
    &.cancel:before {
        content: @fa-var-close;
    }
    &.edit:before {
        content: @fa-var-pencil;
    }
    &.add:before {
        content: @fa-var-plus;
    }

    .inner {
        display: none;
    }
}


td.editfield { width: 99%;  /* TODO */ }


/*** Smart recipient input field ***/

.recipient-input {
    display: block !important; /* overwrites Bootstrap */
    min-height: 2.4em;
/*    padding: 0.2em 0.5em; */

    .recipient {
        border: 1px solid #ddd; /* TODO */
        background-color: #f4f4f4; /* TODO */
        border-radius: 0.25em;
        padding: 0 0.25em;
        margin-right: 0.2em;
        display: inline-block;
        white-space: nowrap;
    }

    .name {
        max-width: 25em;
        display: inline-block;
        line-height: 1.1;
        padding: 0.25em;
        vertical-align: middle;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .email {
        text-indent: -5000rem;
        display: inline-block;
        width: 0;
    }

    .quotes {
        position: absolute;
        width: 0;
        opacity: 0;
    }

    a.button.icon:before {
        font-size: 0.9em;
        float: initial;
        display: inline-block;
        width: 1em;
        margin: 0;
        cursor: pointer;
    }
}