/*
    Styling for the grip showing that an item can be dragged to a new place: two columns of three
    dots, with a grab cursor.
*/
.drag-grip
{
    /* The gap between dots, center to center; the grip is two dots wide and three tall. */
    --drag-grip-dot-spacing: 3px;

    display: inline-block;
    flex-shrink: 0;
    width: calc(2 * var(--drag-grip-dot-spacing));
    height: calc(3 * var(--drag-grip-dot-spacing));
    cursor: grab;

    /* The dots, the trigger of the tooltip saying what dragging does, and the button moving the item
       from the keyboard, fill the grip. */
    > .tooltip-trigger,
    .drag-grip-button,
    .drag-grip-dots
    {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* The keyboard's button shows only its dots, with the site's focus ring. */
    .drag-grip-button
    {
        padding: 0;
        border: none;
        background: none;
        cursor: grab;

        &:focus-visible
        {
            outline: 2px solid var(--primary-higher-emphasis-color);
            outline-offset: 2px;
        }
    }

    /* A grip filling its item's height, so its hover is easy to find: its dots keep their size,
       centered down it. */
    &.drag-grip-fills-item-height
    {
        align-self: stretch;
        height: auto;

        /* styles-other-component: the grip's tooltip wraps its button, as the rule above has it. */
        > .tooltip-trigger,
        .drag-grip-button
        {
            display: flex;
            align-items: center;
        }

        .drag-grip-dots
        {
            height: calc(3 * var(--drag-grip-dot-spacing));
        }
    }

    /* The dots: a small round dot, solid out to 1px from its center and fading out by 1.5px,
       repeated every dot spacing across and down the grip. They are drawn because the site's icon
       set, Ionicons, has no such grip: its nearest are lines (reorder-three), one column of dots
       (ellipsis-vertical) or three columns (apps). */
    .drag-grip-dots
    {
        background-image: radial-gradient(circle, var(--neutral-surface-highest-emphasis-contrast-color) 1px, transparent 1.5px);
        background-size: var(--drag-grip-dot-spacing) var(--drag-grip-dot-spacing);
    }
}