import { focus, pxToRem, styled } from '@project44-manifest/react-styles';

export const StyledPaginationItem = styled(
  'button',
  {
    $$backgroundColor: '$colors$palette-grey-50',

    alignItems: 'center',
    appearance: 'none',
    backgroundColor: '$$backgroundColor',
    border: '1px solid $colors$palette-grey-200',
    borderRadius: '$small',
    boxSizing: 'border-box',
    color: '$text-secondary',
    cursor: 'pointer',
    display: 'inline-flex',
    margin: 0,
    outline: 'none',
    position: 'relative',
    px: pxToRem(12),
    py: pxToRem(5),
    transition: '$color',
    textDecoration: 'none',
    userSelect: 'none',
    width: 'auto',

    '.manifest-icon': {
      fontSize: pxToRem(18),
    },

    '.manifest-pagination-item__icon--end': {
      marginLeft: '$x-small',
    },

    '.manifest-pagination-item__icon--start': {
      marginRight: '$x-small',
    },

    variants: {
      isActive: {
        true: {
          $$backgroundColor: '$colors$palette-grey-200',
        },
      },
      isDisabled: {
        true: {
          opacity: 0.37,
          pointerEvents: 'none',
        },
      },
      isHovered: {
        true: {
          $$backgroundColor: '$colors$palette-grey-100',
        },
      },
      isPressed: {
        true: {},
      },
      isFocusVisible: {
        true: {
          outlineOffset: '1px',
        },
      },
    },

    compoundVariants: [
      {
        isActive: true,
        isHovered: true,
        css: {
          $$backgroundColor: '$colors$palette-grey-200',
        },
      },
    ],
  },
  focus,
);