/* Copyright ExaOps Pty Ltd 2026. All rights reserved. */

/* A plain stylesheet rather than DragDropList.razor.css, because scoped CSS does not reach the
   browser in this application: Marketly/App.razor never links Marketly.styles.css, so every
   .razor.css in the solution is dead. Written as an ordinary file the host links, which is the
   same shape as the scripts beside it. Recorded in README_todo.md. */
.exa-draglist {
    position: relative;
}

.exa-draglist-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid transparent;
}

.exa-draglist-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.exa-draglist-row.exa-draglist-dragging {
    opacity: .4;
}

.exa-draglist-handle {
    display: flex;
    align-items: center;
    cursor: grab;

    /* Both matter. Without touch-action the browser scrolls the page instead of reporting the
       pointer moves; without user-select it starts selecting the text under the finger. */
    touch-action: none;
    user-select: none;
}

.exa-draglist-row.locked .exa-draglist-handle {
    cursor: default;
}

.exa-draglist.exa-draglist-active .exa-draglist-handle {
    cursor: grabbing;
}

.exa-draglist-content {
    flex-grow: 1;
    min-width: 0;
}

.exa-draglist-arrows {
    display: flex;
    align-items: center;
}

/* Where the row will land. Positioned by the script against the row it is nearest to. */
.exa-draglist-indicator {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--mud-palette-primary);
    border-radius: 1px;
    pointer-events: none;
}