Pricing table template

@use "@wovenui/core" as *;

.pricing {
    @include apply(
        grid, // display: grid
        cols(1), // one grid column
        cols(3) md, // three columns from md (768px) up
        gap(6) // gap: spacing key 6 (1.5rem)
    );
}

.plan {
    @include apply(
        flex, // display: flex
        col, // flex direction: column
        gap(4), // gap: spacing key 4 (1rem)
        p(6), // padding: spacing key 6 (1.5rem)
        bg(surface), // surface background, follows the theme
        text-color(regular), // regular text color, follows the theme
        border(1), // 1px border (width key 1), regular color
        rounded(lg) // corner radius: size key lg (0.75rem)
    );
}

.plan--featured {
    @include apply(border(2, solid, brand)); // 2px solid border (width key 2), brand color
}

.plan__header {
    @include apply(
        flex, // display: flex
        between, // main axis: space between (justify-content)
        x-center, // cross axis: center (align-items)
        gap(2) // gap: spacing key 2 (0.5rem)
    );
}

.plan__name {
    @include apply(
        m(0), // margin: 0
        font-size(lg), // font size key lg (1.25rem)
        font(semibold) // font weight: semibold (600)
    );
}

.plan__badge {
    @include apply(
        px(2), // horizontal padding: spacing key 2 (0.5rem)
        py(1), // vertical padding: spacing key 1 (0.25rem)
        rounded(full), // fully rounded ends (pill shape)
        bg(brand-subtle), // light brand tint background
        text-color(brand), // brand text color
        font-size(xs), // font size key xs (0.75rem)
        font(medium) // font weight: medium (500)
    );
}

.plan__price {
    @include apply(m(0)); // margin: 0
}

.plan__amount {
    @include apply(
        font-size(4xl), // font size key 4xl (2.5rem)
        font(bold) // font weight: bold (700)
    );
}

.plan__period,
.plan__text {
    @include apply(
        font-size(sm), // font size key sm (0.875rem)
        text-color(muted) // muted text color, follows the theme
    );
}

.plan__text {
    @include apply(m(0)); // margin: 0
}

// grow keeps the calls to action level when the lists differ in length
.plan__features {
    @include apply(
        grow, // grow to fill free space (flex: 1 1 0%)
        flex, // display: flex
        col, // flex direction: column
        gap(2), // gap: spacing key 2 (0.5rem)
        m(0), // margin: 0
        p(0), // padding: 0
        font-size(sm) // font size key sm (0.875rem)
    );
}

.plan__cta {
    @include apply(
        block, // display: block
        px(4), // horizontal padding: spacing key 4 (1rem)
        py(2), // vertical padding: spacing key 2 (0.5rem)
        border(1), // 1px border (width key 1), regular color
        rounded(md), // corner radius: size key md (0.5rem)
        font(medium), // font weight: medium (500)
        text-center, // center the text
        text-color(regular), // regular text color, follows the theme
        bg(hover) hover // hover background on hover
    );

    &:focus-visible {
        outline: token(border-focus-width) solid token(border-focus);
        outline-offset: token(border-focus-offset);
    }
}

.plan__cta--primary {
    @include apply(
        bg(brand), // brand fill background
        text-color(on-brand), // text color made for the brand fill
        border-color(brand), // border color: brand
        bg(brand-hover) hover // brand hover fill on hover
    );
}