import { styled } from 'styleh-components'
import { TextPlaceholder, RectanglePlaceholder } from 'atoms/Placeholder'

const ToggleButton = styled.withComponent(RectanglePlaceholder)`
  width: rem(98);
  height: rem(24);
`
const StyledToggleButton = styled.div`
  position: absolute;
  right: 0;

  .arrow-wrapper {
    height: rem(10);
  }
`
const StyledUserInformation = styled.withComponent(TextPlaceholder)`
  width: rem(150);
  height: rem(20);
  margin-bottom: rem(8);

  @tablet-or-smaller() {
    width: 80%;
  }

  @phone-or-smaller() {
    width: rem(175);
  }
`
const StyledOrderInformation = styled.withComponent(TextPlaceholder)`
  width: rem(200);
  height: rem(20);
  margin-bottom: rem(8);

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

  @phone-or-smaller() {
    width: rem(250);
  }
`
const StyledHeading = styled.withComponent(TextPlaceholder)`
  width: rem(300);
  height: rem(30);
  margin-bottom: rem(8);

  @tablet-or-smaller() {
    width: rem(150);
    height: rem(50);
    rect {
      height: rem(50);
    }
  }
  @tablet-or-smaller() {
    width: rem(150);
    height: rem(30);
    rect {
      height: rem(30);
    }
  }
`
const OrderInformation = styled.div`
  display: flex;
  flex: 0 0 calc(60% - rem(20));
  flex-direction: column;

  @phone-or-smaller() {
    flex: unset;
    padding: rem(16) 0;
  }
`
const UserInformation = styled.div`
  display: flex;
  flex: 0 0 40%;
  flex-direction: column;

  @phone-or-smaller() {
    flex: unset;
  }
`

const Wrapper = styled.div`
  display: flex;
  position: relative;
  width: 100%;
  background: #fff;
  padding: rem(16) rem(16) rem(24) rem(16);
  @phone-or-smaller() {
    flex-direction: column;
    padding: rem(8) $spacing-small;
  }
`

export {
  ToggleButton,
  StyledToggleButton,
  StyledOrderInformation,
  StyledUserInformation,
  StyledHeading,
  OrderInformation,
  UserInformation,
  Wrapper,
}