@import "../global.less";

// See Button for file button styles
// See Progress for progress styles

/* Font size */
@veui-uploader-font-size-s: @veui-font-size-s;
@veui-uploader-font-size-m: @veui-font-size-m;
@veui-uploader-font-size-l: @veui-font-size-l;

@veui-uploader-upload-icon: @veui-color-gray-9;
@veui-uploader-upload-spacing: @veui-padding-unit * 1;

// file button spacing with helper text
@veui-uploader-helper-text-spacing-file-xs: @veui-padding-unit * 1;
@veui-uploader-helper-text-spacing-file-s: @veui-padding-unit * 1;
@veui-uploader-helper-text-spacing-file-m: @veui-padding-unit * 2;
@veui-uploader-helper-text-spacing-file-l: @veui-padding-unit * 3;

@veui-uploader-helper-text-spacing-image: @veui-padding-unit * 3;
@veui-uploader-helper-text-font-color: @veui-font-color-weak;
@veui-uploader-helper-text-max-width-image: 10em;

//file button margin with list
@veui-uploader-file-item-spacing-y-xs: @veui-padding-unit * 1;
@veui-uploader-file-item-spacing-y-s: @veui-padding-unit * 1;
@veui-uploader-file-item-spacing-y-m: @veui-padding-unit * 2;
@veui-uploader-file-item-spacing-y-l: @veui-padding-unit * 3;
@veui-uploader-file-item-action-spacing: @veui-padding-unit * 2;

// file list item styles
@veui-uploader-file-item-padding-x: @veui-padding-unit * 1;
@veui-uploader-file-item-label-spacing-before: @veui-padding-unit * 1;
@veui-uploader-file-item-label-spacing-after: @veui-padding-unit * 3;
@veui-uploader-file-item-width: @veui-height-unit * 64;
@veui-uploader-file-item-height: @veui-height-unit * 5;
@veui-uploader-file-item-background-color: transparent;
@veui-uploader-file-item-background-color-hover: @veui-background-color-normal-hover;
@veui-uploader-file-item-icon-color: @veui-icon-color-aux;
@veui-uploader-file-item-disabled-icon: @veui-color-gray-4;
@veui-uploader-file-item-list-icon: @veui-color-gray-9;

@veui-uploader-file-padding-x-xs: @veui-padding-unit * 3 - 1;
@veui-uploader-file-padding-x-s: @veui-padding-unit * 4 - 1;
@veui-uploader-file-padding-x-m: @veui-padding-unit * 4 - 1;
@veui-uploader-file-padding-x-l: @veui-padding-unit * 4 - 1;

// feedback
@veui-uploader-error-color: @veui-color-error-6;
@veui-uploader-success-color: @veui-color-success-6;

// upload image
@veui-uploader-image-height: @veui-height-unit * 30;
@veui-uploader-image-width: @veui-uploader-image-height;
@veui-uploader-image-icon-size: @veui-uploader-image-height / 3 - 1;
@veui-uploader-image-icon-color: @veui-icon-color-aux-disabled;
@veui-uploader-image-padding-x: @veui-padding-unit * 3;
@veui-uploader-image-content-spacing: @veui-padding-unit * 3;
@veui-uploader-image-uploading-border-radius: @veui-border-radius-l;

// See button for upload image button styles

// mask
@veui-uploader-mask-icon-color: @veui-color-gray-1;
@veui-uploader-mask-icon-spacing: @veui-padding-unit * 3;
@veui-uploader-mask-padding-y: @veui-padding-unit * 1;
@veui-uploader-mask-padding-x: @veui-padding-unit * 3;
@veui-uploader-mask-opacity: 0.4;

@veui-uploader-mask-background-color: rgba(0, 0, 0, .4);

// See whole view styles in dialog styles

@veui-uploader-image-spacing-x: @veui-padding-unit * 4;
@veui-uploader-image-spacing-y: @veui-padding-unit * 6;
@veui-uploader-image-error-spacing: @veui-padding-unit * 1;

// image preview
@veui-uploader-image-preview-min-width: @veui-height-unit * 60;
@veui-uploader-image-preview-max-width: @veui-height-unit * 120;

// media
@veui-uploader-media-icon-size: @veui-uploader-image-height / 3 - 1;
@veui-uploader-media-icon-color: @veui-icon-color-aux-disabled;

@veui-uploader-foreground-color-success: @veui-color-success-6;
@veui-uploader-foreground-color-error: @veui-color-error-6;

@veui-uploader-media-width: 120px;
@veui-uploader-media-height: 120px;
@veui-uploader-media-spacing-y: @veui-padding-unit * 4;
@veui-uploader-media-spacing-x: @veui-padding-unit * 4;
@veui-uploader-media-padding-x: @veui-padding-unit * 2;
@veui-uploader-media-padding-x-m: @veui-padding-unit * 3;
@veui-uploader-media-content-spacing: @veui-padding-unit * 1;

@veui-uploader-media-background-color-hover: @veui-color-gray-3;
@veui-uploader-media-background-color-active: @veui-color-gray-4;

@veui-uploader-media-border-color: @veui-color-gray-5;
@veui-uploader-media-border-color-error: @veui-color-error-6;
@veui-uploader-media-error-spacing: @veui-padding-unit * 2;

@veui-button-border-color-basic: @veui-border-color-normal;
@veui-button-background-color-basic: @veui-background-color-normal;

@veui-uploader-helper-text-spacing-file: @veui-padding-unit * 2;
@veui-uploader-helper-text-spacing-media: @veui-padding-unit * 2;
@veui-uploader-helper-text-max-width-media: 200px;
@veui-uploader-media-entry-spacing: @veui-padding-unit * 2;

@veui-uploader-media-entry-icon-size: @veui-uploader-image-height / 3 - 1;