@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.label-name .plan-label-oneoff {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.label-name .plan-label-recurring {
  display: none;
  opacity: 0;
  transform: scale(0);
}

.oneoff-plans .label-name .plan-label-recurring,
.recurring-plans .label-name .plan-label-oneoff {
  animation: scaleOut 300ms ease forwards;

  &.hidden {
    display: none;
  }
}

.recurring-plans {
  .label-name {
    .plan-label-recurring {
      animation: scaleIn 300ms ease forwards;
    }
  }
}

.oneoff-plans {
  .label-name {
    .plan-label-oneoff {
      animation: scaleIn 300ms ease forwards;
    }
  }
}

.form-plans {
  .label-name {
    display: grid;

    span {
      overflow: hidden;
      display: block;
      opacity: 1;
      /* Layer on top of each other */
      grid-column: 1;
      grid-row: 1;
    }
  }
}

.label-not-gift {
  display: block;
}

.label-gift {
  display: none;
}

.gift-supportership-enabled {
  .label-not-gift {
    display: none;
  }

  .label-gift {
    display: block;
  }
}