/* Load after the preview's layout styles. No hidden state exists without JS. */
[data-refresh-card] {
  border: 1px solid var(--refresh-card-border, #dcd6d0);
  background: transparent;
  box-shadow: none;
  transform: none;
  transition: border-color 180ms ease;
}

[data-refresh-card] .refresh-icon {
  color: var(--refresh-icon-color, #514c47);
  background: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
  transition: color 180ms ease, filter 180ms ease;
}

[data-refresh-card]:is(:hover, :focus-within, .is-refresh-active) {
  background: transparent;
  box-shadow: none;
  transform: none;
}

[data-refresh-card]:is(:focus-within, .is-refresh-active) {
  border-color: var(--refresh-card-accent, #c84219);
}

[data-refresh-card]:is(:focus-within, .is-refresh-active) .refresh-icon {
  color: var(--refresh-card-accent, #c84219);
  filter: drop-shadow(0 0 5px rgb(200 66 25 / 18%));
}

@media (min-width: 801px) and (hover: hover) {
  [data-refresh-card]:hover {
    border-color: var(--refresh-card-accent, #c84219);
  }

  [data-refresh-card]:hover .refresh-icon {
    color: var(--refresh-card-accent, #c84219);
    filter: drop-shadow(0 0 5px rgb(200 66 25 / 18%));
  }
}

/* Only initially off-screen elements receive these classes from motion.js. */
.refresh-reveal.refresh-motion-ready {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease, transform 400ms cubic-bezier(.22, .68, .2, 1), border-color 180ms ease;
}

.refresh-reveal.refresh-motion-ready.refresh-is-pending {
  opacity: 0;
  transform: translateY(10px);
  transition: none;
}

/* Focus must never wait for a reveal animation. */
.refresh-reveal.refresh-motion-ready:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .refresh-reveal.refresh-motion-ready,
  .refresh-reveal.refresh-motion-ready.refresh-is-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-refresh-card],
  [data-refresh-card] .refresh-icon {
    transition: none;
  }
}

@media print {
  .refresh-reveal.refresh-motion-ready,
  .refresh-reveal.refresh-motion-ready.refresh-is-pending {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-refresh-card],
  [data-refresh-card]:is(:hover, :focus-within, .is-refresh-active) {
    border-color: var(--refresh-card-border, #dcd6d0);
    background: transparent;
    box-shadow: none;
    transform: none;
    transition: none;
  }

  [data-refresh-card] .refresh-icon,
  [data-refresh-card]:is(:hover, :focus-within, .is-refresh-active) .refresh-icon {
    color: inherit;
    filter: none;
    transition: none;
  }
}