@import "mixins/mixins";
@import "common/var";
@import "button";

@include b(dropdown) {
	display: inline-block;
	position: relative;
	color: $--color-text-regular;
	font-size: $--font-size-base;

	.kc-button-group {
		display: block;
		.kc-button {
			float: none;
		}
	}

	& .kc-dropdown__caret-button {
		padding-left: 5px;
		padding-right: 5px;
		position: relative;
		border-left: none;

		&::before {
			$gap: 5px;

			content: '';
			position: absolute;
			display: block;
			width: 1px;
			top: $gap;
			bottom: $gap;
			left: 0;
			background: mix(white, transparent, 50%);
		}

		&:hover {
			&::before {
				top: 0;
				bottom: 0;
			}
		}

		& .kc-dropdown__icon {
			padding-left: 0;
		}
	}
	@include e(icon) {
		font-size: 12px;
		margin: 0 3px;
	}

	.kc-dropdown-selfdefine { // 自定义
		&:focus:active, &:focus:not(.focusing) {
			outline-width: 0;
		}
	}
}

@include b(dropdown-menu) {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	padding: 10px 0;
	margin: 5px 0;
	background-color: $--color-white;
	border: 1px solid $--border-color-lighter;
	border-radius: $--border-radius-base;
	box-shadow: $--dropdown-menu-box-shadow;
	@include m(collapse) {
		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.18);
		padding-left: 0 !important;
		li {
			list-style: none !important;
		}
	}
	@include e(item) {
		list-style: none;
		line-height: 36px;
		padding: 0 20px;
		margin: 0;
		font-size: $--font-size-base;
		color: $--color-text-regular;
		cursor: pointer;
		outline: none;
		&:not(.is-disabled):hover, &:focus {
			background-color: $--dropdown-menuItem-hover-fill;
			color: $--dropdown-menuItem-hover-color;
			font-weight: 700;
		}

		@include m(divided) {
			$divided-offset: 6px;

			position: relative;
			margin-top: $divided-offset;
			border-top: 1px solid $--border-color-lighter;

			&:before {
				content: '';
				height: $divided-offset;
				display: block;
				margin: 0 -20px;
				background-color: $--color-white;
			}
		}

		@include when(disabled) {
			cursor: default;
			color: $--font-color-disabled-base;
			pointer-events: none;
		}
	}

	@include m(medium) {
		padding: 6px 0;

		@include e(item) {
			line-height: 30px;
			padding: 0 17px;
			font-size: 14px;

			&.kc-dropdown-menu__item--divided {
				$divided-offset: 6px;
				margin-top: $divided-offset;

				&:before {
					height: $divided-offset;
					margin: 0 -17px;
				}
			}
		}
	}

	@include m(small) {
		padding: 6px 0;

		@include e(item) {
			line-height: 27px;
			padding: 0 15px;
			font-size: 13px;

			&.kc-dropdown-menu__item--divided {
				$divided-offset: 4px;
				margin-top: $divided-offset;

				&:before {
					height: $divided-offset;
					margin: 0 -15px;
				}
			}
		}
	}

	@include m(mini) {
		padding: 3px 0;

		@include e(item) {
			line-height: 24px;
			padding: 0 10px;
			font-size: 12px;

			&.kc-dropdown-menu__item--divided {
				$divided-offset: 3px;
				margin-top: $divided-offset;

				&:before {
					height: $divided-offset;
					margin: 0 -10px;
				}
			}
		}
	}
}