.flex {
	display: flex;
}
.flex-fill {
	flex: auto;
}
.flex-noshrink {
	/*flex-shrink: 0;*/
	flex: none;
}

.hide {
	display: none !important;
}

.loader {
	font-size: 24px;
}

button.action:disabled {
	cursor: default;
	opacity: 0.5;
}
button {
	background: #171717;
	cursor: pointer;
}
button.icon {
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
}
button.icon > img.icon {
	/* Remove the space below the image. */
	display: block;
	margin: 0 auto;
}
button.action {
	border: none;
	border-radius: 50px;
	background: var(--clrBgAction);
	padding: 10px 15px;
	font-size: var(--fsNormal); 
	color: var(--clrTextAction);
	font-weight: 800;
}
button.action.small {
	padding: 5px 15px;
	font-size: var(--fsReduced);
}
button.action.bordered {
	background: transparent;
	border: solid 2px var(--clrBgAction);
	color: var(--clrBgAction);
}

img.icon {
	width: var(--iconSize);
	height: var(--iconSize);
}
img.icon.small {
	width: var(--iconSizeSmall);
	height: var(--iconSizeSmall);
}

.float-right {
	float: right;
}
.clickable {
	cursor: pointer;
}
.bottom-border { /* TODO rename to bdr-bottom */
	border-bottom: solid 1px var(--clrBorder);
}
.sticky {
	position: sticky;
	top: 0;
}
.event-message {
	background: var(--clrEvMsg);
	padding: 7px;
	border-radius: 12px;
	color: var(--clrTextEvMsg);
}

/* Icon */

img.invert {
	/* This class is good for white on black icons; */
	filter: invert(1);
}

@media (prefers-color-scheme: dark) {
	img.dark-invert {
		filter: invert(1);
	}
	img.invert, img.svg.invert {
		filter: initial;
	}
}