body {
    --announcement-bar-z-index: 21;

    &:has(.header-primary__nav._has-menu-open) {
        --announcement-bar-z-index: 19;
    }
}

custom-announcement-bar {
    --_customer-announcement-bar-gap: 0.5rem;
    isolation: isolate;
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    position: absolute;
    inset-inline: 0;
    padding: 6px var(--_customer-announcement-bar-gap);
    padding-right: 4px;
    padding-left: 10px;
    margin: 12px var(--_customer-announcement-bar-gap);
    background: var(--theme-color-white-blur-9);
    border: 1px solid var(--theme-color-grey-2);
    backdrop-filter: blur(10px);
    border-radius: 6px;
    z-index: var(--announcement-bar-z-index);

    &.has-slider {
        grid-template-columns: auto 1fr auto;
    }

    carousel-toggle-autoplay {
        display: flex;
    }

    .custom-announcement-bar__toggle-autoplay-button {
        display: flex;
        align-items: center;
        padding-right: 14px;

        &[aria-pressed="true"] [data-play] {
            display: none;
        }

        &[aria-pressed="false"] [data-pause] {
            display: none;
        }
    }

    .custom-announcement-bar {
        max-width: 100%;
    }

    .custom-announcement-bar__navigation {
        display: flex;
        z-index: 1;
        justify-content: flex-end;
        gap: 2px;

        carousel-next-button,
        carousel-prev-button {
            display: flex;
        }

        .swiper-button-next,
        .swiper-button-prev {
            all: unset;
            cursor: pointer;
            padding: 0 10px;

            svg {
                width: 6px;
            }

            &[disabled] {
                opacity: 0.3;
                cursor: default;
            }
        }
    }

    .custom-announcement-bar__message-list .prose {
        margin: 0;
        text-align: center;
    }
}

@media screen and (min-width: 1000px) {
    custom-announcement-bar {
        --_customer-announcement-bar-gap: 1rem;
        position: fixed;
        bottom: var(--_customer-announcement-bar-gap);
        margin: 0;

        .custom-announcement-bar__navigation {
            gap: 20px;
        }
    }
}