/*
    The Fluent UI panel is only able to dock to the left or to the right, so the timeline panel of
    the KBase viewer is docked across the bottom of the screen here. It is given the whole width and
    enough height to show the timeline control without any overlay. The padding is reduced so that
    the header and the footer leave as much room as possible for the timeline.
*/
#timeline-panel::part(control) {
    --dialog-width: 100vw;
    --dialog-height: 300px;
    --dialog-padding: 8px;
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: unset;
    pointer-events: auto;
}

/* The header only carries the dismiss button, so it is kept as short as possible. */
#timeline-panel .fluent-dialog-header {
    padding-bottom: 0;
}

#timeline-panel .fluent-dialog-body {
    overflow: hidden;
}

/* The region the panel is placed in covers the screen, so it must not take the pointer. */
#timeline-panel::part(positioning-region) {
    pointer-events: none;
}