:root {
  --shop-feedback-duration: 520ms;
}

.category-rail [data-category] {
  position: relative;
}

.category-rail [data-category].micro-feedback-category::after {
  content: "SELECTED";
  position: absolute;
  top: -13px;
  right: 0;
  pointer-events: none;
  color: var(--muted);
  font: 8px/1 var(--mono);
  letter-spacing: .1em;
  white-space: nowrap;
  animation: micro-feedback-category var(--shop-feedback-duration) var(--shop-hover-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

.bag-trigger {
  position: relative;
}

.collection-heading {
  position: relative;
}

.micro-feedback__category-host,
.micro-feedback__cart-host {
  pointer-events: none;
  color: var(--muted);
  font: 8px/1 var(--mono);
  letter-spacing: .1em;
  white-space: nowrap;
}

.micro-feedback__category-host {
  position: absolute;
  right: 0;
  top: calc(100% - 8px);
}

.micro-feedback__cart-host {
  position: absolute;
  top: calc(100% - 2px);
  right: 0;
  z-index: 2;
  padding: 4px 6px;
  border: 1px solid var(--silver);
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--silver);
  color: var(--ink);
}

.micro-feedback__category-host.micro-feedback-category {
  animation: micro-feedback-category var(--shop-feedback-duration) var(--shop-hover-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

.micro-feedback__cart-host.micro-feedback-cart {
  animation: micro-feedback-slip var(--shop-feedback-duration) var(--shop-hover-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

[data-bag-count].micro-feedback-cart {
  animation: micro-feedback-count var(--shop-feedback-duration) var(--shop-hover-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

@keyframes micro-feedback-category {
  0% { opacity: 0; transform: translateY(3px); }
  24% { opacity: 1; transform: translateY(0); }
  72% { opacity: 1; transform: translateY(-1px); }
  100% { opacity: 0; transform: translateY(-3px); }
}

@keyframes micro-feedback-count {
  0% { opacity: .55; transform: scale(.92); }
  32% { opacity: 1; transform: scale(1.12); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes micro-feedback-slip {
  0% { opacity: 0; transform: translateY(-3px); }
  24% { opacity: 1; transform: translateY(0); }
  72% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
  .category-rail [data-category].micro-feedback-category::after,
  .micro-feedback__category-host.micro-feedback-category,
  .micro-feedback__cart-host.micro-feedback-cart,
  [data-bag-count].micro-feedback-cart {
    animation: none;
    transform: none;
    opacity: 1;
  }
}