@import "./base.scss";

.cy-tree-select {
	.el-popover__reference-wrapper {
		display: flex;
	}
}

.cy-tree-select-select {
	width: 100%;
	height: 40px;
	line-height: 38px;
	border: 1px solid #DCDFE6;
	border-radius: 4px;
	padding: 0 25px 0 15px;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	transition: all .3s;
	box-sizing: border-box;

	.cy-tree-select-select-v {
		width: 100%;
		color: #606266;
		font-size: 14px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.cy-tree-select-select-v-placeholder {
		color: #c0c4cc;
	}

	.cy-tree-select-select-v-icon {
		color: #C0C4CC;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 10px;

		.cy-tree-select-select-v-arrow {
			transform: rotateZ(0deg);
			transition: all .3s;
		}

		.cy-tree-select-select-v-arrow-show {
			transform: rotateZ(-180deg);
		}
	}
}

.cy-tree-select-select.small {
	height: 32px;
	line-height: 30px;
	padding: 0 25px 0 10px;

	.cy-tree-select-select-v {
		font-size: 13px;
	}
}

.cy-tree-select-select.mini {
	height: 28px;
	line-height: 26px;
	padding: 0 25px 0 10px;

	.cy-tree-select-select-v {
		font-size: 12px;
	}
}

.cy-tree-select-select:hover {
	border-color: #C0C4CC;
}

.cy-tree-select-select:focus {
	outline: none;
	border-color: #409EFF;
}

.cy-tree-select-select-con-s {
	padding-bottom: 8px;
}

.cy-tree-select-select-con-t {
	padding-bottom: 5px;
	margin-bottom: 5px;
	border-bottom: 1px solid #DCDFE6;
}

.cy-tree-select-select-con-c {
	max-height: 300px;
	overflow: auto;
}

.el-form-item--medium .el-form-item__content .cy-tree-select {
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;

	> span {
		display: inline-block;
		width: 100%;
	}
}

.el-form-item--small .el-form-item__content .cy-tree-select {
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;

	> span {
		display: inline-block;
		width: 100%;
	}
}

.el-form-item--mini .el-form-item__content .cy-tree-select {
	width: 100%;
	height: 28px;
	display: flex;
	align-items: center;

	> span {
		display: inline-block;
		width: 100%;
	}
}
