ul.pills {
	background: #222;
	padding: 6px 4px 5px 4px;
	box-shadow: 1px 1px .5px .5px inset rgba(0, 0, 0, 0.2);
	border: 1px solid #222;
	border-radius: $baseRadius;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	list-style: none;
	margin: 0;

	li {
		&.divider {
			margin: 0 20px;
			width: 1px;
			height: 100%;
			background: #333;
		}

		&:hover {
			a {
				opacity: 0.9;
			}
		}

		a {
			border-radius: $baseRadius;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			color: $white;
			overflow: hidden;
			padding-right: 30px;
			text-align: center;
			background: rgba(0, 0, 0, 0.2);
			margin-right: 5px;
			transition: all 250ms cubic-bezier(0.19, 1, 0.22, 1);

			span {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20px;
				height: 42px;
				background: rgba(0, 0, 0, 0.2);
				width: 42px;
			}
		}

		&.active {
			a {
				color: #333;
				background: $white;
				font-weight: bold;
			}
		}

		&:hover {
			a {
				color: #fff;
				background: $seaBlue;
			}
		}

		&:last-child a {
			margin-right: 0;
		}
	}
}