const colors = require('tailwindcss/colors')
const plugin = require('tailwindcss/plugin')

const chatMsgAvatarSize = '35px'
const inputBarHeight = '70px'


module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
    './src/**/*.vue',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      borderRadius: {
        lg: '10px',
        'chat-msg-bubble-opposite': '3pt  20pt  20pt  20pt',
        'chat-msg-bubble-myself': '20pt  3pt  20pt  20pt',
      },
      width: {
        'chat-msg-avatar': chatMsgAvatarSize,
      },
      minWidth: {
        'chat-msg-avatar': chatMsgAvatarSize,
      },
      maxWidth: {
        'chat-msg-bubble': '300px',
        'chat-msg-text': '255px',
      },
      height: {
        'chat-msg-avatar': chatMsgAvatarSize,
        'chat-header': '50px',
      },
      minHeight: {
        'input-bar': inputBarHeight,
        'input-menu': '100px',
      },
      spacing: {
        4: '15px',
        5.5: '22px',
        83: '335px',
        22: '90px'
      },
      boxShadow: {
        blue: '0px 0px 0px 1px #1888FA inset',
      },
    },
    colors: {
      "transparent": "transparent",
      "app-blue": "#3E4FAF",
      "app-red": "#F03A30",
      "app-white": "#F9FBFF",
      "app-gray": '#8D92AF',
      "app-bg": "#F8F8FA",
      "app-line": "#EAEAEB",
      "app-main-txt": "#516379",
      "app-minor-txt": "#EAEAEB",
      "branch-bg": "#F9F3E8",
      "branch-font": "#AD9781",
      "card-shadow": "#D6DBF8",
      "app-txt": "#1B1F37",
      "tab-bar-bg": "#4E61C9",
      "app-btn-disabled": "#E7E7E7",
      "app-branch-deep-blue": "#2C3C92",
      "branch-tab-bg":"#F9FBFF",
      "product-detail-bg":"#EAF0FF",
      black: colors.black,
      white: colors.white,
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      green: colors.emerald,
      blue: colors.blue,
      indigo: colors.indigo,
      purple: colors.violet,
      pink: colors.pink,
    },
    fontFamily: {
      "pf-r": ["PingFangSC-Regular", "PingFang SC"],
    },
  },
  variants: {
    extend: {},
    padding: ['responsive', 'important'],
    backgroundColor: ['responsive', 'important'],
    borderRadius: ['responsive', 'important'],
    fontSize: ['responsive', "important"],
    width: ['responsive', "important"],
    height: ['responsive', "important"],
  },
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('important', ({ container }) => {
        container.walkRules(rule => {
          rule.selector = `.\\!${rule.selector.slice(1)}`
          rule.walkDecls(decl => {
            decl.important = true
          })
        })
      })
    }),
  ],
}
