import { styled } from 'styleh-components'
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(18.2);
  }
`
const FooterSocialIcons = styled.div `
  margin-left: rem(24.5);

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

const FooterLogoWrapper = styled.div `
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 0 0 30%;
  height: auto;
`
const FooterLogo = styled.div `
  transform: scale(0.8, 0.8);
  transform-origin: top left;
  background: $colors-white;
  border-radius: rem(5);
  path {
    fill: $colors-blackrabbit;

    /* hide border */
    &:first-child {
      display: none;
    }
  }
  width: fit-content;
  margin-bottom: auto;
  order: 1;
`

const FooterMobilePoweredBy = styled.div `
  display: none;

  @media (max-width: 767px) {
    display: inline;
    flex-direction: column;
    margin: 0;
    margin-bottom: rem(14.6);
  }
`

const FooterPoweredByLabel = styled.div `
  order: 2;
`

const FooterPoweredByValue = styled.div `
  order: 3;
`

const FooterBottomWrapper = styled.div `
  margin-top: rem(21);
  display: flex;
  align-items: center;

  @media (max-width: 767px) {
    flex-direction: column;
    margin: 0;
  }
`
const FooterTopWrapper = styled.div `
  display: flex;
  padding-bottom: rem(22);
  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 {
  FooterLogoWrapper,
  FooterLogo,
  FooterMobilePoweredBy,
  FooterPoweredByLabel,
  FooterPoweredByValue,
  FooterSocialIcons,
  FooterCopyright,
  ListOfLinks,
  FooterSocialIconWrapper,
  Divider,
  StyledSquarePlaceholder,
  ListWrapper,
  FooterBottomWrapper,
  FooterTopWrapper,
  FooterContainer,
  FooterWrapper,
}