styles.ts

import { css } from 'emotion'
import { colors } from '../../theme'

export const wrapper = css({
  position: 'relative',
  display: 'flex',
  backgroundColor: colors.dark,
  height: 50,
  justifyContent: 'center',
  alignItems: 'center',
  zIndex: 99999,
})

export const app = css({
  outline: 'none',
  border: 0,
  width: '100%',
  cursor: 'pointer',
  backgroundColor: colors.white,
  display: 'flex',
  alignItems: 'center',
  color: colors.black,
  padding: '0.5rem 1rem',
  whiteSpace: 'nowrap',
})

export const appSelected = css({
  backgroundColor: colors.white2,
})

export const currentApp = (color: string) =>
  css({
    border: `2px solid ${color}`,
    borderRadius: '50%',
    color: colors.black,
    backgroundColor: colors.white,
    width: 30,
    height: 30,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    cursor: 'pointer',
    fontSize: 14,
    fontWeight: 'bold',
  })

export const overlay = css({
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
})

export const appsList = css({
  position: 'absolute',
  left: 'calc(100% + 1px)',
  top: 0,
  backgroundColor: colors.white,
  borderRight: `1px solid ${colors.dark2}`,
  borderBottom: `1px solid ${colors.dark2}`,
})