.btn{
    font-size: 1.6rem;
    padding: 0.6rem 1.2rem;
    background-color: var(--white);
    color: var(--black);
    border: 0.16rem solid var(--maincolor);
    transition: var(--transitions);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
.btn:hover, .btn:focus, .btn:active{
    background-color: var(--maincolor);
    color: var(--white);
    box-shadow: none;
}
.btn>.icon{
    filter: brightness(0.5) grayscale(100%) invert(0);
}
.btn:hover>.icon, .btn:active>.icon, .btn:focus>.icon{
    filter: brightness(0) grayscale(0%) invert(1);
}
.btn.active{
    background-color: var(--maincolor);
    color: var(--white);
}
.btn.active>.icon{
    filter: brightness(0) grayscale(0%) invert(1);
}
.btn--white{
    border: 0.16rem solid #e7e7e7;
}
.btn--white:hover, .btn--white:active, .btn--white:focus{
    background-color: #e7e7e7;
    color: var(--black);
}
.btn--red{
    border: 0.16rem solid var(--red);
}
.btn--red:hover{
    background-color: var(--red);
}
.btn--icon{
    max-width: 4rem;
    max-height: 4rem;
    padding: 0.6rem;
}
.btn--icon--rounded{
    border-radius: 50%;
}
.btn--icon-red{
    border: 0.16rem solid var(--red);
}
.btn--icon-red:hover{
    background-color: var(--red);
}
.btn--icon-text-right>.icon{
    margin-right: 0.6rem;
}
.btn--icon-text-left>.icon{
    margin-left: 0.6rem;
}