packages/frontend/src/styles/module/pricing.module.scss

.plan {
  @apply flex flex-col overflow-hidden rounded-3xl p-6 shadow-lg;
  @apply shadow-gray-900/5 bg-white;

  &.featured {
    @apply order-first bg-gray-900 lg:order-none;
  }

  .plan-title {
    @apply flex items-center text-sm font-semibold text-gray-900;

    .logo {
      @apply h-6 w-6 flex-none;
    }
  }

  .plan-price {
    @apply relative mt-5 flex text-3xl tracking-tight text-gray-900;
  }

  .plan-description {
    @apply mt-3 text-sm text-gray-700;
  }

  .plan-features {
    @apply order-last mt-6;

    .features-list {
      @apply -my-2 divide-y text-sm divide-gray-200 text-gray-700;
    }

    .feature-item {
      @apply flex py-2;
    }
  }

  .plan-button {
    @apply mt-6;
  }
}

.featured {
  .plan-title,
  .plan-price {
    @apply text-white;
  }

  .plan-description {
    @apply text-gray-300;
  }

  .features-list {
    @apply divide-gray-800 text-gray-300;
  }

  .check-icon {
    @apply text-white;
  }
}

.price-transition {
  @apply transition duration-300;
}

.price-hidden {
  @apply pointer-events-none translate-x-6 select-none opacity-0;
}

.price-absolute {
  @apply absolute left-0 top-0;
}