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

const Label = styled(TextPlaceholder) `
  margin-bottom: rem(8);
`
const BoxItem = styled(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 }