/* ------------------------------------------------------------------------------
 *
 *  # Bootstrap file input
 *
 *  File input styling for Bootstrap 3.0
 *
 *  Version: 1.0
 *  Latest update: May 25, 2015
 *
 * ---------------------------------------------------------------------------- */


// Layout
// ------------------------------

// With input field
.file-input {
    overflow-x: auto;
    display: inline-block;
    width: 100%;

	.btn[disabled],
	.btn .disabled {
	    cursor: @cursor-disabled;
	}
}

// Button only 
.btn-file {
    position: relative;
    overflow: hidden;

    // Hide original file input
	input[type=file] {
	    position: absolute;
	    top: 0;
	    right: 0;
	    min-width: 100%;
	    min-height: 100%;
	    text-align: right;
	    background: none repeat scroll 0 0 transparent;
	    cursor: inherit;
	    display: block;
	    .opacity(0);
	}
}


// Caption
// ------------------------------

// Base
.file-caption {
	> span {
		display: inline-block;
		float: left;
		margin-top: 3px;
		margin-right: 6px;
	}
	
	[class*=icon-] {
		display: none;
	}
}

// Name
.file-caption-name {
    display: inline-block;
    float: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 85%;
}

// Error
.file-error-message {
	background-color: #f5f5f5;
	color: @text-muted;
	text-align: center;
	border-radius: @border-radius-small;
	padding: 5px;
	font-size: @font-size-small;
}

// Disabled
.file-caption-disabled {
    background-color: @input-bg-disabled;
    cursor: @cursor-disabled;
}


// Caption
// ------------------------------

// Base
.file-preview {
	border-radius: @border-radius-small;
	border: 1px solid @panel-default-border;
	width: 100%;
	margin-bottom: @line-height-computed;
	position: relative;

	// Close button
	.close {
	    font-weight: 400;
	    font-size: @font-size-h5;
	    opacity: 1;
	    position: absolute;
	    top: 0;
	    right: 0;
	    background-color: #FFF;
	    padding: 8px;
	    line-height: 0.6;
	    border-radius: @border-radius-base;
	    color: @color-grey-700;
		.opacity(1);
	}

	// Loading icon animation
	&.loading {

		// Background
		&:before {
			content: "";
			display: inline-block;
			background-color: @color-slate-900;
			width: (@icon-font-size * 2);
			height: (@icon-font-size * 2);
			position: absolute;
			top: 50%;
			left: 50%;
			margin: -(@icon-font-size) 0 0 -(@icon-font-size);
			border-radius: @border-radius-base;
			.box-shadow(0 1px 5px fade(#fff, 50%));
		}

		// Icon itself
		&:after {
			content: "\eb55";
			font-family: "icomoon";
			display: inline-block;
			position: absolute;
			color: #fff;
			top: 50%;
			left: 50%;
			margin: -(@icon-font-size / 2) 0 0 -(@icon-font-size / 2);
			font-size: @icon-font-size;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			.animation(rotation 1s linear infinite);
		}
	}
}

// Status
.file-preview-status {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	color: @text-color;
	background-color: fade(#fafafa, 80%);
	border-top: 1px solid #ddd;
	padding: @padding-base-vertical @padding-base-horizontal;
	font-size: @font-size-small;

	&:empty {
		padding: 0;
		background-color: transparent;
		border: 0;
	}
}

// Frame
.file-preview-frame {
    margin: 5px;
    border-radius: @border-radius-base;
    text-align: center;

    &:hover {
	    border-color: #555;
    }

    > object {
		max-height: 200px;
    }

    @media (min-width: @screen-sm-min) {
	    float: left;
	    height: 200px;
	    max-height: 200px;
    }
}

// Image
.file-preview-image {
    vertical-align: middle;
    max-width: 100%;
    display: inline-block;

    @media (min-width: @screen-sm-min) {
    	height: 200px;
	    min-height: 200px;
    }
}

// Preview text
.file-preview-text {
    display: table-cell;
    height: 200px;
    color: @brand-primary;
    font-size: @font-size-small;
    vertical-align: middle;
    text-align: center;
}

// Other preview
.file-preview-other {
    display: table-cell;
    height: 200px;
    font-family: Monaco, Consolas, monospace;
    font-size: @font-size-small;
    vertical-align: middle;
    text-align: center;
}

// Hide by default
.file-input-new {
	.file-preview,
	.close,
	.fileinput-remove-button,
	.fileinput-upload-button {
	    display: none;
	}
}

// Indicator
.wrap-indicator {
    font-weight: 500;
    color: @brand-primary;
    cursor: pointer;
}
