.medusa-mcb__wrap{
  display:inline-block;
  padding:40px;
}

.medusa-mcb__btn{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  width:180px;
  height:180px;
  text-decoration:none;
  cursor:pointer;
  border-radius:50%;
  transition:transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  will-change:transform;
  z-index:10;
}

.medusa-mcb__center{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:2;
  color:#FFFFFF;
  transition:color 0.4s ease, transform 0.4s ease;
  pointer-events:none;
}

.medusa-mcb__arrow{
  width:22px;
  height:22px;
  margin-bottom:6px;
}

.medusa-mcb__text{
  font-size:9px;
  font-weight:500;
  letter-spacing:0.25em;
  text-transform:uppercase;
}

.medusa-mcb__ring{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transform:scale(var(--mcb-ring-scale-from, 0.7));
  transition:
    opacity var(--mcb-ring-transition, 0.6s) cubic-bezier(0.19, 1, 0.22, 1),
    transform var(--mcb-ring-transition, 0.6s) cubic-bezier(0.19, 1, 0.22, 1);
}

.medusa-mcb__ring-svg{
  width:100%;
  height:100%;
  animation: mcb-spin 15s linear infinite;
  animation-play-state:paused;
}

.medusa-mcb__ring-text{
  font-size:11px;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  fill:#FFFFFF;
  opacity:0.8;
}

.medusa-mcb__btn:hover .medusa-mcb__ring{
  opacity:1;
  transform:scale(1);
}
.medusa-mcb__btn:hover .medusa-mcb__ring-svg{
  animation-play-state:running;
}

@keyframes mcb-spin{
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}