@import "imports/utils.less";

	// Config

	@fs-upload-background: 					#fff;
	@fs-upload-border: 						3px dashed #ccc;
	@fs-upload-border-radius: 				3px;

	@fs-upload-font-size:					14px;
	@fs-upload-text-color: 					#666;

	@fs-upload-margin: 						0;
	@fs-upload-padding: 					25px;

	// Dropping

	@fs-upload-dropping-background: 		#eee;
	@fs-upload-dropping-border-color: 		#999;
	@fs-upload-dropping-text-color: 		#333;

	/**
	 * @class
	 * @name .fs-upload-element
	 * @type element
	 * @description Target elmement
	 */

	/**
	 * @class
	 * @name .fs-upload
	 * @type element
	 * @description Base widget class
	 */

	/**
	 * @class
	 * @name .fs-upload.fs-upload-dropping
	 * @type modifier
	 * @description Indicates dropping state
	 */

	.fs-upload {
		overflow: hidden;

		&,
		&:after,
		&:before,
		*,
		*:after,
		*:before {
			box-sizing: border-box;
			transition: none;
			user-select: none !important;
		}

		/**
		 * @class
		 * @name .fs-upload-input
		 * @type element
		 * @description Masked Input
		 */

		&-input {
			position: absolute;
			left: 100%;
			opacity: 0;

			// IE8 Opacity Check

			.no-opacity & {
				left: -999px;
			}
		}

		/**
		 * @class
		 * @name .fs-upload-target
		 * @type element
		 * @description Drop target
		 */

		&-target {
			background: @fs-upload-background;
			border: @fs-upload-border;
			border-radius: @fs-upload-border-radius;
			color: @fs-upload-text-color;
			cursor: pointer;
			font-size: @fs-upload-font-size;
			margin: @fs-upload-margin;
			padding: @fs-upload-padding;
			text-align: center;
			transition:
				background 0.15s linear,
				border 0.15s linear,
				opacity 0.15s linear;
		}

		&.dropping &-target,
		.no-touch &:hover &-target {
			background: @fs-upload-dropping-background;
			border-color: @fs-upload-dropping-border-color;
			color: @fs-upload-dropping-text-color;
		}
	}