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

module.exports = plugin(function ({ addComponents, theme, addBase, matchUtilities }) {
  addBase({
    '.menu': {
      '--menu-background': theme('colors.components.menu.DEFAULT'),
      '--menu-content': theme('colors.components.menu.content'),
      '--menu-item-height': theme('spacing.12'),
      '--menu-item-padding': `${theme('spacing.1')} ${theme('spacing.3')}`,
      '--menu-border-radius': theme('borderRadius.DEFAULT'),
      '--menu-item-hover-background': theme('colors.components.menu.hover.DEFAULT'),
      '--menu-item-hover-content': theme('colors.components.menu.hover.content'),
      '--menu-item-hover-border': theme('colors.components.menu.hover.border'),
      '--menu-item-seperator': theme('colors.components.menu.seperator'),
      '--menu-shadow': '0 0.375rem 1.5rem rgba(206, 212, 219, 0.8)',
    },
  });

  addComponents({
    '.menu': {
      display: 'inline-flex',
      flexDirection: 'column',
      backgroundColor: 'var(--menu-background)',
      color: 'var(--menu-content)',
      borderRadius: 'var(--menu-border-radius)',
      boxShadow: 'var(--menu-shadow)',
    },
    '.menu-item': {
      display: 'inline-flex',
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'left',
      height: 'var(--menu-item-height)',
      padding: 'var(--menu-item-padding)',
      backgroundColor: 'var(--menu-background)',
      color: 'var(--menu-content)',
      border: '1px solid var(--menu-background)',
      position: 'relative',
      '&:not(:first-child)::before': {
        position: 'absolute',
        top: '-0.063rem',
        left: '0.75rem',
        right: '0.75rem',
        content: '""',
        display: 'block',
        height: '0.125rem',
        backgroundColor: 'var(--menu-item-seperator)',
      },
      '&:first-child': {
        borderTopLeftRadius: 'var(--menu-border-radius)',
        borderTopRightRadius: 'var(--menu-border-radius)',
      },
      '&:last-child': {
        borderBottomLeftRadius: 'var(--menu-border-radius)',
        borderBottomRightRadius: 'var(--menu-border-radius)',
      },
      '&:hover, &:active, &.active': {
        backgroundColor: 'var(--menu-item-hover-background)',
        color: 'var(--menu-item-hover-content)',
        borderRadius: 'var(--menu-border-radius)',
        borderColor: 'var(--menu-item-hover-border)',
        '&::before': {
          display: 'none',
        },
      },
    },
  });
});