.kp-media-item-menu { position: relative; margin: 0; }
.kp-media-item-menu > summary {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    padding: 0;
    border-radius: var(--kp-radius-md);
    color: var(--kp-color-text-muted);
    cursor: pointer;
    list-style: none;
}

.kp-media-item-menu > summary::-webkit-details-marker { display: none; }
.kp-media-item-menu[open] { z-index: 30; }
.kp-media-item-menu[open] > summary, .kp-media-item-menu > summary:hover {
    background: var(--kp-color-surface-muted);
    color: var(--kp-color-text);
}

.kp-media-item-menu__panel {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + 4px);
    inline-size: min(230px, calc(100vw - 52px));
    box-sizing: border-box;
    padding: var(--kp-space-1);
    border: 1px solid var(--kp-color-border);
    border-radius: var(--kp-radius-lg);
    background: var(--kp-color-surface);
    box-shadow: var(--kp-shadow-md);
}

.kp-media-item-menu__panel :is(a, button) {
    display: flex;
    align-items: center;
    gap: var(--kp-space-2);
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--kp-space-2);
    border: 0;
    border-radius: var(--kp-radius-md);
    background: transparent;
    color: var(--kp-color-text);
    font: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.kp-media-item-menu :is(a, button, summary):focus-visible { outline: 2px solid var(--kp-accent); outline-offset: 2px; }
.kp-media-item-menu__panel :is(a, button):hover { background: var(--kp-color-surface-muted); }
.kp-media-item-menu__panel :is(a, button) svg { flex: none; }
.kp-media-item-menu__panel :is(a, button) span { min-inline-size: 0; overflow-wrap: anywhere; }
.kp-media-item-menu__panel form { margin: 0; }
.kp-media-item-menu__panel .kp-media-item-menu__delete { color: var(--kp-color-danger); }