import styled from 'styled-components';

import { BaseContainer, Text, Tag } from '@veeqo/ui';
import CommonGlyph from 'components/common/Glyph';

const Row = styled(BaseContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 210px;
`;

const Handle = styled(CommonGlyph)``;

const Dots = styled(CommonGlyph)`
  padding: 6px 4px;
  cursor: pointer;
`;

const StyledTag = styled(Tag)`
  user-select: none;
  margin-right: 8px;

  & > ${Text} {
    position: relative;
    bottom: 1px;
  }
`;

const Title = styled(Text)`
  flex-grow: 2;
`;

export {
  Row,
  Handle,
  Dots,
  Title,
  StyledTag,
};