.button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(
    --codex-button-icon-background,
    var(--codex-background-light)
  );
  border-radius: 50%;
  cursor: pointer;
  transition: box-shadow 0.35s;
  border: none;

  &.button-icon--big {
    width: 4rem;
    height: 4rem;
  }

  &.button-icon--small {
    width: 2rem;
    height: 2rem;
  }

  &:not(:disabled):hover {
    cursor: pointer;
    box-shadow: 0 0 0 2px var(--codex-border-color);
  }

  &:disabled {
    color: var(--codex-color-disabled);
    cursor: not-allowed;
  }

  &.button-icon--buzz {
    -webkit-animation-name: buzz;
    animation-name: buzz;
    -webkit-animation-duration: 0.45s;
    animation-duration: 0.45s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 5;
    animation-iteration-count: 5;
  }

  &.button-icon--bounce {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }

  svg {
    mix-blend-mode: difference;
  }
}

@keyframes buzz {
  0% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translateX(-3px) rotate(-15deg);
    transform: translateX(-3px) rotate(-15deg);
  }

  50% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  75% {
    -webkit-transform: translateX(3px) rotate(15deg);
    transform: translateX(3px) rotate(15deg);
  }

  100% {
    -webkit-transform: translateX(0) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0px) scale(1);
  }

  50% {
    -webkit-transform: translateY(-10px) scale(1);
    transform: translateY(-10px) scale(1);
  }

  100% {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0px) scale(1);
  }
}