/* swipeable — row that reveals a trailing action on left-swipe
 *
 * Structure (built by swipeable.js on top of any host element):
 *   .swipe-row
 *     .swipe-row-action      ← absolute, behind content (revealed by drag)
 *     .swipe-row-content     ← original children, transformed during drag
 */

.swipe-row {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.swipe-row-content {
  position: relative;
  background: inherit;
  z-index: 1;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  touch-action: pan-y;
}
.swipe-row-content.is-dragging { transition: none; }

.swipe-row-action {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  display: flex; align-items: center;
  padding: 0 18px;
  background: var(--red, #B85240);
  color: white;
  font-weight: 600;
  font-size: 13.5px;
  z-index: 0;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.swipe-row-action svg {
  width: 18px; height: 18px;
  margin-right: 6px;
}