// TODO we need a seperated file for styles that are used in both cms and front end (such as buttons)
@import "themes/default.scss";
@import "_mixins.scss";
@import "_elementMixins";

.ss-uploadfield-view-allowed-extensions {
	margin-top: -36px;
	float: right;

	.toggle-content {
		opacity: 0;
		box-sizing: border-box;
		position: absolute;
		z-index: 1;
		padding: 2.5*$grid-y 2*$grid-x;
		width: 280px;
		right: -280px;
		top: 0;
		bottom: 0;
		border-left: 1px solid $color-separator;
		background: $tab-panel-texture-color;
		transition: all .3s linear;

		h4 {
			margin: 0 0 6px;
			padding-right: 20px;
		}
	}

	&.active .toggle-content {
		right: 0;
		opacity: 1;
	}

	.toggle {
		cursor: pointer;
		font-size: 16px;
		float: right;
		color: $color-text;
		width: 16px;
		height: 18px;
		overflow: hidden;

		&:hover,
		&:active,
		&:focus {
			text-decoration: none;
			color: darken($color-text, 10%);
		}
	}
}

.backlink {
	padding-left: 12px;
}

body.cms.ss-uploadfield-edit-iframe {
	overflow: auto;
	background: #E2E2E2;

	span.readonly {
		font-style:italic;
		color:lighten($color-text, 20%);
		text-shadow: 0px 1px 0px #fff;
	}
}

.composite.ss-assetuploadfield .details fieldset {
	@extend body.cms.ss-uploadfield-edit-iframe;
	padding: $panel-padding-y $panel-padding-x;
	background-color: $background-main;
}

