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

import { vars } from './vars.css';

const focusCss: CSSProperties = {
  outlineStyle: 'auto',
  outlineColor: vars.colors['base-text-strong'],
};

/** Adds ellipsis when text is overflown. */
export const textEllipsis = style({
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  overflow: 'hidden',
});

/** Adds outline around an element when it's focused. */
export const focusOutline = style({
  outline: '2px solid transparent',
  outlineOffset: '2px',

  ':focus-visible': focusCss,

  '@supports': {
    'not selector(:focus-visible)': {
      ':focus': focusCss,
    },
  },
});

/** A CSS reset for button. */
export const buttonReset = style([
  focusOutline,
  {
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',

    appearance: 'none',
    userSelect: 'none',
    cursor: 'pointer',
    backgroundColor: 'transparent',
    border: 'none',
    borderRadius: '0',

    whiteSpace: 'nowrap',
    textDecoration: 'none',

    transition: 'all 0.2s',

    ':disabled': {
      opacity: 0.5,
      cursor: 'not-allowed',
    },
  },
]);