/* =====================================================
   Tap a pick in the bet slip to open its match (js/slip-open.js)
   ===================================================== */

.slip-item.so-open { cursor: pointer; transition: background-color 0.15s, box-shadow 0.15s; }
.slip-item.so-open .sub {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  color: var(--ink);
  border-radius: 6px;
}
:root.theme-dark .slip-item.so-open .sub { color: var(--aqua); }

/* Small chevron after the match name */
.slip-item.so-open .sub::after {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin-left: 1px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.8;
}

/* Hover: underline the match line and outline the pick */
@media (hover: hover) {
  .slip-item.so-open:hover { box-shadow: inset 0 0 0 1px var(--purple); }
  .slip-item.so-open:hover .sub { text-decoration: underline; text-underline-offset: 2px; }
  /* Not when the pointer is on a control inside the pick */
  .slip-item.so-open:has(button:hover, input:hover, select:hover) { box-shadow: none; }
  .slip-item.so-open:has(button:hover, input:hover, select:hover) .sub { text-decoration: none; }
  /* Keep the odds-changed / suspended marks on hover */
  .slip-item.so-open.changed:hover { box-shadow: inset 3px 0 0 var(--gold), inset 0 0 0 1px var(--purple); }
  .slip-item.so-open.suspended:hover { box-shadow: inset 3px 0 0 var(--muted), inset 0 0 0 1px var(--purple); }
}

.slip-item.so-open:active:not(:has(button:active, input:active)) { background-color: var(--purple-soft); }
.slip-item.so-open .sub:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Controls keep their normal cursor */
.slip-item.so-open input { cursor: text; }
.slip-item.so-open button { cursor: pointer; }