@layer components {
  .plan-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);

    .plan-card__header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      padding: var(--space-4);
      border-bottom: 1px solid var(--color-border);

      .plan-card__name {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-4xl);
        font-weight: bold;
      }
      .plan-card__price {
        font-size: var(--text-2xl);
        font-weight: bold;
        color: var(--color-gray-900);
        span {
          font-size: var(--text-base);
          font-weight: normal;
          color: var(--color-gray-500);
        }
      }

      .plan-card__description {
        flex: 0 1 100%;
        font-weight: var(--font-medium);
        color: var(--color-gray-500);
      }
    }

    .plan-card__body {
      padding: var(--space-4);
    }

    .plan-card__footer {
      margin-top: auto;
      padding: var(--space-4);
    }

    &.is-selected {
      border: 2px solid  var(--color-primary-600);
    }
  }

  [data-theme="dark"] {
    .plan-card {
      background: var(--color-hover);

      .plan-card__header {
        .plan-card__description {
          color: var(--color-gray-700);
        }
      }

      &.is-selected {
        border: 2px solid  var(--color-primary-300);
      }
    }
  }
}