import { styled } from 'styleh-components'

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: var(--color-pure-white);
    `};
`

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