stream/src/components/Chat/styles.js

import styled from 'styled-components'
import { colours, ui } from '../../assets/theme'
import CrossSvg from '../Svg/Cross'
import { Label } from '../Text'

export const ChatFrame = styled.div`
  /* border: 2px solid ${colours.white}; */
  /* padding: 20px; */
`

export const ChatWrapper = styled.div`
  position: fixed;
  z-index: 10;
  bottom: -5px;
  right: 0;
  backdrop-filter: blur(20px);
  background-color: ${colours.midnight}40;
  /* padding: 20px; */
  border-radius: ${ui.borderRadius}px;
`

export const ChatHeader = styled.div`
  position: absolute;
  bottom: ${props => (props.chatIsOpen ? 'initial' : 0)};
  top: ${props => (props.chatIsOpen ? '4px' : 'initial')};
  /* cursor: ${props => (props.dragging ? 'grabbing' : 'grab')}; */
  border-radius: ${ui.borderRadius}px 0 0 0;


  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: ${props => (props.chatIsOpen ? '100%' : 'fit-content')};

  justify-content: space-between;
  padding: 0px 0px 3px 0px;
  right: 0;
  box-sizing: content-box;
  border: ${props =>
    props.chatIsOpen ? 'none' : `1px solid ${colours.white}`};
  border-bottom: ${props =>
    props.chatIsOpen ? `1px solid ${colours.white}75` : 'none'};
    border-right: none;

  label {
    margin-left: 12px;
    margin-right: ${props => (props.chatIsOpen ? '0' : '12px')}
  }
`

export const CloseBox = styled(CrossSvg)`
  padding: 12px;
  cursor: pointer;
`