@use "../../../../styles/int.scss";

.container {
  font-weight: bold;
  padding: int.$spacing-1 int.$spacing-2;
  display: flex;
  align-items: center;
  gap: int.$spacing-1;
  width: max-content;

  &.size-000 {
    padding: 0 int.$spacing-1;
  }

  &.dem {
    transform: rotate(-4deg);
    animation: flip-left 500ms 1 forwards;
  }

  &.gop {
    transform: rotate(4deg);
    animation: flip-right 500ms 1 forwards;
  }
}

@keyframes flip-left {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-4deg);
  }
}

@keyframes flip-right {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(4deg);
  }
}