import { style } from "@vanilla-extract/css";
import { fadeIn } from "../animations.css.ts";

export const container = style({
  display: "flex",
  alignItems: "center",
  justifyItems: "center",
  flexDirection: "column",
  blockSize: "100%",
});

export const safariPrompt = style({
  backgroundColor: "white",
  borderRadius: "1rem",
  maxWidth: "38rem",
  padding: "clamp(1rem, 5vw, 3rem)",
  margin: "auto",
});

export const safariLogo = style({
  maxWidth: "4rem",
  marginInline: "auto",
  marginBlockEnd: "1rem",
  aspectRatio: "1",
});

export const safariPromptHeader = style({
  marginBlockEnd: "clamp(1.5rem, 4cqw, 2rem)",
});

export const safariPromptActions = style({
  display: "grid",
  gap: "0.5rem",
  gridTemplateColumns: "repeat(auto-fill, minmax(12rem, 1fr))",
  marginBlock: "1.5rem",
});

export const safariDismissArea = style({
  textAlign: "center",
  marginBlock: "2rem 3rem",
});

export const compatCheckLoaderContainer = style({
  maxInlineSize: "16rem",
  margin: "auto",
});

export const indicator = style({
  marginInline: "auto",
});

export const compatCheckLoaderText = style({
  fontStyle: "italic",
  color: `hsl(0 0% 0% / 0.5)`,
  animation: `${fadeIn} 300ms 150ms both`,
  marginBlockStart: "0.5rem",
  textAlign: "center",
});

export const emptyStateHeading = style({
  textAlign: "center",
  marginBlockEnd: "0.5rem",
});

export const appIcon = style({
  aspectRatio: "1",
  borderRadius: "20%",
  boxShadow: "0 0.125rem 0.25rem hsl(0 0% 0% / 0.2)",
  width: "3rem",
  height: "auto",
  marginInline: "auto",
  marginBlockEnd: "1rem",
});

export const dialog = style({
  padding: "2rem",
  textAlign: "center",
});

export const heading = style({
  fontSize: "1.25rem",
});

export const intro = style({
  marginBlockStart: "0.5rem",
});

export const steps = style({
  marginBlock: "2rem",
  borderBlockStart: "1px solid hsl(0 0% 0% / 0.1)",
  textAlign: "left",
});

export const step = style({
  borderBlockEnd: "1px solid hsl(0 0% 0% / 0.1)",
  listStyle: "decimal",
  listStylePosition: "inside",
  paddingBlock: "0.75rem",
});

export const icon = style({
  display: "inline-block",
  position: "relative",
  inlineSize: "1.25rem",
  top: "0.125em",
});