.hbs-newsticker {
    --hbs-newsticker-height: 48px;
    --hbs-newsticker-duration: 20s;
    --hbs-newsticker-padding-horizontal: 16px;
    --hbs-newsticker-border-radius: 0;
    --hbs-newsticker-background-color: transparent;
    --hbs-newsticker-text-color: inherit;
    --hbs-newsticker-item-gap: 80px;
    --hbs-newsticker-scroll-distance: 0px;

    height: var(--hbs-newsticker-height);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding-inline: var(--hbs-newsticker-padding-horizontal);
    border-radius: var(--hbs-newsticker-border-radius);
    background-color: var(--hbs-newsticker-background-color);
    color: var(--hbs-newsticker-text-color);
}

.hbs-newsticker__viewport {
    width: 100%;
    overflow: hidden;
}

.hbs-newsticker__track {
    display: inline-flex;
    align-items: center;
    width: max-content;
    white-space: nowrap;
    animation-duration: var(--hbs-newsticker-duration);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
    transform: translateX(0);
}

.hbs-newsticker:not(.hbs-newsticker--initialized) .hbs-newsticker__track {
    animation-name: none;
}

.hbs-newsticker--initialized.hbs-newsticker--direction-left .hbs-newsticker__track {
    animation-name: hbs-newsticker-scroll-left;
}

.hbs-newsticker--initialized.hbs-newsticker--direction-right .hbs-newsticker__track {
    animation-name: hbs-newsticker-scroll-right;
}

.hbs-newsticker__content {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding-right: var(--hbs-newsticker-item-gap);
}

.hbs-newsticker--direction-right .hbs-newsticker__content {
    padding-right: 0;
    padding-left: var(--hbs-newsticker-item-gap);
}

.hbs-newsticker__content p {
    margin: 0;
}

.hbs-newsticker--pause-on-hover:hover .hbs-newsticker__track {
    animation-play-state: paused;
}

.hbs-newsticker--edge-fade::before,
.hbs-newsticker--edge-fade::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: min(4rem, 12%);
    pointer-events: none;
}

.hbs-newsticker--edge-fade::before {
    left: 0;
    background: linear-gradient(
        to right,
        var(--hbs-newsticker-background-color),
        transparent
    );
}

.hbs-newsticker--edge-fade::after {
    right: 0;
    background: linear-gradient(
        to left,
        var(--hbs-newsticker-background-color),
        transparent
    );
}

@keyframes hbs-newsticker-scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-1 * var(--hbs-newsticker-scroll-distance)));
    }
}

@keyframes hbs-newsticker-scroll-right {
    from {
        transform: translateX(calc(-1 * var(--hbs-newsticker-scroll-distance)));
    }

    to {
        transform: translateX(0);
    }
}

.hbs-newsticker--width-full {
    max-width: 100%;
}

.hbs-newsticker--width-xwide {
    max-width: 1600px;
    margin-inline: auto;
}

.hbs-newsticker--width-wide {
    max-width: 1400px;
    margin-inline: auto;
}

.hbs-newsticker--width-medium {
    max-width: 1200px;
    margin-inline: auto;
}

.hbs-newsticker--width-narrow {
    max-width: 900px;
    margin-inline: auto;
}

.hbs-newsticker--width-xnarrow {
    max-width: 700px;
    margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
    .hbs-newsticker {
        height: auto;
        min-height: var(--hbs-newsticker-height);
    }

    .hbs-newsticker__track {
        animation: none;
        transform: none;
        white-space: normal;
        width: auto;
    }

    .hbs-newsticker__content {
        white-space: normal;
        padding-right: 0;
        padding-left: 0;
    }

    .hbs-newsticker__content:not(:first-child) {
        display: none;
    }
}