@import "var";

.@{prefixName}-tree-picker{
	width: 100%;
	position: relative;
	&__header{
		width: 100%;
		background-color: @tree-picker-header-background-color;
		height: 50px;
		font-size: 16px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		padding: 0 16px;
	}
	&__tag{
		margin-right: 20px;
		&.button{
			color: @tree-picker-active-color;
		}
	}
	&__body{
		width: 100%;
		margin-top: 4px;
		overflow: hidden;
		position: absolute;
		z-index: 100;
	}
	&__box{
		width: 150%;
		display: flex;
		transition: transform .3s ease;
	}
	&__list{
		flex-basis: 33.3333%;
		flex-grow: 0;
		flex-shrink: 0;
		overflow-y: auto;
		.single{
			background-color: @tree-picker-light-color;
		}
	}
	&__title.is-active{
		color: @tree-picker-active-color;
	}
}