.custom-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    display: flex;
    align-items: start;
    height: var(--banner-height, 48px);
    min-height: var(--banner-height, 48px);
    padding: 12px;
    overflow: hidden;
    background-color: var(--ds-background-neutral-bold, #292a2e);
    color: var(--ds-text-inverse, #ffffff);
    font-weight: 500;

    .custom-banner-content {
        display: flex;
        flex: 1;
        align-items: start;
        gap: clamp(8px, calc(var(--banner-height, 48px) / 6), 24px);
        min-width: 0;
    }

    .custom-banner-icon {
        display: inline-flex;
        align-items: center;
    }

    .custom-banner-image {
        display: block;
        max-height: calc(var(--banner-height, 48px) - 24px);
        width: auto;
    }

    .custom-banner-text {
        --fade-bottom: 0px;
        max-height: calc(var(--banner-height, 48px) - 24px);
        overflow-y: auto;
        padding-inline-end: 0.15em;
        line-height: 24px;
        scrollbar-width: none;
        mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade-bottom)), transparent 100%);

        &::-webkit-scrollbar {
            display: none;
        }

        * {
            line-height: inherit;
        }

        a {
            color: inherit;
            text-decoration: underline;
        }

        blockquote {
            border-color: color-mix(in srgb, currentColor 40%, transparent);
        }
    }

    .custom-banner-close {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        padding: 0;
        margin-left: 8px;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .custom-banner-scroll-indicator {
        position: absolute;
        bottom: 0;
        left: 50%;
        display: flex;
        color: inherit;
        opacity: 0;
        transform: translateX(-50%);
        transition: opacity 0.2s ease;
        pointer-events: none;
    }

    &.can-scroll-down .custom-banner-scroll-indicator {
        opacity: 0.85;
        animation: custom-banner-scroll-indicator 1.4s ease-in-out infinite;
    }

    &.align-left .custom-banner-content {
        justify-content: start;
    }

    &.align-left .custom-banner-text {
        flex: 1;
    }

    &.align-center .custom-banner-content {
        justify-content: center;
    }

    &.align-right {
        .custom-banner-content {
            justify-content: end;
        }

        .custom-banner-text {
            flex: 1;
            text-align: right;

            ul,
            ol {
                padding-inline-start: 0;
                list-style-position: inside;
            }

            blockquote {
                margin-inline: 0;
                border-inline-start-width: 0;
                border-inline-end-width: 1px;
                border-inline-end-style: solid;
                padding-inline-start: 0;
                padding-inline-end: 20px;
            }
        }

        .custom-banner-icon,
        .custom-banner-image-link,
        .custom-banner-image {
            order: 1;
        }

        .custom-banner-close {
            order: -1;
            margin-right: 8px;
            margin-left: 0;
        }
    }
}

@keyframes custom-banner-scroll-indicator {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(2px);
    }
}