import { styled } from 'styleh-components'
import { Link } from 'atoms/Link'

const IconsListWrapper = styled.ul`
  position: relative;
  list-style: none;
  margin: 0;
  padding: $spacing-small 0 0 0;
  display: flex;
  align-items: inherit;
  flex-direction: row;
`

const IconListPanel = styled.li.attrs({
  className: 'social-icons',
})`
  position: relative;
  display: inline-flex;
`

const IconLink = styled(Link) `
  position: relative;
  width: rem(48);
  height: rem(48);
  padding: 6px;
  margin-right: $spacing;
  cursor: pointer;

  ${props =>
    props.bgColor !== '' &&
    styled.css`
      background: ${props.bgColor};
    `};

  svg {
    position: relative;
    width: 100%;
    height: 100%;
    fill: ${props => (props.fillColor !== '' ? props.fillColor : 'black')};
  }
`
export { IconsListWrapper, IconListPanel, IconLink }