/**
 * UCSC Xena Client
 * http://xena.ucsc.edu
 *
 * Rules necessary for styling Xena App Control.
 *
 */

@value black12 from '../css/variables.css';
@value black38 from '../css/variables.css';
@value black87 from '../css/variables.css';

.appliedFilter {
	cursor: pointer
}

.appliedFilter:hover {
	text-decoration: line-through;
}

.appBarContainer {
	align-items: center;
	display: flex;
	height: 100%;
}

.appBarContainer i {
	color: black87;
	cursor: pointer;
	padding: 6px; /* Match padding of bookmark (ie RTB MenuIcon) */
}

.appBarContainer i {
	margin-left: 4px;
}

/* Left-hand container, displaying cohort name, sample count and refresh/reload icons */
.cohort {
	border-right: 1px solid black12;
	padding-right: 10px;
	width: 452px; /* Matches min (default) width of wizard columns, snapped at 1280px */
}

/* Positions the first and any other i after the title and subtitle to the end of the left container */
.cohort i:first-of-type {
	margin-left: auto;
}

.titleContainer {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.title {
	composes: mdTitle from '../css/typography.module.css';
	color: black87;
}

.subtitle {
	composes: mdCaption from '../css/typography.module.css';
	color: black38;
	display: block;
	line-height: 16px;
}

/* Right-hand container, containing filter and download etc icons */
.tools {
	display: flex;
	flex: 1;
	padding-left: 16px;
}

/* Filter section, inside tools */
.filter {
	align-items: center;
	display: flex;
}

.filterHelp {
	margin-left: -4px; /* Pull help icon in closer to filter icon */
}

/* Actions section, inside tools eg chart/visualization toggle, download, PDF, bookmark */
.actions {
	display: flex;
	margin-left: auto;
}

/* Help icon */
.appBarContainer a {
	line-height: 0;
	text-decoration: none;
}

.ties i {
	background: linear-gradient(to bottom right, red, yellow, blue, orange);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	animation-duration: 2s;
	animation-name: spin;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes spin {
	from {
		transform: rotate(0);
	}

	to {
		transform: rotate(360deg);
	}
}