import { createComponent } from '@graphprotocol/gds-css'

export const CardMeta = createComponent('Card', {
  isolate: 'allow-inheritance',
  cssProps: {
    /** @default 'secondary' */
    variant: {
      type: 'values',
      values: ['primary', 'secondary', 'tertiary'],
      defaultValue: 'secondary',
    },
  },
  vars: {
    padding: {},
    'padding-x': 'var(--gds-var-padding, --spacing(6))',
    'padding-y': 'var(--gds-var-padding, --spacing(6))',
    bg: {
      '@variant @prop-variant-primary/card': {
        '@variant @state-idle/card': 'var(--background-color-card-primary-idle)',
        '@variant @state-hover/card': 'var(--background-color-card-primary-hover)',
        '@variant @state-active/card': 'var(--background-color-card-primary-active)',
        '@variant @state-disabled/card': 'var(--background-color-card-primary-disabled)',
      },
      '@variant @prop-variant-secondary/card': {
        '@variant @state-idle/card': 'var(--background-color-card-secondary-idle)',
        '@variant @state-hover/card': 'var(--background-color-card-secondary-hover)',
        '@variant @state-active/card': 'var(--background-color-card-secondary-active)',
        '@variant @state-disabled/card': 'var(--background-color-card-secondary-disabled)',
      },
      '@variant @prop-variant-tertiary/card': {
        '@variant @state-idle/card': 'var(--background-color-card-tertiary-idle)',
        '@variant @state-hover/card': 'var(--background-color-card-tertiary-hover)',
        '@variant @state-active/card': 'var(--background-color-card-tertiary-active)',
        '@variant @state-disabled/card': 'var(--background-color-card-tertiary-disabled)',
      },
    },
    border: {
      '@variant @prop-variant-primary/card': {
        '@variant @state-idle/card': 'var(--border-color-card-primary-idle)',
        '@variant @state-hover/card': 'var(--border-color-card-primary-hover)',
        '@variant @state-active/card': 'var(--border-color-card-primary-active)',
        '@variant @state-disabled/card': 'var(--border-color-card-primary-disabled)',
      },
      '@variant @prop-variant-secondary/card': {
        '@variant @state-idle/card': 'var(--border-color-card-secondary-idle)',
        '@variant @state-hover/card': 'var(--border-color-card-secondary-hover)',
        '@variant @state-active/card': 'var(--border-color-card-secondary-active)',
        '@variant @state-disabled/card': 'var(--border-color-card-secondary-disabled)',
      },
      '@variant @prop-variant-tertiary/card': {
        '@variant @state-idle/card': 'var(--border-color-card-tertiary-idle)',
        '@variant @state-hover/card': 'var(--border-color-card-tertiary-hover)',
        '@variant @state-active/card': 'var(--border-color-card-tertiary-active)',
        '@variant @state-disabled/card': 'var(--border-color-card-tertiary-disabled)',
      },
    },
    radius: 'var(--radius-8)',
  },
})
