.cbx-btn {
  --cbx-text: #000;
  --cbx-text-active: #fff;
  --cbx-bg: transparent;
  --cbx-fill: #000;
  --cbx-border: #e5e5e5;
  --cbx-border-hover: #000;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  padding: 18px 40px;
  border: 1px solid var(--cbx-border);
  background-color: var(--cbx-bg);
  color: var(--cbx-text);
  will-change: transform;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.4s ease, background-color 0.4s ease, color 0.4s ease;
}

.cbx-btn:focus-visible {
  outline: 2px solid var(--cbx-text);
  outline-offset: 4px;
}

.cbx-btn:hover {
  border-color: var(--cbx-border-hover);
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .cbx-btn:hover, .cbx-btn:focus {
    background-color: var(--cbx-fill);
    color: var(--cbx-text-active);
    border-color: var(--cbx-border-hover);
  }
  .cbx-btn__fill {
    display: none !important;
  }
}

.cbx-btn__fill {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
  background-color: var(--cbx-fill);
}

.cbx-btn__label {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
}

.cbx-btn__text {
  display: block;
}

.cbx-btn__text--clone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(100%);
}