// Component settings: Data
// ------------------------------------------

$c-data: (
  'color':					palette(text),
  'color-alt':			palette(text, 2),
  'bgcolor-hover':	scale-color(palette(secondary), $lightness: -20%),
);

// ------------------------------------------

.c-data {
	margin: space(1) 0;
}

.c-data__line {
	@include flex();
}

.c-data__label {
	min-width: space(8);
	font-weight: 600;
	color: map-get($c-data, 'color');
}

.c-data__value {
	flex-grow: 9999;
  color: map-get($c-data, 'color-alt');
	text-decoration: none;

	&[href] {
		&:hover {
			text-decoration: underline;
		}
		&:focus {
			outline-color: palette(feedback, action);
		}
	}
}