import type { Config } from "tailwindcss";

const config: Config = {
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "var(--ion-color-primary)",
        secondary: "var(--ion-color-secondary)",
        tertiary: "var(--ion-color-tertiary)",
        success: "var(--ion-color-success)",
        warning: "var(--ion-color-warning)",
        danger: "var(--ion-color-danger)",
        light: "var(--ion-color-light)",
        medium: "var(--ion-color-medium)",
        dark: "var(--ion-color-dark)",
        faint: "var(--ion-color-faint)",
        text: {
          50: "var(--ion-text-color-step-50)",
          100: "var(--ion-text-color-step-100)",
          150: "var(--ion-text-color-step-150)",
          200: "var(--ion-text-color-step-200)",
          250: "var(--ion-text-color-step-250)",
          300: "var(--ion-text-color-step-300)",
          350: "var(--ion-text-color-step-350)",
          400: "var(--ion-text-color-step-400)",
          450: "var(--ion-text-color-step-450)",
          500: "var(--ion-text-color-step-500)",
          550: "var(--ion-text-color-step-550)",
          600: "var(--ion-text-color-step-600)",
          650: "var(--ion-text-color-step-650)",
          700: "var(--ion-text-color-step-700)",
          750: "var(--ion-text-color-step-750)",
          800: "var(--ion-text-color-step-800)",
          850: "var(--ion-text-color-step-850)",
          900: "var(--ion-text-color-step-900)",
        },
      },
    },
  },
  plugins: [
    function ({ addUtilities }) {
      addUtilities({
        ".flex-center": {
          "display": "flex",
          "align-items": "center",
          "justify-content": "center",
        },
        ".flex-col-center": {
          "display": "flex",
          "flex-direction": "column",
          "align-items": "center",
          "justify-content": "center",
        },
        ".scrollbar-hide": {
          "-ms-overflow-style": "none",
          "scrollbar-width": "none",
          "&::-webkit-scrollbar": {
            display: "none",
          },
        },
      });
    },
  ],
};

export default config;
