import { styled } from 'view-container'
import {
  SquarePlaceholder,
  ListPlaceholder,
  TextPlaceholder,
} from 'atoms/Placeholder'

const Divider = styled.div `
  position: relative;
  margin: 0 rem(6);
  width: rem(2);
`

const StyledSquarePlaceholder = styled.withComponent(SquarePlaceholder) `
  margin-right: rem(5);

  &:last-child {
    margin-right: 0;
  }
`
const FooterCopyright = styled.div `
  display: flex;
  flex: 1;

  @media (max-width: 767px) {
    order: 2;
    width: 100%;
    justify-content: center;
  }
`
const ListOfLinks = styled.div `
  display: flex;
  flex-direction: row;
  flex: 1;
`

const ListWrapper = styled.div `
  margin-right: rem(10);

  .header-text {
    margin-bottom: rem(10);
  }
`
const FooterSocialIconWrapper = styled.div `
  display: flex;
  align-items: center;

  @media (max-width: 767px) {
    flex-direction: column;
    margin-bottom: rem(24);
  }
`
const FooterSocialIcons = styled.div `
  margin-left: rem(21);

  @media (max-width: 767px) {
    margin: 0;
    margin-top: rem(8);
    display: flex;
  }
`

const FooterLogo = styled.div `
  flex: 0 0 30%;
  height: 100%;
`
const FooterBottomWrapper = styled.div `
  margin-top: rem(16);
  display: flex;
  align-items: center;

  @media (max-width: 767px) {
    flex-direction: column;
    margin: 0;
  }
`
const FooterTopWrapper = styled.div `
  display: flex;
  padding-bottom: rem(32);
  border-bottom: rem(1) solid #ffffff;

  @media (max-width: 767px) {
    display: none;
  }
`
const FooterContainer = styled.div `
  max-width: rem(1200);
  margin: auto;
`
const FooterWrapper = styled.div `
  padding: rem(44) rem(8) rem(32) rem(8);

  @media (max-width: 1023px) {
    padding: rem(18) rem(8) rem(32) rem(8);
  }
  @media (max-width: 767px) {
    padding: rem(24) rem(8);
  }
`
export {
  FooterLogo,
  FooterSocialIcons,
  FooterCopyright,
  ListOfLinks,
  FooterSocialIconWrapper,
  Divider,
  StyledSquarePlaceholder,
  ListWrapper,
  FooterBottomWrapper,
  FooterTopWrapper,
  FooterContainer,
  FooterWrapper,
}