import { style } from '@vanilla-extract/css';

import { buttonReset, vars } from '../css';
import { localMenuVars } from './menu.css';

const hoverStyles = {
  backgroundColor: vars.colors['base-up'],
};

export const button = style([
  buttonReset,
  {
    width: '100%',
    paddingTop: localMenuVars.item.paddingY,
    paddingBottom: localMenuVars.item.paddingY,
    paddingLeft: localMenuVars.item.paddingX,
    paddingRight: localMenuVars.item.paddingX,
    display: 'flex',
    textAlign: 'left',
    overflow: 'hidden',
    alignItems: 'center',
    columnGap: vars.space[2],

    justifyContent: 'flex-start',
    transition: 'background-color 0.2s',
    color: vars.colors['base-text-strong'],

    selectors: {
      '&:not(:disabled):hover': hoverStyles,
      '&:not(:disabled):active': hoverStyles,
    },
  },
]);