.flexList {

	$textAdjustment: 3px;

	position: relative;

	&::before,
	&::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		height: math.div($gutter, 2);
		pointer-events: none;
		z-index: 1;
	}

	&::before {
		top: 0;
		background: linear-gradient($card, rgba($card, 0));
	}

	&::after {
		bottom: 0;
		background: linear-gradient(rgba($card, 0), $card);
	}

	&__inner {
		padding-top: $gutter;
		height: $cardContentHeight;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	&__row {
		position: relative;
		display: flex;
		align-items: center;
		height: calc(#{ $rowHeight } + #{ $gutter });
		border-bottom: 1px solid $dimmed;
		font-size: .9em;

		&:last-child {
			border-bottom: none;
		}

		&[href],
		&--has-hover {
			color: currentColor;
			text-decoration: none;
			transition: color .3s ease;
		}

		&[href]:hover,
		&--has-hover:hover {
			color: $white;
		}
	}

	&__column {
		display: grid;
		grid-auto-flow: column;

		&--fixed-width {
			width: var(--width);
			flex-shrink: 0;
		}

		&--spacing-left {
			margin-left: $gutter;
		}

		&--spacing-right {
			margin-right: $gutter;
		}

		&--text-adjustment {
			margin-top: $textAdjustment;
		}
	}

	&__bar {
		position: absolute;
		left: 0;
		top: math.div($gutter, 2);
		width: var(--width);
		height: $rowHeight;
		border-radius: 100px;
		background: $dimmed;
		pointer-events: none;

		&--favicon {
			min-width: $rowHeight;
		}

		&--counter {
			// A width that looks good with low number counters
			min-width: 52px;
		}
	}

	&__truncated {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	&__obscured {
		opacity: 0;
		transition: opacity .3s ease;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	&__row:hover &__obscured {
		opacity: .6;
	}

}