.html-history-dialog-container {
    overflow: hidden;

    // Expand/collapse button styled to match BS .btn-close for visual consistency
    .o_expand_button {
        padding: calc(var(--modal-header-padding-y) * .5) calc(var(--modal-header-padding-x) * .5);
        margin: calc(-.5 * var(--modal-header-padding-y)) var(--modal-header-padding-x) calc(-.5 * var(--modal-header-padding-y)) auto;
        color: var(--btn-close-color);
        background: transparent var(--btn-close-bg) center / 1em auto no-repeat;
        border: 0;
        border-radius: $border-radius-sm;
        width: 2rem;

        &:focus {
            outline: 0;
            box-shadow: $btn-close-focus-shadow;
        }

        &:active {
            border: none;
            transform: none;
        }

        @include media-breakpoint-down(md) {
            display: none;
        }
    }

    @include media-breakpoint-up(md) {
        margin: $o-horizontal-padding * 5;
    }
}

.modal-fullscreen {
    .o_expand_button.fa-expand:before {
        content: "\f066";
    }
}

.history-view-inner {
    min-height: 0;

    .embedded-history-dialog-placeholder {
        border: $border-width * 2 dashed $border-color;

        &:before {
            content: '\f1b2';
            font-family: FontAwesome;
            font-size: 1.25rem;
            opacity: 0.5;
        }
    }

    .loading-spinner {
        filter: invert(1);
        width: 30px;
        height: 30px;
    }
}

.history-container {
    min-width: 0;

    // Custom diff elements generated by backend (see diff_utils.py)
    removed {
        display: inline;
        background-color: var(#{--HistoryDialog__container-diff-removed-bg}, #f1afaf);
        text-decoration: line-through;
        opacity: 0.8;
    }

    added {
        display: inline;
        background-color: var(#{--HistoryDialog__container-diff-added-bg}, #c8f1af);
    }
}

.history-view-top-bar {
    height: 4rem;
}

.history-content-view,
.history-comparison-view {
    min-height: 0;
}

// Revision List
.o_revision_panel {
    // Timeline configuration
    $dot-size: 1.375rem;
    $dot-size-small: 0.8125rem;         // 13px
    $timeline-offset: 2.25rem;
    $line-left: 1.625rem;               // 26px - vertical line position

    min-width: 320px;

    .o_revision_panel_item {
        --Avatar-size: 2rem;
        margin-left: $timeline-offset;

        .o_avatar {
            width: var(--Avatar-size);
            height: var(--Avatar-size);
        }

        &:hover {
            background-color: rgba($o-action, .08);
            border-color: rgba($o-action, .15);

            &:before {
                box-shadow: 0 0 0 4px rgba($o-action, .10);
            }
        }

        &:focus {
            outline: 2px solid rgba($o-action, .3);
            outline-offset: -2px;
        }

        // Timeline line
        &:after {
            content: ' ';
            @include o-position-absolute($top: -#{map-get($spacers, 3)}, $left: -$line-left);
            height: calc(100% - 1.25rem);       // 20px
            border-left: $border-width * 2 solid;
            border-color: $border-color;
            transform: translateX(-50%);
        }

        // Timeline dot (small)
        &:before {
            content: '';
            @include o-position-absolute($top: 50%, $left: calc(-#{$line-left} - #{$dot-size-small / 2}));
            transform: translateY(-50%);
            border-radius: 50%;
            width: $dot-size-small;
            height: $dot-size-small;
            background-color: $border-color;
            z-index: 10;
            transition: width 0.2s ease, height 0.2s ease, left 0.2s ease;
        }

        &.targeted {
            .revision-item-content {
                opacity: 0.5;
            }

            .o_avatar {
                opacity: 0.75;
                filter: saturate(0);
            }

            &:hover {
                .revision-item-content {
                    opacity: 0.75;
                }
            }
        }

        &.selected {
            background-color: $o-component-active-bg;
            border-color: $o-component-active-border;

            .revision-info {
                .revision-date {
                    color: $o-action;
                }
            }

            &:before {
                content: '\f04b';
                font-family: 'FontAwesome';
                left: calc(-#{$line-left} - #{$dot-size / 2});
                width: $dot-size;
                height: $dot-size;
                line-height: $dot-size;
                text-align: center;
                font-size: .5rem;
                padding-left: 2px;
                color: white;
                background-color: $o-action;
            }

            ~ .o_revision_panel_item:before {
                background-color: $o-action;
            }
        }

        &:first-child:after {
            content: none;
        }
    }
}

@include media-breakpoint-down(md) {
    .html-history-dialog-container {
        .nav-tabs {
            background-color: $o-view-background-color;

            .nav-link {
                background-color: $o-gray-100;
                border-bottom-color: $border-color;

                &.active {
                    --#{$prefix}nav-tabs-link-active-color: var(--historyDialog__link-color--active, #{$o-brand-odoo});
                    border-bottom-color: $o-view-background-color;

                    &::after {
                        @include o-position-absolute($top: -$border-width, $right: -$border-width, $left: -$border-width);
                        height: $border-width * 3;
                        background-color: var(--historyDialog__link-border-top-color--active, #{$o-brand-odoo});
                        content: '';
                    }
                }
            }
        }
    }

    .o_revision_panel {
        border-right: none !important;
    }
}