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

const Label = styled.withComponent(TextPlaceholder)`
  margin-bottom: rem(8);
  `
const BoxItem = styled.withComponent(RectanglePlaceholder)``

const SelectBoxTeam = styled.div`
  flex: 0 0 calc(30% - rem(16));
  margin: 0 0 rem(16) 0;

  @tablet-or-smaller() {
    flex: 0 0 calc(50% - rem(8));
  }
`

const SelectBoxRole = styled.div`
  flex: 0 0 calc(30% - rem(8));
  margin: 0 0 rem(16) rem(24);

  @tablet-or-smaller() {
    flex: 0 0 calc(50% - rem(8));
    margin: 0 0 rem(16) rem(16);
  }
`
const SearchBox = styled.div`
  flex: 0 0 calc(40% - rem(24));
  align-self: flex-end;
  margin: 0 rem(24) rem(16) 0;

  @tablet-or-smaller() {
    flex: 0 0 100%;
    margin: 0 0 rem(16) 0;
  }
`
const Wrapper = styled.section`
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
`

export {
  Label,
  SearchBox,
  SelectBoxTeam,
  SelectBoxRole,
  BoxItem,
  Wrapper,
}