import styled from 'styled-components/macro'

import { devices } from 'config'

export const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  margin-top: 1.89rem;
  padding-left: 1.651rem;
  padding-right: 0.95rem;

  @media ${devices.mobile} {
    padding: 0 12px;
    margin-top: 0;
  }
`

export const InputsWrapper = styled.div`
  margin-top: 0.85rem;

  @media ${devices.mobile} {
    padding: 0 2px;
  }
`

export const Input = styled.input`
  width: 1.8rem;
  height: 1.14rem;
  background-color: #FFFFFF;
  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.25);
  border: 0.2px solid #D0D0D0;
  border-radius: 4px;
  text-align: center;
  margin: 0 0.71rem;

  @media ${devices.mobile} {
    color: #FFFFFF;
    background-color: #3F3F3F;
    border: none;
  }
`

export const Label = styled.label`
  font-weight: normal;
  font-size: 0.755rem;
  line-height: 1.14rem;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.5);

  @media ${devices.mobile} {
    line-height: 0.95rem;
    letter-spacing: 0.1px;
    color: #FFFFFF;
  }
`
