lbry-desktop/ui/scss/component/_purchase.scss

.file-price {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--color-purchased-text);

  .credit-amount,
  .icon--Key {
    position: relative;
    margin-left: var(--spacing-m);
    white-space: nowrap;
  }

  &::before {
    position: absolute;
    content: '';
    left: 0;
    width: 250%;
    height: 160%;
    transform: skew(15deg);
    border-radius: var(--border-radius);
    background-color: var(--color-purchased-alt);
    border: 2px solid var(--color-purchased);
  }
}

.file-price__key {
  @extend .file-price;
  color: var(--color-gray-5);

  .icon {
    fill: white;
  }

  &::before {
    background-color: var(--color-purchased);
    height: 180%;
  }
}

.file-price--filepage {
  font-size: var(--font-body);
  top: calc(var(--spacing-xxs) * -1);
  margin-left: var(--spacing-m);

  .credit-amount {
    margin: 0 var(--spacing-m);
  }

  &::before {
    height: 250%;
    left: calc(var(--spacing-m) * -1);
    border-radius: 0;
    border-bottom-left-radius: var(--border-radius);
    border-width: 5px;
    border-top-width: 0;
  }

  @media (max-width: $breakpoint-small) {
    padding: var(--spacing-s);

    &::before {
      height: 140%;
    }
  }
}

.file-price__key--filepage {
  @extend .file-price--filepage;
  top: 0;

  &::before {
    height: 300%;
  }

  .icon {
    margin: 0 var(--spacing-m);
  }

  @media (max-width: $breakpoint-small) {
    &::before {
      top: calc(-1 * var(--spacing-s));
      height: 110%;
    }

    .icon {
      top: calc(-1 * var(--spacing-s));
      margin: 0 var(--spacing-xs);
    }
  }
}

.file-price--modal {
  border: 5px solid var(--color-purchased);

  .credit-amount {
    margin: 0 var(--spacing-m);
    margin-left: var(--spacing-l);
    font-weight: var(--font-bold);
  }
}

.file-price--modal {
  font-size: var(--font-body);
  height: 4rem;
  background-color: var(--color-purchased-alt);
  border-radius: var(--border-radius);
  transform: skew(15deg);

  .icon,
  .credit-amount {
    transform: skew(-15deg);
  }

  .credit-amount {
    font-size: var(--font-large);
  }

  &::before {
    content: none;
  }
}

.file-price__key--modal {
  @extend .file-price--modal;
  top: var(--spacing-m);

  .icon {
    height: 100%;
    width: auto;
    left: calc(var(--spacing-xl) * 1.5);
    animation: moveKey 2.5s 1 ease-out;
    overflow: visible;
    stroke: var(--color-black);

    g {
      animation: turnKey 2.5s 1 ease-out;
    }
  }

  &::before {
    content: '';
    transform: skew(15deg);
    animation: expand 2.5s 1 ease-out;
  }
}

.purchase-stuff {
  display: flex;
  align-items: center;

  > *:first-child {
    width: 60%;
    padding-right: var(--spacing-s);
  }

  .file-price,
  .file-price__key {
    width: 900%;
  }

  .file-price__key {
    background-color: transparent;
    border-width: 0;

    @media (max-width: $breakpoint-small) {
      margin-top: calc(var(--spacing-xl) * 2);
    }
  }
}

.purchase-stuff__text--purchased {
  font-weight: bold;
  font-size: var(--font-title);
  color: var(--color-black);
  position: absolute;
  top: calc(var(--spacing-xl) * 1.6);
  left: var(--spacing-l);
  bottom: 0;
  right: 0;
  z-index: 9999999999;
  animation: display 1s 1 ease-in;
  opacity: 1;
}

.purchase_stuff__subtext--purchased {
  color: var(--color-black);
  font-size: var(--font-body);
  margin-top: var(--spacing-m);
}

@keyframes display {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes expand {
  0% {
    left: 50%;
  }

  50% {
    height: 30rem;
  }

  100% {
    height: 30rem;
    left: -200%;
  }
}

@keyframes moveKey {
  0% {
    max-height: 3rem;
    left: -20rem;
  }

  20% {
    left: calc(var(--spacing-xl) * 1.5);
  }

  50% {
    left: calc(var(--spacing-xl) * 1.5);
  }

  70% {
    left: calc(var(--spacing-xl) * 1.5);
  }

  100% {
    max-height: 10rem;
    opacity: 1;
    left: 30rem;
  }
}

@keyframes turnKey {
  0% {
    transform: rotate3d(0, 0, 0, 0);
  }

  50% {
    transform: rotate3d(0, 0, 1, 45deg);
  }

  60% {
    transform: rotate3d(1, 0, 1, 45deg);
  }
  70% {
    transform: rotate3d(0, 0, 1, 45deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 45deg);
  }
}