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

import { css, unsafeCSS } from 'lit';

/**
 * changes scrollbar styles to be consistent across OS borders
 */
export const scrollBarStyles: string = (() => {
  const returnStyles =
    navigator.userAgent.indexOf('Mac OS X') !== -1
      ? css`
          /* width */
          ::-webkit-scrollbar {
            width: 8px;
          }

          /* Track */
          ::-webkit-scrollbar-track {
            background: #111;
          }

          /* Handle */
          ::-webkit-scrollbar-thumb {
            background: #666;
          }

          /* Handle on hover */
          ::-webkit-scrollbar-thumb:hover {
            background: #777;
          }
        `.cssText
      : ``;
  return returnStyles;
})();

export const globalBaseStyles: string = css`
  /* global material font */
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
      format('woff2');
  }

  /* Roboto Font */
  @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400');
  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100;300;400');

  /* global body styles */
  body {
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
  }

  /* scroll bar styles */
  ${unsafeCSS(scrollBarStyles)}
`.cssText;