/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Custom CSS styling of default text input, displayed in column card title.
 */

.input {
	border: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-overflow: ellipsis;
	width: 100%;
	background-color: inherit;
	transition: transform 0.5s, padding-top 0.5s;
	transform-origin: 0 0;
}

.inputFocused {
	composes: input;
	padding-top: 8px; /* XXX just picked this visually. Needed to push the input below the label.*/
	background-color: white;
	/* box-shadow is copied from RT card, with all pixel values halved, to compensate for scale */
	box-shadow: 1px 1px 0 rgba(0, 0, 0, .14), 0 1.5px 0.5px -1px rgba(0, 0, 0, .2), 0 0.5px 2.5px 0 rgba(0, 0, 0, .12);
	position: relative;
	transform: scale(1.5, 1.5);
	z-index: 1000;
	transition: transform 0.5s, padding-top 0.5s;
}

.label {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	color: #aaaaaa;
	opacity: 0;
	z-index: -1;
	font-weight: 500;
	transition: opacity 0.5s, max-width 0.5s;
}

.labelFocused {
	composes: label;
	max-width: 150%; /* match scale() transform, above */
	z-index: 1001;
	opacity: 1;
}