elements.tsx

import styled from '../../styled-components'

export const Wrapper = styled.div`
  position: relative;
  display: flex;
  background-color: ${({ theme }) => theme.color.white};
  height: 50px;
  justify-content: center;
  align-items: center;
`

export const App = styled<
  {
    isSelected: boolean
  },
  'button'
>('button')`
  outline: none;
  border: 0;
  width: 100%;
  cursor: pointer;
  background-color: ${({ theme, isSelected }) =>
    isSelected
      ? theme.color.lighten(theme.color.white, -0.03)
      : theme.color.lighten(theme.color.white, -0.01)};
  display: flex;
  align-items: center;
  color: ${({ theme }) => theme.color.black};
  padding: ${({ theme }) => `${theme.padding.small} ${theme.padding.normal}`};
  white-space: nowrap;
`

export const CurrentApp = styled.div<{
  color: string
}>`
  border: 2px solid ${({ color }) => color};
  border-radius: 50%;
  background-color: #fff;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: ${({ theme }) => theme.fontSize.small};
  font-weight: bold;
`

export const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
`

export const AppsList = styled.div`
  position: absolute;
  left: calc(100% + 1px);
  top: 0;
  background-color: #fff;
  border-right: 1px solid ${({ theme }) => theme.color.gray};
  border-bottom: 1px solid ${({ theme }) => theme.color.gray};
`