export default {
  name: "Passkeys",
  acceptsChildren: false,
  category: "Other",
  layers: [
    {
      id: "iconButton",
      name: "Icon Button",
      defaultStyles: {
        ":hover": {
          "background-color": "var(--theme-bg-muted)",
          color: "var(--theme-colors-red-500)",
        },
        ":active": {
          "background-color": "var(--theme-border-default)",
        },
        ":focus-visible": {
          "box-shadow": "var(--theme-shadows-outline)",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
          "box-shadow": "none",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-semibold)",
          "font-size": "var(--theme-fontSizes-md)",
          color: "var(--theme-fg-default)",
          "text-align": "center",
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "inline-flex",
          "flex-direction": "row",
          "justify-content": "center",
          "align-items": "center",
          width: "40px",
          height: "40px",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "2px",
          "border-style": "solid",
          "border-color": "white",
          "background-color": "#ffffff",
          "box-shadow": "var(--theme-shadows-none)",
          cursor: "pointer",
        },
      },
    },
    {
      id: "button",
      name: "Button",
      defaultStyles: {
        ":hover": {
          "background-color": "var(--theme-colors-gray-100)",
        },
        ":active": {
          "background-color": "var(--theme-border-default)",
        },
        ":focus-visible": {
          "box-shadow": "var(--theme-shadows-outline)",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
          "box-shadow": "none",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-weight": "var(--theme-fontWeights-semibold)",
          "font-size": "var(--theme-fontSizes-md)",
          color: "var(--theme-colors-gray-800)",
          "text-align": "center",
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "inline-flex",
          "flex-direction": "row",
          "justify-content": "center",
          "align-items": "center",
          gap: "8px",
          width: "auto",
          height: "40px",
          "min-width": "auto",
          "min-height": "auto",
          "max-width": "100%",
          "max-height": "100%",
          "padding-right": "16px",
          "padding-left": "16px",
          "padding-top": "0px",
          "padding-bottom": "0px",
          "border-color": "var(--theme-border-default)",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "2px",
          "border-style": "solid",
          "background-color": "#ffffff",
          "box-shadow": "var(--theme-shadows-none)",
          cursor: "pointer",
        },
      },
    },
    {
      id: "input",
      name: "Input",
      defaultStyles: {
        ":hover": {
          "border-color": "var(--theme-colors-gray-300)",
        },
        ":focus": {
          "border-color": "var(--theme-colors-blue-500)",
          "box-shadow": "rgb(49, 130, 206) 0px 0px 0px 1px",
        },
        ":error": {
          "border-color": "var(--theme-colors-red-500)",
        },
        ":disabled": {
          opacity: 0.4,
          cursor: "not-allowed",
        },
        "": {
          "font-family": "var(--theme-fonts-body)",
          "font-size": "var(--theme-fontSizes-md)",
          color: "var(--theme-colors-gray-800)",
          "flex-grow": "0",
          "flex-shrink": "1",
          "flex-basis": "auto",
          display: "flex",
          "flex-direction": "row",
          "justify-content": "flex-start",
          "align-items": "stretch",
          width: "100%",
          height: "40px",
          "min-width": "auto",
          "min-height": "auto",
          "max-width": "100%",
          "max-height": "100%",
          "padding-right": "16px",
          "padding-left": "16px",
          "border-color": "var(--theme-border-default)",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "1px",
          "border-style": "solid",
          "background-color": "transparent",
          "box-shadow": "var(--theme-shadows-none)",
          outline: "var(--theme-sizes-zero)",
        },
      },
    },
    {
      id: "li",
      name: "List Item",
      defaultStyles: {
        "": {
          display: "flex",
          padding: "var(--theme-spacing-xs)",
          "border-radius": "var(--theme-radii-md)",
          "border-width": "2px",
          "border-color": "var(--theme-border-default)",
          "border-style": "solid",
          "justify-content": "space-between",
          "align-items": "center",
          gap: "8px",
        },
      },
    },
    {
      id: "editable",
      name: "Passkey Name",
      defaultStyles: {
        "": {
          display: "flex",
          "align-items": "center",
          "justify-content": "space-between",
          width: "100%",
          cursor: "pointer",
        },
      },
    },
  ],
  props: [],
  events: [],
  defaultStyles: {
    "": {
      display: "flex",
      "flex-direction": "column",
      width: "100%",
      gap: "8px",
      margin: "0px",
      padding: "0px",
    },
  },
  sources: [],
  actions: [],
} as const;