import { css } from 'styled-components';

export const checkbox = css`
  --checkbox-content-color: var(--text-color-secondary);
  --checkbox-content-color-hover: var(--text-color-primary);
  --checkbox-content-color-focused: var(--text-color-primary);
  --checkbox-content-color-disabled: var(--text-color-disabled);

  --checkbox-box-color: transparent;
  --checkbox-box-color-active: var(--color-warm-grey-10);
  --checkbox-box-color-focused: var(--color-warm-grey-9);
  --checkbox-box-color-disabled: var(--color-warm-grey-1);

  --checkbox-border-color: var(--border-color-primary);
  --checkbox-border-color-active: var(--color-warm-grey-8);
  --checkbox-border-color-disabled: var(--border-color-secondary);

  --checkbox-content-color-inverse: var(--color-white);
`;