/* Replay run control buttons, and the confirmation popups those buttons open. */

/*
 * The widget renders bare anchors, and a popup body is bare heading, paragraph and form nodes: neither
 * inherits the padding the CMS gives its own form fields, so both are spaced here.
 */
.ApiSnapshotReplayRunControl-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m, 10px);
    padding: var(--gap-m, 10px);
}

/*
 * The buttons draw themselves rather than leaning on a CMS class. The widget's anchors carry
 * `class="button"`, which no tool stylesheet defines, and the popups' submits are bare `button`
 * elements, which the current tool UI resets to unstyled text — so neither arrives with a border of its
 * own. The values are the ones the previous tool UI gave a `button`, so a control looks the same
 * whichever UI version an operator is on.
 */
.ApiSnapshotReplayRunControl-buttons > .button,
.ApiSnapshotReplayRunControl-popup button {
    align-items: center;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid var(--Link-color, #1e6ba1);
    color: var(--Link-color, #1e6ba1);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fontSize-s, 0.875rem);
    font-weight: 700;
    justify-content: center;
    margin: 0;
    padding: calc(var(--gap-s, 8px) - 1px) var(--gap-m, 10px);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    user-select: none;
}

.ApiSnapshotReplayRunControl-buttons > .button:hover,
.ApiSnapshotReplayRunControl-popup button:hover {
    border-color: var(--Link-hoverColor, #12456b);
    color: var(--Link-hoverColor, #12456b);
    text-decoration: none;
}

.ApiSnapshotReplayRunControl-popup {
    /* Long enough for the action descriptions to wrap into a readable column rather than one wide line. */
    max-width: 40em;
    padding: var(--gap-l, 20px);
}

.ApiSnapshotReplayRunControl-popup > h1 {
    margin: 0 0 var(--gap-m, 10px);
}

.ApiSnapshotReplayRunControl-popup > p {
    line-height: 1.5;
    margin: 0 0 var(--gap-l, 20px);
}

.ApiSnapshotReplayRunControl-popup > form {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-m, 10px);
    margin: 0;
}

.ApiSnapshotReplayRunControl-popup > form > select {
    margin: 0;
    width: auto;
}