@import "mixins/mixins";

@include b(anchor){
	position: relative;
	padding-left: 2px;
	a{
		font-size: 12px;
	}
	&.fixed {
		.ivu-anchor__ink {
			.ivu-anchor__ink--ball {
				display: none;
			}
		}
	}
	@include e(ink){
		position: absolute;
		height: 100%;
		left: 0;
		top: 0;
		&:before {
			content: ' ';
			position: relative;
			width: 2px;
			height: 100%;
			display: block;
			background-color: #e8eaec;
			margin: 0 auto;
		}
		@include m(ball){
			display: inline-block;
			position: absolute;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			box-sizing: border-box;
			border: 2px solid #2d8cf0;
			background-color: #fff;
			left: 50%;
			-webkit-transition: top .2s ease-in-out;
			transition: top .2s ease-in-out;
			-webkit-transform: translate(-50%, 2px);
			-ms-transform: translate(-50%, 2px);
			transform: translate(-50%, 2px);
		}
	}
	@include e(link){
		padding: 8px 0 8px 16px;
		line-height: 1;
		@include e(link){
			padding-top: 6px;
			padding-bottom: 6px;
		}
		@include m(title){
			display: block;
			position: relative;
			-webkit-transition: all .3s;
			transition: all .3s;
			color: #515a6e;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-bottom: 8px;
			&:only-child {
				margin-bottom: 0;
			}
		}
		@include m(active){;
			& > .kc-anchor__link--title{
				color: #2d8cf0;
			}
		}
	}
}
.kc-anchor--wrapper {
	overflow: auto;
	padding-left: 4px;
	margin-left: -4px;
}