/* Swipe-to-reveal — the app's ONE set of styles for it.
 *
 * Nothing here mentions a city. The pattern (a clipped shell, a card that
 * slides, a panel revealed underneath) belongs to any list that wants it: the
 * favourites screen wrote it first, the voice list in the settings dialog is
 * the second, and neither owns it. The gesture that toggles `is-open` is
 * equally shared — static/js/swipe.js.
 *
 * The shape:
 *   .wx-swipe-wrap        the shell: positions the panel, clips the slide
 *     .wx-swipe-card      what slides (a city card, a voice row, …)
 *     .wx-swipe-del       the trash, revealed by swiping LEFT
 *
 * A card keeps its OWN look (.wx-city, .wx-card, …); this file only makes it
 * slide. Mixing the two is what tied the behaviour to one screen in the first
 * place.
 */

.wx-swipe-wrap {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: var(--wx-radius);
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

/* Slides 72px for a 64px panel, so 8px of gap remains — the card stays partly
 * readable, which is how you know WHICH row you are about to delete. */
.wx-swipe-card {
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.wx-swipe-wrap.is-open .wx-swipe-card {
  transform: translateX(-72px);
}

.wx-swipe-del {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  align-items: center;
  justify-content: center;
  background: var(--wx-delete);
  border: 0;
  color: #fff;
  cursor: pointer;
  border-radius: 0 var(--wx-radius) var(--wx-radius) 0;
}
.wx-swipe-wrap.is-open .wx-swipe-del {
  display: flex;
}