.c-breadcrumbs {
	.c-breadcrumbs__container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--spacing-md);
		flex-wrap: wrap;

		@media (width <= 992px) {
			gap: var(--spacing-sm);
		}
	}

	.c-breadcrumbs__breadcrumbs {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;

		ul {
			display: flex;
			flex-flow: row wrap;
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				display: flex;

				a {
					color: var(--color-text);
					cursor: default;
				}

				&:not(:last-of-type) {
					a {
						color: var(--color-grey);
						cursor: pointer;

						&:hover {
							color: var(--color-primary);
						}
					}

					&:after {
						content: "/";
						color: var(--color-text);
						padding-inline: 5px;
					}
				}

				&:last-of-type {
					color: var(--color-primary);
				}
			}
		}
	}

	.c-breadcrumbs__breadcrumbs-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;

		svg {
			width: 100%;
			height: 100%;
			fill: currentColor;
		}
	}

	.c-breadcrumbs__menu {
		@media (width <= 992px) {
			width: 100%;
		}
	}

	.c-breadcrumbs__menu-list {
		display: flex;
		align-items: center;
		gap: var(--spacing-xs);
		margin: 0;
		padding: 0;
		list-style-type: none;

		@media (width <= 992px) {
			flex-direction: column;
		}
	}

	.c-breadcrumbs__list-item {
		position: relative;

		&.active {
			.c-breadcrumbs__menu-link {
				background-color: var(--color-primary);
				color: var(--color-white);
			}
		}

		@media (width <= 992px) {
			width: 100%;
		}

		&.open {
			&.c-breadcrumbs__list-item--has-sub-items {
				.c-breadcrumbs__menu-dropdown {
					@media (width <= 992px) {
						display: block;
					}
				}
			}
		}

		&.c-breadcrumbs__list-item--has-sub-items {
			&:hover,
			&:focus {
				.c-breadcrumbs__menu-dropdown {
					@media (width > 992px) {
						display: block;
					}
				}
			}
		}
	}

	.c-breadcrumbs__menu-item {
		display: flex;
		align-items: center;
		gap: var(--spacing-xs);
		white-space: nowrap;

		@media (width <= 992px) {
			justify-content: space-between;
			background-color: var(--color-grey-light);
		}
	}

	.c-breadcrumbs__menu-link {
		padding: var(--spacing-xs) var(--spacing-sm);
		color: var(--color-primary);
		font-weight: bold;
		text-decoration: none;

		@media (width <= 992px) {
			width: 100%;
		}

		@media (width > 992px) {
			background-color: var(--color-grey-light);
		}

		&:hover,
		&:focus,
		&.active {
			background-color: var(--color-primary);
			color: var(--color-white);
		}
	}

	.c-breadcrumbs__dropdown-toggle {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background: none;
		border: none;
		padding: 0;
		cursor: pointer;

		@media (width <= 992px) {
			width: auto;
			padding: var(--spacing-xs) var(--spacing-sm);
		}

		&[aria-expanded="true"] {
			svg {
				transform: rotateX(180deg);
			}
		}

		@media (width > 992px) {
			display: none;
		}

		svg {
			width: 18px;
			height: 18px;
			color: var(--color-grey);
			transition: transform 0.3s;
		}
	}

	.c-breadcrumbs__menu-dropdown {
		display: none;
		padding: cal(var(--spacing-xs) / 2) 0;
		list-style-type: none;

		@media (width > 992px) {
			position: absolute;
			top: 100%;
			left: 0;
			min-width: 220px;
			z-index: 1;
		}

		li {
			&.active {
				a {
					background-color: var(--color-grey-light);
				}
			}

			&:first-of-type {
				@media (width > 992px) {
					padding-top: var(--spacing-xs);
				}

				a {
					border-top: 1px solid var(--color-grey-light);
				}
			}

			&:last-of-type {
				@media (width <= 992px) {
					border-bottom: 1px solid var(--color-grey-light);
				}
			}

			a {
				display: block;
				padding: var(--spacing-xs) var(--spacing-sm);
				background-color: var(--color-white);
				border-right: 1px solid var(--color-grey-light);
				border-left: 1px solid var(--color-grey-light);
				color: var(--color-primary);
				text-decoration: none;

				@media (width > 992px) {
					border-bottom: 1px solid var(--color-grey-light);
				}

				&:hover,
				&:focus {
					background-color: var(--color-grey-light);
				}
			}
		}
	}
}