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

module.exports = plugin(function ({ addComponents, theme }) {
  addComponents({
    '.isa-select-bullet': {
      position: 'relative',
      appearance: 'none',
      width: theme('spacing.8'),
      height: theme('spacing.8'),
    },
    '.isa-select-bullet::before': {
      position: 'absolute',
      display: 'block',
      borderRadius: theme('borderRadius.full'),
      backgroundColor: '#AEB7C1',
      cursor: 'pointer',
      transitionProperty: 'all',
      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
      transitionDuration: '200ms',
      content: '""',
      top: '0',
      left: '0',
      right: '0',
      bottom: '0',
    },
    '.isa-select-bullet:hover::before': {
      backgroundColor: '#778490',
    },
    '.isa-select-bullet:checked::before': {
      backgroundColor: '#596470',
    },
    '.isa-select-bullet::after': {
      content: '""',
      backgroundImage:
        "url(\"data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/'%3E%3Cpath fill='white' d='M21.432,3.715C21.432,3.715 21.432,3.715 21.432,3.715C21.115,3.76 20.823,3.911 20.604,4.143C16.03,8.727 12.603,12.511 8.244,16.932C8.244,16.932 3.297,12.754 3.297,12.754C2.909,12.424 2.374,12.327 1.895,12.499C1.895,12.499 1.895,12.499 1.895,12.499C1.415,12.672 1.065,13.088 0.975,13.589C0.885,14.091 1.072,14.602 1.463,14.929L7.415,19.966C7.981,20.441 8.818,20.403 9.338,19.877C14.251,14.954 17.761,11.007 22.616,6.141C23.057,5.714 23.172,5.051 22.903,4.499C22.903,4.499 22.903,4.499 22.903,4.499C22.633,3.948 22.04,3.631 21.432,3.715Z'/%3E%3C/svg%3E%0A\")",
      position: 'absolute',
      top: '0.4rem',
      left: '0.4rem',
      bottom: '0.4rem',
      right: '0.4rem',
      cursor: 'pointer',
      opacity: '0',
      transitionProperty: 'all',
      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
      transitionDuration: '200ms',
    },
    '.isa-select-bullet:checked::after': {
      opacity: '1',
    },
  });
});