@use '../../base/mixins/typography' as font;
@use '../../base/functions' as *;
@use '../../utilities/list-styles' as *;

.breadcrumbs {
	&-links {
		@extend .list-reset;

		padding: var(--padding-small) 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		li {
			display: flex;
			align-items: center;

			// Add a separator dot inbetween the list items
			& + li::before {
				content: '\e914'; // icon-chevron-right
				font-family: brandui-icons;
				font-style: normal;
				font-size: var(--txt-subhead-size);
				font-weight: 600;
			}

			a.breadcrumb-link {
				text-decoration: none;
				transition: color var(--transition-fast);

				@include font.get-typography(body-bold);

				color: var(--action);

				&:hover {
					color: var(--action-secondary);
				}
			}

			.breadcrumb-link-current {
				@include font.get-typography(body-bold);

				color: var(--ui-body);
			}
		}
	}
}