.button {
  align-items: center;
  color: var(--color-text);
  display: inline-flex;
  gap: var(--spacing-0\.5);
  padding: var(--spacing-0\.5) var(--spacing-1);
  position: relative;
  text-decoration: none;
  transition: transform 0.3s ease;
  z-index: 1;

  &::before,
  &::after {
    border-radius: var(--spacing-0\.5);
    position: absolute;
    inset: 0;
    content: "";
    transition:
      opacity 0.1s ease,
      transform 0.3s var(--transition-bounce);
    z-index: -1;
  }

  &::before {
    background-color: var(--color-surface);
  }

  &::after {
    background-color: var(--color-text);
    opacity: 0;
  }

  svg {
    color: var(--color-fadeText);
    transform: scale(1);
    transition: transform 0.3s var(--transition-bounce);
  }
}

@media (hover: hover) {
  .button:hover {
    &::before,
    &::after {
      transform: scale(1.05);
    }

    &::after {
      opacity: 1;
    }

    svg {
      color: var(--color-border);
      transform: rotateZ(12deg) scale(1.4);
    }
  }
}

.button:active {
  transform: scale(0.8);
}

.button--alt {
  color: var(--color-primary);

  &::before {
    background-color: var(--color-white);
  }

  &::after {
    background-color: color-mix(
      in srgb,
      var(--color-white) 90%,
      var(--color-primary)
    );
  }

  svg {
    color: inherit;
  }
}

@media (hover: hover) {
  .button--alt:hover {
    color: var(--color-shadow);

    svg {
      color: inherit;
    }
  }
}

.button__count {
  color: var(--color-fadeText);
}

@media (hover: hover) {
  .button:hover {
    .button__count {
      color: var(--color-border);
    }
  }
}