import styled from 'styled-components';

export const EmojiToggleWrapper = styled.div`
  position: absolute;
  right: 1px;
  left: 1px;
  bottom: 1px;
  height: 40px;
  background-color: #fff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 12px;
`;

export const EmojiToggle = styled.button`
  position: absolute;
  right: 11px;
  bottom: 11px;
  border: none;
  background: none;
  width: 24px;
  height: 24px;
  display: flex;
  justify-content: center;
  padding: 0;
  background: #ffffff;
  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
  border-radius: 5px;

  svg {
    align-self: center;
  }
`;

export const Dialog = styled.div<{ isBottom?: boolean }>`
  position: absolute;
  right: 42px;
  z-index: 999;

  ${({ isBottom }) => (isBottom ? `top: calc(100% - 38px);` : `bottom: 2px;`)}
`;