@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght@400&display=swap"); .aurore-fil-ariane-container {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: aliceblue;
padding: 0.625rem;
position: relative;
} .aurore-ariane-home {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
background: white;
border: 1px solid white;
border-radius: 4px;
} .aurore-ariane-wrapper {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
white-space: nowrap;
flex: 1;
overflow: hidden;
} .aurore-ariane-scrollable {
display: flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
flex: 1;
overflow: hidden;
touch-action: pan-y;
cursor: grab;
} .arrow-container {
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
position: relative;
}
.arrow-left::after {
position: absolute;
left: 38px;
background: linear-gradient(90deg, rgba(240,248,255,1) 0%, rgba(240,248,255,0) 100%);
height: 100%;
width: 50px;
content: "";
pointer-events: none;
}
.arrow-right::before {
position: absolute;
right: 38px;
background: linear-gradient(90deg, rgba(240,248,255,0) 0%, rgba(240,248,255,1) 100%);
height: 100%;
width: 50px;
content: "";
pointer-events: none;
}
.arrow-left-container {
left: 0;
}
.arrow-right-container {
right: 0;
}
.arrow-left,
.arrow-right {
position: absolute;
background: aliceblue;
border: none;
font-size: 1.5rem;
padding: 0.5rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.arrow-left{
left: 0;
}
.arrow-right{
right: 0;
}
.arrow-left.hidden,
.arrow-right.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
} .material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-size: 1.5rem;
line-height: 1;
} .aurore-ariane-scrollable a {
text-decoration: none;
color: var(--e-global-color-primary);
background: white;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875rem;
white-space: nowrap;
transition: background 0.3s ease;
}
.aurore-ariane-scrollable a:hover {
background: var(--hover-tint);
} .aurore-ariane-separator {
width: 1px;
height: 1rem;
background: var(--e-global-color-primary);
} .aurore-ariane-current-page {
font-size: 0.875rem;
color: var(--e-global-color-primary);
white-space: nowrap;
}