/** @type {import('tailwindcss').Config} */

module.exports = {
  content: ['./src/**/*.{html,ts}', './node_modules/@sixbell-telco/sdk/**/*.{html,ts,js,mjs}'],
  theme: {
    extend: {
      colors: {
        'secondary-muted': 'rgba(var(--secondary-muted), <alpha-value>)',
        'secondary-muted-content': 'rgba(var(--secondary-muted-content), <alpha-value>)',
        'border-box': 'rgba(var(--border-box))',
        ring: 'rgba(var(--ring),  <alpha-value>)',
        'ring-accent': 'rgba(var(--ring-accent), <alpha-value>)',
        separator: 'rgba(var(--separtor), <alpha-value>)',
        'base-200-muted': 'rgba(var(--base-200-muted))',
      },
      fontFamily: {
        poppins: ['Poppins', 'sans-serif'],
        heading: ['Poppins', 'sans-serif'],
        body: ['Poppins', 'sans-serif'],
      },
      boxShadow: {
        primary: '0px 5px 5px 0px rgba(var(--shadow-primary))',
        secondary: '0px 2px 5px 0px rgba(var(--shadow-secondary))',
      },
      borderRadius: {
        'btn-xs': 'var(--rounded-btn-xs)',
        'btn-sm': 'var(--rounded-btn-sm)',
        'btn-md': 'var(--rounded-btn-md)',
        'btn-lg': 'var(--rounded-btn-lg)',
        'box-sm': 'var(--rounded-box-sm)',
        'box-md': 'var(--rounded-box-md)',
        'box-lg': 'var(--rounded-box-lg)',
      },
      fontWeight: {
        inherit: 'inherit',
      },
      transitionTimingFunction: {
        'ease-out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
        'ease-in-and-out-back': 'cubic-bezier(0.68, -0.55, 0.27, 1.55)',
      },
      animation: {
        'slide-in': 'slideIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)',
        'slide-out': 'slideOut 0.8s cubic-bezier(0.34, 1.56, 0.64, 1)',
        'toast-slide-out': 'toastSlideOut 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55)',
        'fade-in': 'fadeIn 1s',
        'fade-out': 'fadeOut 1s',
      },
    },
  },
  daisyui: {
    themes: [
      {
        vivid_elegance: {
          // Daisy UI theme variables
          primary: '#4DD6ED',
          'primary-content': '#FFFFFF',
          secondary: '#d9dadd',
          'secondary-content': '#414756',
          accent: '#4DD6ED',
          'accent-content': '#FFFFFF',
          neutral: '#414756',
          'neutral-content': '#FFFFFF',
          'base-100': '#FFFFFF',
          'base-200': '#f6f6f6',
          'base-300': '#4DBED1',
          'base-content': '#1F2937',
          info: '#4DD6ED',
          'info-content': '#FFFFFF',
          success: '#4DD192',
          'success-content': '#FFFFFF',
          warning: '#DBD46C',
          'warning-content': '#414756',
          error: '#E72F40',
          'error-content': '#FFFFFF',
          // Custom colors
          '--secondary-muted': '237, 237, 237',
          '--secondary-muted-content': '65, 71, 86',
          '--shadow-primary': '77, 190, 209,  0.7',
          '--shadow-secondary': '186, 185, 185, 0.40',
          '--separtor': '217, 217, 217',
          '--border-box': '65, 71,68, 0.2',
          '--input-border': '186, 185, 185',
          '--ring': '186, 185, 185',
          '--ring-accent': '77, 214, 237',
          '--base-200-muted': '250, 250, 250, 0.2',
          // Daisy UI utility variables
          '--rounded-box': '1rem', // border radius rounded-box utility class, used in card and other large boxes
          '--rounded-btn': '0.5rem', // border radius rounded-btn utility class, used in buttons and similar element
          '--rounded-badge': '1.9rem', // border radius rounded-badge utility class, used in badges and similar
          '--animation-btn': '0.25s', // duration of animation when you click on button
          '--animation-input': '0.2s', // duration of animation for inputs like checkbox, toggle, radio, etc
          '--btn-focus-scale': '0.95', // scale transform of button when you focus on it
          '--border-btn': '1px', // border width of buttons
          '--tab-border': '1px', // border width of tabs
          '--tab-radius': '0.5rem', // border radius of tabs
          // Custom utility variables
          '--rounded-btn-xs': '0.3rem', // 4.8px
          '--rounded-btn-sm': '0.5rem', // 8px
          '--rounded-btn-md': '0.813rem', // 13px
          '--rounded-btn-lg': '2.25rem', // 36px
          '--rounded-box-sm': '0.5rem', // 8px
          '--rounded-box-md': '0.813rem', // 13px
          '--rounded-box-lg': '2.25rem', // 36px
        },
      },
    ],
  },
  plugins: [require('@midudev/tailwind-animations'), require('@tailwindcss/typography'), require('daisyui')],
};