/* The status of a slow wait, in a row of controls: the small loading ring, what is loading, and past the
   long-load delay, on a second line under it, how far it has come. It fades in as loaded content does
   and out as it leaves. */

/* The status's holder, which stays in the row, empty, for screen readers. It takes only the room the
   row has free, up to its words' width, so its coming never collapses the row's other controls. It
   takes back the row's gap before it (the 0.75rem the site's rows of controls leave between them),
   which its content puts back inside, so the empty holder leaves the row as wide as without it. It is
   as tall as the row's controls (--control-height, which a row of controls sets), so its words sit
   level with them. */
.slow-load-status
{
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    max-width: max-content;
    height: var(--control-height, auto);
    margin-left: -0.75rem;
    font-size: 0.8rem;
}

/* What shows while the wait is slow: the ring, then the lines, after the row's gap. */
.slow-load-status-content
{
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: 0.75rem;
    color: var(--neutral-surface-high-emphasis-contrast-color);
    white-space: nowrap;
    /* The site's 200ms fade-in. */
    animation: fade_in_opacity 200ms ease-out;

    /* styles-other-component: the side panel's page keyframes, so it fades as a closing page does, in
       place. */
    &.slow-load-status-leaving
    {
        --side-panel-page-slide-distance: 0;
        animation: side_panel_page_close 180ms ease-in forwards;
    }
}

/* The status's words, what is loading over how far it has come, set tight enough to fit a control
   row's height. */
.slow-load-status-lines
{
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.15;
}

/* Each line, cut with an ellipsis past the room the row has free. */
.slow-load-status-text,
.slow-load-status-progress
{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The second line, how far the wait has come, in the gray of the site's counts. */
.slow-load-status-progress
{
    position: relative;
    color: var(--neutral-surface-low-emphasis-contrast-color);
    animation: slow_load_status_second_line_in 200ms ease-out;
}

/* While the second line shows, the first sits above it; it eases up from where it stood alone, centred,
   half a line lower, as the second line slides down from behind it and fades in, with the fade's
   duration and easing, so the second line doesn't flash in. */
.slow-load-status-text-over-second-line
{
    position: relative;
    z-index: 1;
    animation: slow_load_status_first_line_up 200ms ease-out;
}

/* Half of a line of the status's two, at its 1.15 line height. */
/* ux-exception: no site keyframes move a line of text within its own place; the status's lines take
   the site's 200ms ease-out. */
@keyframes slow_load_status_first_line_up
{
    from
    {
        transform: translateY(0.575em);
    }
}

/* From behind the first line, a line up, unseen. */
/* ux-exception: as the first line's, the site has no keyframes that slide a line out from behind
   another. */
@keyframes slow_load_status_second_line_in
{
    from
    {
        opacity: 0;
        transform: translateY(-1.15em);
    }
}

/* Under reduced motion the status and its lines show at once, without moving. */
@media (prefers-reduced-motion: reduce)
{
    .slow-load-status-content,
    .slow-load-status-text-over-second-line,
    .slow-load-status-progress
    {
        animation: none;
    }
}