@import '~heading.less';
@import '../../resources/fontawesome/fontawesome.less';
@import '../../resources/fontawesome/solid.less';

.ColumnPicker {
	color: @greyMedium !important;
	margin: 0 20px !important;
	text-align: right;
	justify-content: flex-end;

	> div {
		> :global(.text) {
			font-weight: 400;
			line-height: 17px;
			padding-right: 5px;
			color: @greyMedium !important;
		}

		> :global(.icon) {
			vertical-align: text-top !important;
			font-size: 16px;
			text-align: right;
			margin: 0 !important;
			color: @greyMedium !important;
		}
	}

	&&& {
		:global(.dropdown) {
			:global(.menu) {
				box-shadow: @darkShadow !important;
				border: 0 !important;
				max-height: 250px;
				min-width: 150px;
				overflow-y: auto;
				top: 36px !important;

				:global(.item) {
					background: @white !important;
					padding: 7px 11px 7px 15px !important;
					border-top: 0 !important;
					font-size: 13px !important;
					line-height: 18px !important;
					color: @greyDark;
			
					&:global(.selected) {
						background-color: @white !important;
					}
			
					&:global(.active) {
						padding: 7px 11px !important;
						border-left: 4px solid @secondary !important;
						font-weight: 400 !important;
					}
			
					&:global(.disabled) {
						opacity: 1 !important;
						color: @greyMedium !important;
						border-left: 4px solid @greyMedium !important;

						:global(.content) {
							display: flex;
							justify-content: space-between;
							
							:global(.icon) {
								.fa-icon();
								.fas();
								margin: 0 0 0 10px !important;
								font-size: 11px;
								line-height: 18px;
							}
						}
					}
				}
			
				:global(.item) ~ :global(.item) {
					border-top: 1px solid @greyLight !important;
				}
			}
		}
	}
}