.custombutton {
border: var( - variant-pills-border-width) solid rgba(var( - color-foreground),var( - variant-pills-border-opacity));
background-color: rgb(var( - color-foreground));
border-radius: var( - variant-pills-radius);
color: rgb(var( - color-background));
display: inline-block;
text-decoration: none;
margin: .7rem .5rem .2rem 0;
padding: 1rem 2rem;
font-size: 1.4rem;
letter-spacing: .1rem;
line-height: 1;
text-align: center;
transition: border var( - duration-short) ease;
cursor: pointer;
position: relative;
}
.custombutton.active {
background-color: rgb(var( - color-foreground));
color: rgb(var( - color-background));
}
.custombutton.inactive {
background-color: rgb(var( - color-background));
color: rgb(var( - color-foreground));
}