import { styled } from 'styleh-components'
import {
  ParagraphPlaceholder,
  RectanglePlaceholder,
  TextPlaceholder,
} from '@skava/ui/dist/components/atoms/Placeholder'

const TitlePlaceholder = styled(TextPlaceholder) `
  width: rem(150);
  margin-right: rem(60);

  @phone-or-smaller() {
    margin: 0;
    width: 35%;
  }
`

const ButtonPlaceholder = styled(RectanglePlaceholder) `
  width: rem(250);

  @phone-or-smaller() {
    width: 45%;
  }
`

const HeaderTitleWrapper = styled.div `
  display: flex;
  margin-bottom: rem(16);

  @phone-or-smaller() {
    margin-bottom: rem(24);
    justify-content: space-between;
  }
`

const AddressPlaceholder = styled(ParagraphPlaceholder) `
  width: rem(350);

  @phone-or-smaller() {
    width: 100%;
  }
`

const Wrapper = styled.div `
  display: flex;
  flex-direction: column;
`

export {
  TitlePlaceholder,
  ButtonPlaceholder,
  HeaderTitleWrapper,
  AddressPlaceholder,
  Wrapper,
}