import { styled } from 'view-container/styles'

export const StyledList = styled.ul``
export const StyledItem = styled.li``

export const StyledInput = styled.input`
  font-size: 1.5rem;
  line-height: 1.2;
  width: 90%;
  padding: 5;
  background-color: #fafafa;
`
export const StyledInputSection = styled.section``
export const StyledInputLabel = styled.p``

export const StyledTab = styled.li`
  flex: 1;
  text-align: center;
  padding: auto;
  background-color: #eee;
  color: black;
  border-radius: 3;
  font-size: 1.2rem;
  padding-top: 40;

  ${props =>
    props.isActive &&
    styled.css`
      background-color: tomato;
      color: #fff;
    `};
`

export const StyledTabList = styled.ul`
  padding: 0;
  list-style: none;
  display: flex;
  height: 100px;
`