.annotations-carousel {
|
--carousel-left: 0;
|
|
position: relative;
|
height: 100%;
|
align-items: center;
|
min-width: 0;
|
flex: 1;
|
|
&::before {
|
content: '';
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 8px;
|
height: 100%;
|
display: block;
|
pointer-events: none;
|
opacity: 0;
|
background: linear-gradient(to right, rgba(var(--color-neutral-shadow-raw) / 16%), rgba(var(--color-neutral-shadow-raw) / 0%));
|
z-index: 1;
|
transition: opacity 300ms ease-out;
|
}
|
|
&_scrolled {
|
&::before {
|
opacity: 1;
|
}
|
}
|
|
&__container {
|
display: flex;
|
width: 100%;
|
justify-content: space-between;
|
overflow: hidden;
|
height: 100%;
|
}
|
|
&__carosel {
|
flex: 1;
|
display: flex;
|
gap: var(--spacing-tighter);
|
white-space: nowrap;
|
padding-left: var(--spacing-tighter);
|
padding-right: 77px;
|
position: relative;
|
transform: translateX(calc(-1 * var(--carousel-left)));
|
transition: all 200ms ease-out 0s;
|
}
|
|
&__carousel-controls {
|
position: absolute;
|
right: 0;
|
white-space: nowrap;
|
top: 50%;
|
transform: translateY(-50%);
|
display: flex;
|
gap: var(--spacing-tighter);
|
padding-right: var(--spacing-tighter);
|
|
button:not(:disabled) {
|
box-shadow: 0 2px 6px rgba(var(--color-neutral-shadow-raw) / 20%);
|
}
|
}
|
|
&__nav {
|
padding: 0;
|
height: 28px;
|
width: 28px;
|
box-shadow: 0 2px 5px 0 rgb(var(--color-neutral-shadow-raw) / 20%);
|
|
&:hover {
|
background: var(--color-primary-emphasis-subtle);
|
box-shadow: 0 2px 5px 0 rgb(var(--color-neutral-shadow-raw) / 20%);
|
}
|
|
&_disabled {
|
background: var(--color-background-surface);
|
|
svg {
|
opacity: 0.4;
|
}
|
|
&:hover {
|
background: var(--color-neutral-surface);
|
filter: none;
|
}
|
}
|
|
.button {
|
&:hover {
|
filter: none;
|
}
|
|
&__arrow {
|
&_left {
|
transform: rotate(-90deg);
|
}
|
|
&_right {
|
transform: rotate(90deg);
|
}
|
}
|
}
|
}
|
}
|
