@import '_content/DigitalFoundation.Staff/DigitalFoundation.Staff.5ft1ltuzgo.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-62u1uze2s6] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-62u1uze2s6] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/ListingEdit.razor.rz.scp.css */
/* Reordering the photo grid. The grid, the cards and the buttons are app.css's;
   only what dragging and the arrows add is here. */

.photo-hint[b-57kt3di9yn] {
    margin: 0;
    padding: 0 20px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--muted);
}

.photo-card[b-57kt3di9yn] {
    cursor: grab;
    transition: opacity .12s ease, background-color .12s ease;
}

.photo-card:active[b-57kt3di9yn] { cursor: grabbing; }

/* The card being carried fades rather than disappears: where it came from is still
   worth being able to see while deciding where to put it. */
.photo-card.is-dragging[b-57kt3di9yn] { opacity: .45; }

/* Dashed, where the cover's mark is solid. The two land on the same card often
   enough that a second solid outline would just look like the first one moved. */
.photo-card.is-drop-target[b-57kt3di9yn] {
    outline: 2px dashed var(--andaman);
    outline-offset: 2px;
    background: var(--celadon);
}

.photo-order[b-57kt3di9yn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 8px 0;
}

.photo-move[b-57kt3di9yn] {
    padding: 0 10px;
    font-size: 14px;
    line-height: 1;
}

.photo-move:disabled[b-57kt3di9yn] { opacity: .35; }

/* A ghost button keeps its hover state while disabled, which reads as an invitation
   to click something that will not do anything. */
.photo-move:disabled[b-57kt3di9yn],
.photo-move:disabled:hover[b-57kt3di9yn] {
    background: transparent;
    color: var(--ink);
    cursor: default;
}

.photo-position[b-57kt3di9yn] {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* Said aloud, drawn nowhere: the grid itself already shows a sighted operator what
   moved where. */
.order-status[b-57kt3di9yn] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .photo-card[b-57kt3di9yn] { transition: none; }
}