.filters__items{
display:flex;
border-radius:50px;
margin: 10px;
& input{
height:auto;
width:auto;
}
}
.filter__container{
display:flex;
flex-direction: column;
align-items:center;
width:80%;
& form{
display:flex;
width:100%;
flex-direction: column;
align-items: center;
}
}
input[type="radio"]{
opacity: 0;
position: fixed;
width: 0;
}
.filter__label{
color:var(--orange);
font-family:'PoppinsMedium';
font-size:0.9rem;
}
input[type="radio"] + label{
border-radius: 50px;
padding: 15px 30px;
border: 1px solid var(--orange);
transition: all .25s ease;
text-align:center;
}
input[type="radio"]:checked + label {
background-color: white;
border:1px solid white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 5px;
}
input[type="radio"]:hover + label {
background-color: white;
border:1px solid white;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 5px;
transition: all .25s ease;
cursor:pointer;
}
.filter__wrapper{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.filter__title{
font-size: 0.9rem;
font-family: 'PoppinsLight';
text-align:center;
}
.reset-button{
margin-top: 30px;
& #reset__button{
padding: 15px 30px;
color: var(--orange);
background-color: none;
text-decoration: none;
border: 1px solid var(--orange);
font-size:0.9rem;
&:hover{
border: 1px solid var(--blanc);
font-family:'PoppinsMedium';
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 5px;
}
&:focus, &:active{
border: 1px solid var(--orange);
font-family:'PoppinsMedium';
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 5px;
color:white;
background-color:var(--orange);
}
}
}
@media screen and (max-width:1024px){
.filters__items{
margin:7px;
}
}
@media screen and (max-width:768px){
.filters__items{
margin:5px;
}
input[type="radio"] + label{
padding: 10px 15px;
}
.filter__label{
font-size:0.8rem;
}
.reset-button {
& #reset__button {
padding: 10px 15px;
font-size: 0.8rem;
}
}
.reset-button {
margin-top: 20px;
}
}
@media screen and (max-width:480px){
.filters__items{
margin:5px;
}
input[type="radio"] + label{
padding: 10px;
}
.reset-button {
& #reset__button {
padding: 10px;
}
}
}