import styled, { css } from 'styled-components'


export const DestinationList = styled.ul`
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  opacity: 0.8;
`

export const DestinationItem = styled.li<{ pill?: boolean }>`
  box-sizing: border-box;
  height: 14px;
  width: ${({ pill }) => (pill ? 'auto' : '14px')};
  border-radius: 1em;
  margin-right: 3px;
  /* background: linear-gradient(to right, #ffffff, #e7e7e7); */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: ${({ pill }) => (pill ? '0 4px' : '0')};
  white-space: nowrap;
  overflow: hidden;
  /* box-shadow: -2px 0px 2px -1px #b2b2b2; */

  ${({ pill }) =>
    pill &&
    css`
      background: #dcdcdc;
      border: 1px solid #b7b7b7;
    `}
`

export const DestinationImage = styled.div<{ uri: string }>`
  background-image: ${({ uri }) => `url('${uri}')`};
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
`