import styled from "styled-components"

export default styled.input`
	width: 100%;
	border-radius: 100px; /* arbitrarily large value */
	height: 2.5rem;
	text-align: center;
	font-size: 1.2rem;
	outline: none;
	color: ${({ theme }) => theme.theme.color.text.default};
	border: 1px solid
		${(props) => props.theme.theme.component.input.color.border.default};
	background-color: ${(props) =>
		props.theme.theme.component.input.color.background.default};

	::placeholder {
		color: ${(props) => props.theme.theme.component.input.color.placeHolder};
		opacity: 1;
	}

	&:hover {
		border: 1px solid
			${({ theme }) => theme.theme.component.input.color.border.hover};
	}

	&:focus {
		border: 1px solid
			${({ theme }) => theme.theme.component.input.color.border.focus};
	}
`