.ss-assetuploadfield {

	.CompositeField {
		padding: $panel-padding-y $panel-padding-x;
		margin: #{-$panel-padding-y} #{-$panel-padding-x};

		&.dimensions.form-group {
			margin: 0;
			padding: 0;

			> .dimensions {
				padding-left: 0;
				padding-right: 0;
			}
		}
	}

  > fieldset {
    @include clearfix;
  }

  &::after {
    content: "";
    visibility: hidden;
  }

	h3 {
		border-bottom: 1px solid $color-shadow-light;
		box-shadow: 0 1px 0 lighten($color-shadow-light, 95%);
		margin: 0 0 8px;
		padding: 0 0 7px;
		clear: both;
		position: relative;
	}

	.fileOverview {
		clear: both;
		margin-top: 10px;
		position: relative;

		.uploadStatus{
			@include clearfix;

			.state{
				float: left;
				font-size: 16px;
				font-weight: bold;
				line-height: 1.1em;
			}

			.details {
				opacity: 0.9;
				float: right;
			}
		}
	}

	.ss-uploadfield-item-actions.edit-all{
		.ss-uploadfield-item-edit-all {
			float: right;
			margin: -8px 0 0;
			padding: 0;
			background: none;
			border: 0;
			box-shadow: none;
			color: $color-text;

			&:hover{
				color: lighten($color-text, 10%);
			}
		}
	}


	.ss-uploadfield-files {
		margin: 0;
		padding: 0;
		clear:both;

		.ss-uploadfield-item {
			background-clip: padding-box;
			margin: 0 0 5px;
			padding: 0;
			position: relative;
			margin-left: -$panel-padding-x;
			margin-right: -$panel-padding-x;

			&.ui-state-error {
				height: 32px; // limit height to only errored upload

				.ss-uploadfield-item-info {
					height: 30px;
				}

				.ss-uploadfield-item-name {
					position: absolute;
				}
			}

			.info {
				position: relative;
				padding: 7px;
				overflow: hidden;
				background-color: #FFBE66;
				border: 1px solid #FF9300;
			}
		}

		.ss-uploadfield-item-preview {
			position: absolute;
			height: 30px;
			width: 40px;
			overflow: hidden;
			z-index: 1;
			top: 0;
			// Prevent icons touching edge

 			img[src$="_32.png"] {
        width: auto;
        height: 26px;
        margin: 2px 0 0 2px;
			}
		}

		.ss-uploadfield-item-info {
			overflow: hidden;
			background-color: #5db4df;
			background-image: linear-gradient(to bottom,  #5db4df 0%,#5db1dd 8%,#439bcb 50%,#3f99cd 54%,#207db6 96%,#1e7cba 100%);
		}

		.ui-state-error .ss-uploadfield-item-info {
			background-color: #c11f1d;
			padding-right: 130px;
			background-image: linear-gradient(to bottom,  #c11f1d 0%,#bf1d1b 4%,#b71b1c 8%,#b61e1d 15%,#b11d1d 27%,#ab1d1c 31%,#a51b1b 42%,#9f1b19 46%,#9f1b19 50%,#991c1a 54%,#971a18 58%,#911b1b 62%,#911b1b 65%,#7e1816 88%,#771919 92%,#731817 100%);
			width: 100%;

			.ss-uploadfield-item-name {
				cursor: default;
				background: darken($color-button-disabled,20%); //for browsers that don't support rgba
				background: rgba(darken($color-button-disabled, 15%),0.9);

				.name {
					text-shadow: 0px 1px 0px rgba(#fff, 0.7);
				}
			}
		}

		.ui-state-warning .ss-uploadfield-item-info {
			background-color: $color-warning;
			background-image: linear-gradient(
				to bottom,
				desaturate(lighten($color-warning, 10%), 20%)  0%,
				desaturate(lighten($color-warning, 5%), 20%)  8%,
				desaturate($color-warning, 20%)  50%,
				desaturate(darken(mix($color-warning, $color-button-destructive, 99%),0%), 20%)  54%,
				desaturate(darken(mix($color-warning, $color-button-destructive, 80%),1%), 20%)  96%,
				desaturate(darken(mix($color-warning, $color-button-destructive, 70%),2%), 20%) 100%
			);
		}

		.ss-uploadfield-item-name {
			position: relative;
			z-index: 1;
			margin: 3px 0 3px 50px;
			width: 50%;
			color: lighten($color-text, 10%);
			background: $color-button-disabled; //for browsers that don't support rgba
			background: rgba(#fff, 0.8);
			border-radius: 3px;
			line-height: 24px;
			height: 22px;
			padding: 0 5px;
			text-align: left;
			cursor: pointer;
			//display:table, and table-layout:fixed allows us to use percentages with text-overflow
			display:table;
			table-layout:fixed;

			.name {
				text-shadow: 0px 1px 0px rgba(#fff, 0.5);
				display: inline;
				float: left;
				max-width: 50%;
				font-weight: normal;
				padding: 0 5px 0 0;
				@include hide-text-overflow;
			}
			.ss-uploadfield-item-status {
				position:relative;
				float: right;
				padding: 0 0 0 5px;
				max-width:30%;
				@include hide-text-overflow;
				text-shadow: 0px 1px 0px rgba(#fff, 0.5);

				&.ui-state-error-text {
					text-shadow: 0px 1px 0px rgba(#fff, 0.6);
					color: darken($color-button-destructive, 10%);
				}
				&.ui-state-warning-text {
					color: darken($color-warning, 10%);
				}
				&.ui-state-success-text {
					color: $color-button-constructive;
				}
			}
		}
		.ss-uploadfield-item-actions {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			z-index: 0;
			@include ss-uploadfield-action-buttons;
		}

		.ss-uploadfield-item-progress {
			width: 100%;

			div {
				height: 30px;
				padding: 0;
				margin: 0;
				overflow: hidden;
				width: 100%;
			}
			.ss-uploadfield-item-progressbar {
				background-color: #92a6b3;
				background-image: linear-gradient(to bottom, #92a6b3 0%,#90aab8 11%,#96b1bf 22%,#9eb4c1 33%,#a7bac7 44%,#c1d5dc 100%);
			}
			.ss-uploadfield-item-progressbarvalue {
				width: 0;
				background: #60b3dd url("../../images/progressbar_blue.gif") repeat left center;
			}
		}

		.ss-uploadfield-item-editform {
			/* don't use display none, for it will break jQuery('iframe').contents().height() */
			height: 0;
			overflow: hidden;
			clear: both;

			&.loading {
				width: 100%;
				height: 22px;
				padding: 15px 0;
				background: url("../../images/spinner.gif") no-repeat 50% 50%;

				iframe {
					/* Old IE needs this or it'll give the iframe a white background, covering the spinner */
					padding-top: 0;
					margin-top: 37px;
					border: 0;
				}
			}

			iframe {
				width: 100%;
				padding: $grid-x * 2;
				background: #E2E2E2;
			}
		}
	}

	.ss-uploadfield-addfile {

		.ss-uploadfield-item-info > span {
			display: block;
			padding: 0;
			line-height: 1;
			color: lighten($color-text, 20%);
			margin-top: -12px;
		}

		.ss-uploadfield-fromcomputer .ss-insert-media & {
			margin: 0 12px 0 0;
		}
	}
}

.ss-uploadfield-dropzone {
	&::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(236, 239, 241, .9) url('../../images/drag_drop_opt.svg') center center no-repeat;
		background-size: 312px 325px;
		z-index: 100;
	}

	&.active.hover::after {
		content: '';
	}
}

/** ----------------------------------------------------
 * "@2x" media query
 * ---------------------------------------------------- */

@media
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (   min--moz-device-pixel-ratio: 2),
	only screen and (     -o-min-device-pixel-ratio: 2/1),
	only screen and (        min-device-pixel-ratio: 2),
	only screen and (                min-resolution: 192dpi),
	only screen and (                min-resolution: 2dppx) {

	/* Loading spinner */
	.ss-assetuploadfield {
		.ss-uploadfield-files {
			.ss-uploadfield-item-editform {
				&.loading {
					background-image: url("../../images/spinner@2x.gif");
					background-size: 43px 43px;
				}
			}
		}
	}
}