@import '../base/states';
@import '../button/theme';
@import '../action-buttons/theme';
@import './layout';

$upload-background-color: $background !default;
$upload-border-color: rgba(0, 0, 0, .08) !default;
$upload-progress-color: $normal-text-color !default;
$upload-progress-background: $info !default;
$upload-error-color: $error !default;
$upload-error-border-color: lighten($error, 29%) !default;
$upload-success: $success !default;
$upload-disabled-color: darken($background, 27%) !default;

@include exports('upload/theme') {

.k-upload {
    border-radius: $border-radius;
    border-color: $upload-border-color;

    .k-upload-files {
        border-color: $upload-border-color;
    }

    .k-file {
        background-color: $upload-background-color;
        border-color: $upload-border-color;
    }

    .k-file-progress {
        color: $upload-progress-color;
    }

    .k-file-progress .k-progress {
        background-color: $upload-progress-background;
    }

    .k-file-success {
        color: $upload-success;
    }

    .k-file-success .k-progress {
        background-color: $upload-success;
    }

    .k-file-error {
        color: $upload-error-color;
    }

    .k-file-error .k-progress,
    .k-file-invalid .k-progress {
        background-color: $upload-error-color;
    }

    .k-file-extension-wrapper,
    .k-multiple-files-extension-wrapper {
        color: $upload-disabled-color;
        border-color: $upload-disabled-color;
    }

    .k-file-invalid .k-file-name-invalid {
        color: $upload-error-color;
    }

    .k-file-invalid-extension-wrapper,
    .k-multiple-files-invalid-extension-wrapper {
        color: $upload-error-color;
        border-color: $upload-error-border-color;
    }

    .k-file-extension-wrapper::before,
    .k-multiple-files-extension-wrapper::before {
        background-color: $upload-background-color;
        border-color: transparent transparent $upload-disabled-color $upload-disabled-color;
    }

    .k-file-invalid-extension-wrapper::before,
    .k-multiple-files-invalid-extension-wrapper::before {
        background-color: $upload-background-color;
        border-color: transparent transparent $upload-error-border-color $upload-error-border-color;
    }

    .k-multiple-files-extension-wrapper::after {
        border-top-color: $upload-disabled-color;
        border-left-color: $upload-disabled-color;
    }

    .k-multiple-files-invalid-extension-wrapper::after {
        border-top-color: $upload-error-border-color;
        border-left-color: $upload-error-border-color;
    }

    .k-file-size,
    .k-file-information,
    .k-file-validation-message {
        color: $upload-disabled-color;
    }

    .k-dropzone-hovered {
        background-color: $hover-background;
    }
}
}