/* ============================================================
   BUTTON
   ============================================================ */

.cm-button {
  --button-bg: var(--color-accent);
  --button-bg-hover: var(--color-accent-strong);
  --button-color: var(--color-accent-foreground);

  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  min-width: 11rem;
  min-height: 3.25rem;

  padding: 0.5rem 0.5rem 0.5rem 1.5rem;

  overflow: hidden;

  border-radius: 999px;

  background-color: var(--button-bg);
  color: var(--button-color);

  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;

  text-decoration: none;

  box-shadow:
    0 1px 2px rgb(17 17 18 / 8%),
    0 8px 20px -12px rgb(17 17 18 / 25%);

  isolation: isolate;

  transition:
    transform 400ms var(--ease-apple),
    background-color 400ms var(--ease-apple),
    box-shadow 400ms var(--ease-apple);
}


/* Expanding background layer */

.cm-button::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -1;

  background-color: var(--button-bg-hover);

  transform: scaleX(0);
  transform-origin: right center;

  transition:
    transform 500ms var(--ease-apple);
}


/* Label */

.cm-button__label {
  position: relative;
  z-index: 1;

  white-space: nowrap;
}


/* Icon */

.cm-button__icon {
  position: relative;
  z-index: 1;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.25rem;
  height: 2.25rem;

  margin-left: 1rem;

  flex-shrink: 0;

  border-radius: 50%;

  background-color: rgb(255 255 255 / 16%);

  transition:
    transform 450ms var(--ease-apple),
    background-color 450ms var(--ease-apple);
}


/* ============================================================
   HOVER
   ============================================================ */

.cm-button:hover {
  transform: translateY(-2px);

  box-shadow:
    0 2px 4px rgb(17 17 18 / 8%),
    0 16px 32px -16px rgb(17 17 18 / 40%);
}


.cm-button:hover::before {
  transform: scaleX(1);
}


.cm-button:hover .cm-button__icon {
  transform: translateX(2px);

  background-color: rgb(255 255 255 / 22%);
}


/* ============================================================
   ACTIVE
   ============================================================ */

.cm-button:active {
  transform: translateY(0) scale(0.98);

  box-shadow:
    0 1px 2px rgb(17 17 18 / 10%);
}


/* ============================================================
   FOCUS
   ============================================================ */

.cm-button:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 4px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  .cm-button,
  .cm-button::before,
  .cm-button__icon {
    transition: none;
  }

}