.epoptic-merge-button {
  --epoptic-merge-text: #2f3134;
  --epoptic-merge-text-hover: var(--epoptic-merge-text);
  --epoptic-merge-bg: #f2f4f4;
  --epoptic-merge-text-bg: var(--epoptic-merge-bg);
  --epoptic-merge-icon-bg: var(--epoptic-merge-bg);
  --epoptic-merge-bg-hover: #eef1f2;
  --epoptic-merge-text-bg-hover: var(--epoptic-merge-bg-hover);
  --epoptic-merge-icon-bg-hover: var(--epoptic-merge-bg-hover);
  --epoptic-merge-icon: #2f3134;
  --epoptic-merge-icon-hover: var(--epoptic-merge-icon);
  --epoptic-merge-border-color: transparent;
  --epoptic-merge-border-color-hover: var(--epoptic-merge-border-color);
  --epoptic-merge-border-width: 0px;
  --epoptic-merge-radius: 999px;
  --epoptic-merge-height: 46px;
  --epoptic-merge-gap: 10px;
  --epoptic-merge-duration: 420ms;
  --epoptic-merge-ease: cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-flex;
  align-items: center;
  gap: var(--epoptic-merge-gap);
  text-decoration: none;
  color: var(--epoptic-merge-text);
  border-radius: var(--epoptic-merge-radius);
  transition:
    gap var(--epoptic-merge-duration) var(--epoptic-merge-ease),
    transform var(--epoptic-merge-duration) var(--epoptic-merge-ease);
  will-change: gap, transform;
}

.epoptic-merge-button * {
  box-sizing: border-box;
}

.epoptic-merge-button__text,
.epoptic-merge-button__icon {
  border: var(--epoptic-merge-border-width) solid var(--epoptic-merge-border-color);
  transition:
    border-color var(--epoptic-merge-duration) var(--epoptic-merge-ease),
    border-radius var(--epoptic-merge-duration) var(--epoptic-merge-ease),
    transform var(--epoptic-merge-duration) var(--epoptic-merge-ease),
    margin var(--epoptic-merge-duration) var(--epoptic-merge-ease),
    padding var(--epoptic-merge-duration) var(--epoptic-merge-ease),
    background-color var(--epoptic-merge-duration) var(--epoptic-merge-ease),
    color var(--epoptic-merge-duration) var(--epoptic-merge-ease);
  will-change: border-radius, transform, padding, margin;
}

.epoptic-merge-button__text {
  min-height: var(--epoptic-merge-height);
  padding: 0 22px;
  border-radius: var(--epoptic-merge-radius);
  background: var(--epoptic-merge-text-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--epoptic-merge-text);
  font-size: 18px;
  line-height: 1;
  /* white-space: nowrap; */
}

.epoptic-merge-button__icon {
  width: var(--epoptic-merge-height);
  height: var(--epoptic-merge-height);
  border-radius: 50%;
  background: var(--epoptic-merge-icon-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--epoptic-merge-icon);
  flex-shrink: 0;
}

.epoptic-merge-button__icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform var(--epoptic-merge-duration) var(--epoptic-merge-ease);
}

.epoptic-merge-button__icon i {
  font-size: 16px;
  transition: transform var(--epoptic-merge-duration) var(--epoptic-merge-ease);
}

.epoptic-merge-button:hover,
.epoptic-merge-button:focus,
.epoptic-merge-button:focus-visible,
.epoptic-merge-button--merged {
  gap: 0;
  outline: none;
}

.epoptic-merge-button:hover,
.epoptic-merge-button:focus,
.epoptic-merge-button:focus-visible {
  transform: translateY(-1px);
}

.epoptic-merge-button:hover .epoptic-merge-button__text,
.epoptic-merge-button:focus .epoptic-merge-button__text,
.epoptic-merge-button:focus-visible .epoptic-merge-button__text,
.epoptic-merge-button--merged .epoptic-merge-button__text {
  background: var(--epoptic-merge-text-bg-hover);
  border-color: var(--epoptic-merge-border-color-hover);
  color: var(--epoptic-merge-text-hover);
  padding-right: 18px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  transform: translateX(1px);
}

.epoptic-merge-button:hover .epoptic-merge-button__icon,
.epoptic-merge-button:focus .epoptic-merge-button__icon,
.epoptic-merge-button:focus-visible .epoptic-merge-button__icon,
.epoptic-merge-button--merged .epoptic-merge-button__icon {
  background: var(--epoptic-merge-icon-bg-hover);
  border-color: var(--epoptic-merge-border-color-hover);
  color: var(--epoptic-merge-icon-hover);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
  transform: translateX(-1px);
}

.epoptic-merge-button:hover .epoptic-merge-button__icon svg,
.epoptic-merge-button:focus .epoptic-merge-button__icon svg,
.epoptic-merge-button:focus-visible .epoptic-merge-button__icon svg,
.epoptic-merge-button--merged .epoptic-merge-button__icon svg,
.epoptic-merge-button:hover .epoptic-merge-button__icon i,
.epoptic-merge-button:focus .epoptic-merge-button__icon i,
.epoptic-merge-button:focus-visible .epoptic-merge-button__icon i,
.epoptic-merge-button--merged .epoptic-merge-button__icon i {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .epoptic-merge-button,
  .epoptic-merge-button__text,
  .epoptic-merge-button__icon,
  .epoptic-merge-button__icon svg,
  .epoptic-merge-button__icon i {
    transition-duration: 1ms;
  }
}

@media (max-width: 640px) {
  .epoptic-merge-button__text {
    padding: 0 18px;
    font-size: 16px;
  }

  .epoptic-merge-button__icon svg {
    width: 14px;
    height: 14px;
  }

  .epoptic-merge-button__icon i {
    font-size: 14px;
  }
}

/*
 * Touch devices: hold the button in its resting (un-merged) state so a tap does
 * not leave :hover/:focus stuck mid-animation. The JS-driven `--merged` state,
 * the desktop hover and keyboard :focus-visible are all left untouched.
 */
@media (hover: none) {
  .epoptic-merge-button:hover,
  .epoptic-merge-button:focus:not(:focus-visible) {
    gap: var(--epoptic-merge-gap);
    transform: none;
  }

  .epoptic-merge-button:hover .epoptic-merge-button__text,
  .epoptic-merge-button:focus:not(:focus-visible) .epoptic-merge-button__text {
    padding: 0 22px;
    background: var(--epoptic-merge-text-bg);
    border-color: var(--epoptic-merge-border-color);
    color: var(--epoptic-merge-text);
    border-radius: var(--epoptic-merge-radius);
    transform: none;
  }

  .epoptic-merge-button:hover .epoptic-merge-button__icon,
  .epoptic-merge-button:focus:not(:focus-visible) .epoptic-merge-button__icon {
    margin-left: 0;
    background: var(--epoptic-merge-icon-bg);
    border-color: var(--epoptic-merge-border-color);
    color: var(--epoptic-merge-icon);
    border-radius: 50%;
    transform: none;
  }

  .epoptic-merge-button:hover .epoptic-merge-button__icon svg,
  .epoptic-merge-button:focus:not(:focus-visible) .epoptic-merge-button__icon svg,
  .epoptic-merge-button:hover .epoptic-merge-button__icon i,
  .epoptic-merge-button:focus:not(:focus-visible) .epoptic-merge-button__icon i {
    transform: none;
  }
}

@media (hover: none) and (max-width: 640px) {
  .epoptic-merge-button:hover .epoptic-merge-button__text,
  .epoptic-merge-button:focus:not(:focus-visible) .epoptic-merge-button__text {
    padding: 0 18px;
  }
}