const TypeButton = styled.button<TypeButtonProps>`
background-color: ${props => (props.active ? accentColor : whiteColor)};
border-color: ${props => (props.active ? accentColor : accentColor)};
color: ${props => (props.active ? whiteColor : '#333333')};
padding: 10px 32px;
line-height: 1;
font-size: 14px;
font-weight: 600;
display: inline-flex;
justify-content: center;
align-items: center;
position: relative;
text-align: center;
border-radius: 5px 0 0 5px;
overflow: hidden;
min-width: 150px;
border-width: 1px;
border-style: solid;
// margin-right: 24px;
cursor: pointer;
&:focus {
outline: none;
}
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0%;
height: 100%;
transition: all 0.5s ease-in-out;
background-color: ${accentColor};
z-index: 0;
}
span {
position: relative;
z-index: 1;
transform: none;
transition: all 0.3s ease-in-out;
}
&:hover {
border-color: ${accentColor};
color: ${whiteColor};
span {
transform: translateX(5px);
}
&::before {
width: 100%;
}
}
@media (min-width: 1920px) {
font-size: 16px;
padding: 12px 32px;
}
@media (max-width: 768px) {
min-width: 130px;
margin-right: 16px;
font-size: 14px;
}
@media (max-width: 346px) {
min-width: 120px;
}
`;