@import '../icons/main';
@import '../button/layout';
@import '../action-buttons/layout';

@include exports('upload/layout') {

html .k-upload {
    position: relative;
}

.k-upload {
    border-width: 1px;
    border-style: solid;

    .k-action-buttons {
        margin: -6px 0 0;
    }
}

.k-dropzone em,
.k-upload-button {
    vertical-align: middle;
}

.k-dropzone,
.k-file {
    position: relative;
}

.k-dropzone {
    border-style: solid;
    border-width: 0;
    padding: .8em;
    background-color: transparent;
}

.k-dropzone em {
    visibility: hidden;
    margin-left: .6em;
}

.k-dropzone-active em {
    visibility: visible;
}

.k-upload-button {
    position: relative;
    overflow: hidden;
    direction: ltr;
}

.k-upload .k-upload-button {
    min-width: 7.167em;
}

.k-upload-sync .k-upload-button,
.k-ie8 .k-upload-button,
.k-ie9 .k-upload-button {
    margin: .8em;
}

.k-upload-button input {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    font: 170px monospace !important; /* critical for correct operation; larger values lead to ignoring or text layout problems in IE */
    filter: alpha(opacity=0);
    opacity: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.k-upload-files {
    line-height: 2.66;
    border-style: solid;
    border-width: 1px 0 0;
    margin: 0;
    padding: 0 0 5px;
}

.k-upload-status .k-warning {
    display: none;
}

.k-upload-status-total .k-icon {
    display: inline-block;
    margin-right: 4px;
}

.k-dropzone .k-upload-status-total {
    top: 50%;
    transform: translateY(-50%);
}

.k-upload .k-fail {
    background-position: -161px -111px;
}

.k-file {
    border-style: solid;
    border-width: 0 0 1px;
    padding: .65em .17em .65em 1em;
    list-style: none;
}

.k-file .k-icon {
    position: relative;
}

.k-file-extension-wrapper,
.k-file-name-size-wrapper,
.k-multiple-files-extension-wrapper,
.k-file-invalid-extension-wrapper,
.k-multiple-files-invalid-extension-wrapper {
    display: inline-block;
}

.k-file-extension-wrapper,
.k-multiple-files-extension-wrapper,
.k-file-invalid-extension-wrapper,
.k-multiple-files-invalid-extension-wrapper {
    position: relative;
    width: 28px;
    height: 38px;
    border-width: 2px;
    border-style: solid;
    vertical-align: top;
    font-size: .57em;
    text-transform: uppercase;
}

.k-file-invalid-extension-wrapper,
.k-multiple-files-invalid-extension-wrapper {
    font-size: 1.2em;
}

.k-multiple-files-extension-wrapper,
.k-multiple-files-invalid-extension-wrapper {
    margin-top: 4px;
}

.k-file-state {
    visibility: hidden;
}

.k-file-name-size-wrapper {
    vertical-align: middle;
    margin-left: 1em;
}

.k-file-extension-wrapper::before,
.k-multiple-files-extension-wrapper::before,
.k-multiple-files-extension-wrapper::after,
.k-file-invalid-extension-wrapper::before,
.k-multiple-files-invalid-extension-wrapper::before,
.k-multiple-files-invalid-extension-wrapper::after {
    position: absolute;
    content: '';
    display: inline-block;
    border-style: solid;
}

.k-file-extension-wrapper::before,
.k-multiple-files-extension-wrapper::before,
.k-file-invalid-extension-wrapper::before,
.k-multiple-files-invalid-extension-wrapper::before {
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-width: 6px;
    margin-top: -1px;
    margin-right: -1px;
}

.k-multiple-files-extension-wrapper::after,
.k-multiple-files-invalid-extension-wrapper::after {
    top: -6px;
    left: -6px;
    width: 15px;
    height: 35px;
    border-width: 2px 0 0 2px;
}

.k-file-extension,
.k-file-invalid-icon {
    position: absolute;
    bottom: 0;
    line-height: normal;
}

.k-file-extension {
    margin-left: .4em;
    margin-bottom: .3em;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.k-file-invalid-icon {
    margin-left: 5px;
}

.k-file-name,
.k-file-size,
.k-file-validation-message,
.k-file-information {
    display: block;
}

.k-file-name {
    position: relative;
    min-width: 10em;
    max-width: 16.667em;
    vertical-align: middle;
    line-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.k-file-size,
.k-file-information,
.k-file-validation-message {
    font-size: .78em;
    line-height: 1.5em;
}

.k-file-information,
.k-file-validation-message {
    line-height: 1.5em;
}

.k-file-size {
    line-height: 1.2em;
}

.k-upload-status {
    position: absolute;
    right: 10px;
    top: 0;
}

.k-upload-status .k-button {
    vertical-align: text-bottom;
}

.k-dropzone .k-upload-status {
    line-height: 2.4;
}

.k-upload-pct {
    margin-right: .75em;
}

.k-ie8 .k-upload-status-total {
    line-height: 29px;
}

.k-ie8,
.k-ie9 {
    .k-upload-status-total {
        top: 1.5em;

        > .k-icon {
            margin-top: -3px;
        }
    }
}

.k-upload-action {
    line-height: normal;
}

.k-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
}

.k-file-invalid > .k-progress {
    width: 100%;
}

.k-rtl .k-file-extension-wrapper {
    margin-left: 14px;
}
}