dees-domtools/ts/domtools.breakpoints.ts

import { DomTools } from './domtools.classes.domtools';

import { CSSResult } from 'lit-element';

export const desktop = 1240;
export const tablet = 1024;
export const phablet = 600;
export const phone = 400;

export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';

export const cssForTablet = (cssArg: CSSResult) => {
  return `
    @container wccToolsViewport (min-width: ${tablet}px) {
      ${cssArg.cssText}
    }
    @media (min-width: ${tablet}px) {
      ${cssArg.cssText}
    }
  `;
};

export const cssForPhablet = (cssArg: CSSResult) => {
  return `
    @container wccToolsViewport (min-width: ${phablet}px) {
      ${cssArg.cssText}
    }
    @media (min-width: ${phablet}px) {
      ${cssArg.cssText}
    }
  `;
};

export const cssForPhone = (cssArg: CSSResult) => {
  return `
    @container wccToolsViewport (min-width: ${phone}px) {
      ${cssArg.cssText}
    }
    @media (min-width: ${phone}px) {
      ${cssArg.cssText}
    }
  `;
};