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

.@{prefix}-Breadcrumb {

	@breadcrumb-margin: 7px;
	font-size: @fontSize;
	font-weight: @font-weight-medium;
	color: @color-textColor;

	> .@{prefix}-Breadcrumb-List {
		list-style-type: none;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		padding: 0;
		margin: 0;

		> .@{prefix}-Breadcrumb-Item {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: center;
			font-size: @size-font;

			> a {
				display: flex;
				align-items: center;
				justify-content: center;
				text-decoration: none;
				color: @color-textColor;
				line-height: 0;

				&:hover {
					text-decoration: underline;
				}

				> * {
					margin-right: 6px;
					&:last-child {
						margin-right: 0;
					}
				}
			}

			.@{prefix}-Breadcrumb-BreadcrumbSeparator {
				margin: 1px 4px 0 4px;

				> span {
					display: inline-block;
					width: 8px;
					height: 16px;
					transform: rotate(30deg);
					opacity: 0.7;

					&:first-child {
						border-right: 1px solid @color-neutral-6;
					}
				}
			}
		}
	}
}