import { style } from "@vanilla-extract/css";
import { recipe } from "@vanilla-extract/recipes";

export const card = {
  container: recipe({
    base: {
      display: "flex",
      flexDirection: "column",
      gap: "0.75rem",
      backgroundColor: "white",
      padding: "1.5rem",
      borderRadius: "0.5rem",
      color: "black",
    },

    variants: {
      align: {
        center: {
          textAlign: "center",
        },
        start: {
          textAlign: "start",
        },
      },
    },
  }),

  logo: recipe({
    base: {
      maxInlineSize: "11rem",
    },

    variants: {
      align: {
        center: {
          marginInline: "auto",
        },
        start: {
          marginInline: "0",
        },
      },
    },
  }),

  loggedInAction: style({
    borderBlockStart: "1px solid hsl(0 0% 0% / 0.1)",
    paddingBlockStart: "0.75rem",
  }),
};