import { styled } from 'view-container'
import Link from 'atoms/Link'

const BreadCrumbWrapper = styled.div`
  position: relative;
  background: #7eecb5;
  overflow: auto;
`

const BreadCrumbContainer = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-family: arial;
  font-size: 14px;
  text-transform: capitalize;
  color: #2c2c2c;

  a:last-child {
    font-weight: 600;
    pointer-events: none;
  }
`

const textOverflow = styled.css`
  max-width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
`

const LinkItem = styled.withComponent(Link)`
  text-transform: capitalize;
  text-decoration: none;
  color: #1e1e1e;
  ${textOverflow}
`

const Separator = styled.span`
  position: relative;
  padding: 0 8px;
  svg {
    fill: rgba(0, 0, 0, 0.3);
  }
`

export { BreadCrumbWrapper, BreadCrumbContainer, LinkItem, Separator }