@keyframes dialog-tab-open-anchored {
    from { opacity: 0; transform: translate(var(--tx0, 0px), var(--ty0, 0px)) scale(var(--s0, 0.1)); filter: blur(3px); }
    to { opacity: 1; transform: translate(0px, 0px) scale(1); filter: blur(0px); }
}

@keyframes dialog-tab-close-anchored {
    from { opacity: 1; transform: translate(0px, 0px) scale(1); filter: blur(0px); }
    to { opacity: 0; transform: translate(var(--tx0, 0px), var(--ty0, 0px)) scale(var(--s0, 0.1)); filter: blur(2px); }
}

@keyframes dialog-tab-animate-progress-bar {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

.dialog-container {
    z-index: 999;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 220ms ease;
    backdrop-filter: blur(2px);
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    align-items: center;

    &.is-open {
        background-color: rgba(0, 0, 0, .4);
    }
    &.is-leave {
        pointer-events: none;
        backdrop-filter: none;
    }

    /* prevent progress bar from flashing before the overlay is open */
    &:not(.is-open) .progress-bar {
        visibility: hidden;
    }

    .dialog-tab {
        /* top-left origin so our translate math is exact */
        transform-origin: 0 0;
        will-change: transform, opacity, filter;
        backface-visibility: hidden;
        transform: translate3d(0, 0, 0);
        contain: layout style paint;

        &.animating-open {
            animation: dialog-tab-open-anchored 320ms cubic-bezier(0.12, 0.8, 0.2, 1) both;
        }
        &.animating-close {
            animation: dialog-tab-close-anchored 240ms cubic-bezier(0.4, 0, 0.6, 0.4) both;
        }

        position: relative;
        display: flex;
        flex-direction: column;

        .options-container {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            height: 35px;
            text-align: center;
            color: white;
            z-index: 1160;
            width: 100%;
        }

        .options-button {
            display: flex;
            background: transparent;
            border: none;
            cursor: pointer;
            width: 35px;
            height: 35px;
            align-items: center;
            justify-content: center;
            flex: 0 0 35px;
        }

        .options-button:hover {
            background-color: var(--colorBgAlphaHeavy);
        }

        .dialog-input {
            background: var(--colorAccentBgAlpha);
            color: white;
            border: none;
            margin: 0 0.5rem;
            padding: 0.25rem 0.5rem;
            flex: 0 0 20%;
            min-width: 10rem;
        }

        .progress-bar {
            height: 5px;
            max-width: calc(100% - var(--radius) * 1.5);
            left: calc(var(--radius) * 0.75);
            background-color: #0080ff;
            border-radius: var(--radius);
            transition: width 0.2s linear;
            overflow: hidden;
            position: relative;

            &.is-complete::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 50%;
                background-image: linear-gradient(
                    to right,
                    rgba(255, 255, 255, 0.5),
                    rgba(255, 255, 255, 0.8),
                    rgba(255, 255, 255, 0.5)
                );
                transform: translateX(-100%);
                animation: dialog-tab-animate-progress-bar 1.5s linear infinite;
                will-change: transform;
            }
        }

        webview {
            position: relative;
            flex: 1;
            overflow: hidden;
            border-radius: var(--radius);
        }

        &.reader-open .reader-view-toggle {
            background-color: var(--colorBgAlphaHeavy);
            border-color: var(--colorBgDarker);
        }
    }
}