@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.lucid-Breadcrumb {

	@breadcrumb-margin: 7px;

	> .lucid-Breadcrumb-List {
		list-style-type: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0;
		margin: 0;
		height: 12px;

		> .lucid-Breadcrumb-Item {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			font-size: @size-font;
			color: @color-textColor;

			> a {
				.link();
			}

			.lucid-Icon {
				height: @size-font;
				width: @size-font;
				display: block;
			}

			> .lucid-Breadcrumb-SeparatorIcon {
				fill: @color-mediumGray;
				// this is the width of the icon + a margin on either side of it
				width: 3.4 + @breadcrumb-margin * 2;
			}
		}
	}
}