$c-swap-bp: 600;

.c-swap {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	list-style: none;
}


.c-swap__button {
	@include font(x-small, 20, 500);
	display: flex;
	align-items: center;
	position: relative;
	padding: 4px 0;
	background-color: transparent;
	border-color: transparent;
	border-style: solid;
	border-width: 0;
	border-bottom-width: 2px;
	color: palette(text);
	cursor: pointer;
	transition: color 0.2s;

	& + & {
		margin-left: 16px;
	}

	&:hover, &:focus {
		outline: none;
		color: palette(text, 300);
	}

	&.active {
		color: palette(text, 500);
		border-color: palette(primary);
	}
}