.kp-divider {
    box-sizing: border-box;
    width: 100%;
}

.kp-divider *,
.kp-divider *::before,
.kp-divider *::after {
    box-sizing: inherit;
}

.kp-divider--marquee {
    --kp-divider-item-gap: 16px;
    --kp-divider-group-gap: 16px;
    --kp-divider-marquee-duration: 28s;
    --kp-divider-marquee-easing: linear;
    --kp-divider-fade-width: 64px;
    --kp-divider-static-first-item-padding-left: 0px;
    display: block;
    max-width: 100%;
    background: transparent;
}

.kp-divider__marquee {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    min-height: inherit;
}

.kp-divider__marquee-track {
    display: flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
}

.kp-divider__marquee-group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--kp-divider-item-gap);
    min-width: max-content;
    padding-right: var(--kp-divider-group-gap);
}

.kp-divider__marquee-item {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
}

.kp-divider__marquee-item-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 16px;
    border-radius: 999px;
    color: inherit;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.kp-divider__marquee-item-inner:hover,
.kp-divider__marquee-item-inner:focus-visible {
    color: inherit;
    text-decoration: none;
}

.kp-divider__marquee-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: auto;
    color: currentColor;
    line-height: 1;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.kp-divider__marquee-icon i,
.kp-divider__marquee-icon svg {
    display: block;
}

.kp-divider__marquee-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.kp-divider__marquee-text {
    display: inline-block;
    min-width: 0;
    color: inherit;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 180ms ease;
}

.kp-divider--animated .kp-divider__marquee {
    overflow: hidden;
}

.kp-divider--animated .kp-divider__marquee-track {
    width: max-content;
    max-width: none;
    animation-duration: var(--kp-divider-marquee-duration);
    animation-iteration-count: infinite;
    animation-timing-function: var(--kp-divider-marquee-easing);
    will-change: transform;
}

.kp-divider--animated.kp-divider--is-rebuilding .kp-divider__marquee-track {
    animation: none;
    transform: translate3d(0, 0, 0);
}

.kp-divider--direction-left .kp-divider__marquee-track {
    animation-name: kp-divider-marquee-left;
}

.kp-divider--direction-right .kp-divider__marquee-track {
    animation-name: kp-divider-marquee-right;
}

.kp-divider--pause-hover:hover .kp-divider__marquee-track,
.kp-divider--pause-hover:focus-within .kp-divider__marquee-track {
    animation-play-state: paused;
}

.kp-divider--static .kp-divider__marquee {
    overflow: visible;
}

.kp-divider--static .kp-divider__marquee-track,
.kp-divider--static .kp-divider__marquee-group {
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
}

.kp-divider--static .kp-divider__marquee-track {
    animation: none;
    justify-content: center;
    transform: none;
}

.kp-divider--static .kp-divider__marquee-group {
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    justify-content: inherit;
}

.kp-divider--static .kp-divider__marquee-item:first-child {
    margin-left: 0;
    padding-left: 0;
}

.kp-divider--static .kp-divider__marquee-item:first-child > .kp-divider__marquee-item-inner {
    padding-left: var(--kp-divider-static-first-item-padding-left);
}

.kp-divider--fade-edges .kp-divider__marquee {
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 var(--kp-divider-fade-width),
        #000 calc(100% - var(--kp-divider-fade-width)),
        transparent
    );
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 var(--kp-divider-fade-width),
        #000 calc(100% - var(--kp-divider-fade-width)),
        transparent
    );
}

.kp-divider--color-blocks {
    --kp-divider-block-one-size: 50%;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 56px;
    overflow: hidden;
}

.kp-divider__color-blocks {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    width: 100%;
    height: 100%;
    min-width: 0;
}

.kp-divider__color-column {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

.kp-divider--color-blocks-vertical .kp-divider__color-column {
    flex-direction: column;
}

.kp-divider--color-blocks-horizontal .kp-divider__color-column {
    flex-direction: row;
}

.kp-divider__color-block {
    display: block;
    min-width: 0;
    min-height: 0;
    transition: background-color 180ms ease;
}

.kp-divider--color-blocks-vertical .kp-divider__color-block--one {
    flex: 0 0 var(--kp-divider-block-one-size);
}

.kp-divider--color-blocks-vertical .kp-divider__color-block--two {
    flex: 1 1 auto;
}

.kp-divider--color-blocks-horizontal .kp-divider__color-block--one {
    flex: 0 0 var(--kp-divider-block-one-size);
}

.kp-divider--color-blocks-horizontal .kp-divider__color-block--two {
    flex: 1 1 auto;
}

.kp-divider__color-block--one {
    background-color: #1f2937;
}

.kp-divider__color-block--two {
    background-color: #e5e7eb;
}

@keyframes kp-divider-marquee-left {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes kp-divider-marquee-right {
    from {
        transform: translate3d(-50%, 0, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kp-divider--animated .kp-divider__marquee-track {
        animation: none;
        transform: none;
        width: 100%;
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .kp-divider--animated .kp-divider__marquee-group {
        flex-wrap: wrap;
        min-width: 0;
        justify-content: center;
    }

    .kp-divider--animated .kp-divider__marquee-group[aria-hidden="true"] {
        display: none;
    }
}

@media (max-width: 430px) {
    .kp-divider__marquee-item-inner {
        white-space: normal;
    }

    .kp-divider--static .kp-divider__marquee-text {
        white-space: normal;
    }
}