import styled from 'styled-components';

const ToggleFieldWrapper = styled.div`${({themeColor})=>`
	display: flex;
	.item {
		font-size: 12px;
		height: 39px;
		box-sizing: border-box;
		align-items: center;
		display: flex;
		justify-content:center;
		border: 1px solid #e0e0e0;
		border-right: none;
		background-color: white;
		cursor: pointer;
		color: rgba(0, 0, 0, 0.7);
		&:last-child {
			border-right: 1px solid #e0e0e0;
			border-top-right-radius: 4px;
		    border-bottom-right-radius: 4px;
		}
		&:first-child {
			border-top-left-radius: 4px;
		    border-bottom-left-radius: 4px;
		}
		&.selected {
			border-color: ${themeColor};
			color: ${themeColor};
			border-right: 1px solid ${themeColor};
		}		
	}
`}`

export { ToggleFieldWrapper };