.cart-mini {
  svg {
    fill: var(--color-primary);
  }

  &.jiggle {
    animation: spring-jiggle 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

.cart-mini-icon {
  position: relative;

  .cart-mini-count {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background-color: var(--color-light);
    color: var(--color-primary);
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}

@keyframes spring-jiggle {
  0%   { transform: translateX(0) scale(1); }
  10%  { transform: translateX(-4px) scale(1.03); }
  25%  { transform: translateX(3px) scale(0.98); }
  40%  { transform: translateX(-2px) scale(1.02); }
  55%  { transform: translateX(1px) scale(0.99); }
  70%  { transform: translateX(-1px) scale(1.01); }
  85%  { transform: translateX(0.5px) scale(0.995); }
  100% { transform: translateX(0) scale(1); }
}