.ob-breadcrumbs {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.ob-breadcrumbs__list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--ds-space-100, 0.25rem);
	flex-wrap: nowrap;
	overflow: hidden;
}

.ob-breadcrumbs__item {
	display: flex;
	align-items: center;
	font-size: var(--ds-font-size-100, 0.875rem);
	white-space: nowrap;
	color: var(--ds-text-subtle, currentColor);

	a {
		color: var(--ds-link-default, var(--ds-text-subtle, currentColor));
		text-decoration: none;

		&:hover {
			text-decoration: underline;
			color: var(--ds-link-default-hovered, var(--ds-text, currentColor));
		}

		&:focus-visible {
			outline: 2px solid var(--ds-border-focused, currentColor);
			outline-offset: 2px;
			border-radius: var(--ds-border-radius-100, 2px);
		}
	}

	&:not(:last-child)::after {
		content: "/";
		margin-inline-start: var(--ds-space-100, 0.25rem);
		color: var(--ds-text-disabled, currentColor);
		opacity: 0.5;
	}

	span[aria-current="page"] {
		color: var(--ds-text, currentColor);
		font-weight: var(--ds-font-weight-semibold, 500);
	}
}

.ob-breadcrumbs__overflow {
	position: relative;

	button {
		background: none;
		border: 1px solid transparent;
		border-radius: var(--ds-border-radius-100, 2px);
		color: var(--ds-text-subtle, currentColor);
		cursor: pointer;
		font-size: var(--ds-font-size-100, 0.875rem);
		line-height: 1;
		padding: var(--ds-space-050, 0.125rem) var(--ds-space-150, 0.375rem);

		&:hover {
			background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
			border-color: var(--ds-border-default, transparent);
			color: var(--ds-text, currentColor);
		}

		&:focus-visible {
			outline: 2px solid var(--ds-border-focused, currentColor);
			outline-offset: 2px;
		}
	}

	&::after {
		content: "/";
		margin-inline-start: var(--ds-space-100, 0.25rem);
		color: var(--ds-text-disabled, currentColor);
		opacity: 0.5;
	}
}

.ob-breadcrumbs__overflow-menu {
	background: var(--ds-surface-overlay, #fff);
	border: 1px solid var(--ds-border-default, currentColor);
	border-radius: var(--ds-border-radius-100, 4px);
	box-shadow: var(--ds-shadow-overlay, 0 4px 8px rgba(0, 0, 0, 0.16));
	left: 0;
	list-style: none;
	margin: var(--ds-space-050, 0.25rem) 0 0;
	min-width: 10rem;
	padding: var(--ds-space-100, 0.25rem) 0;
	position: absolute;
	top: 100%;
	z-index: var(--ds-z-index-modal, 400);

	li {
		a,
		span {
			color: var(--ds-text, inherit);
			display: block;
			font-size: var(--ds-font-size-100, 0.875rem);
			padding: var(--ds-space-100, 0.25rem) var(--ds-space-200, 0.5rem);
			text-decoration: none;
			white-space: nowrap;

			&:hover {
				background: var(--ds-background-neutral-default, rgba(0, 0, 0, 0.06));
				color: var(--ds-text, inherit);
			}
		}

		a:focus-visible {
			outline: 2px solid var(--ds-border-focused, currentColor);
			outline-offset: -2px;
		}
	}
}