@import '~heading.less';

.Breadcrumb {
	font-size: 19px !important;
	line-height: 25px !important;
	font-weight: 300 !important;
	margin: 0 0 30px !important;
	color: @greyMedium;
	display: flex !important;

	> :global(.section) {
		flex: 0 0 auto;

		&:last-child {
			flex: 0 1 auto;
		}
	}

	> :global(.icon) {
		font-size: 17px !important;
		line-height: 25px !important;
		flex: 0 0 20px !important;
	}

	:global(.active) {
		font-weight: 500 !important;
		color: @greyDark;
	}

	:global(:first-child) {
		&:global(.active) {
			font-weight: 300 !important;
		}

		:global(.dropdown) {
			:global(.text),
			input {
				font-weight: 300 !important;
			}
		}
	}

	:global(:not(.active)) {
		> :global(.dropdown > .text) {
			font-weight: 300 !important;
			color: @greyMedium;
		}
	}

	:global(a) {
		color: @linkColor !important;
	}

	:global(a:hover) {
		color: @linkHoverColor !important;
	}

	:global(.dropdown) {
		:global(.text) {
			font-weight: 500;
			color: @greyDark;
		}

		input {
			height: 25px;
			min-width: 100px;
			font-family: @pageFont;
			font-weight: 500 !important;
			color: @greyDark;
		}

		i {
			font-size: 13px !important;
			line-height: 25px !important;
			margin: 0 0 0 5px !important;
			vertical-align: top !important;
		}

		:global(.filtered) + i {
			display: none;
		}

		&:global(.search.active) {
			i {
				display: none;
			}
		}

		:global(.menu) {
			box-shadow: @darkShadow !important;
			border: 0 !important;
			margin: 10px 0 0 !important;
			max-height: 300px !important;

			:global(.item),
			:global(.item.active) {
				border-bottom: 1px solid @greyLight;
				color: @greyDark !important;
				padding: 10px !important;
				font-weight: 300 !important;
				border-left: 3px solid transparent;

				&:global(:hover),
				&:global(.selected) {
					background: @white !important;
				}

				&:global(.selected) {
					border-left: 3px solid lighten(@secondary, 30%);
				}

				&:global(.active) {
					background: @white !important;
					border-left: 3px solid @secondary;
				}

				:global(.text) {
					font-size: 13px;
					line-height: 13px;
					font-weight: 400 !important;
				}
			}

			:global(.message) {
				font-size: 13px !important;
			}
		}
	}
}