.custom-banner {
    --banner-collapsed-height: var(--banner-height, 48px);
    --banner-expanded-height: 90dvh;
    --banner-fade: min(20px, 33%);
    --banner-toggle-height: 32px;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100001;
    display: flex;
    align-items: start;
    height: var(--banner-collapsed-height);
    min-height: var(--banner-collapsed-height);
    padding: 12px;
    overflow: hidden;
    background-color: var(--ds-background-neutral-bold, #292a2e);
    color: var(--ds-text-inverse, #ffffff);
    font-weight: 500;
    interpolate-size: allow-keywords;
    transition:
        height 220ms ease,
        transform 220ms ease;

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

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

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

    .custom-banner-text {
        max-height: calc(var(--banner-collapsed-height) - 24px);
        padding-inline-end: 0.15em;
        overflow: hidden;
        line-height: 24px;

        * {
            line-height: inherit;
        }

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

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

    .custom-banner-toggle {
        position: absolute;
        inset-inline: 0;
        inset-block-end: 0;
        display: flex;
        align-items: end;
        justify-content: center;
        block-size: var(--banner-toggle-height);
        max-block-size: 100%;
        padding-block-end: 2px;
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;

        &[hidden] {
            display: none;
        }
    }

    .custom-banner-toggle-icon {
        display: block;
        opacity: 0.85;
        transition: transform 220ms ease;
    }

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

    &.is-overflowing:not(.is-expanded) .custom-banner-text {
        mask-image: linear-gradient(to bottom, #000 calc(100% - var(--banner-fade)), transparent 100%);
    }

    &.is-expanded {
        height: auto;
        max-height: var(--banner-expanded-height);

        .custom-banner-text {
            max-height: calc(var(--banner-expanded-height) - 24px);
            padding-block-end: var(--banner-toggle-height);
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: color-mix(in srgb, currentColor 40%, transparent) transparent;
        }

        .custom-banner-toggle-icon {
            transform: rotate(180deg);
        }
    }

    &.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;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .custom-banner,
    .custom-banner .custom-banner-toggle-icon {
        transition: none;
    }
}