a.is-button{
   color: unset;
   text-decoration: unset;
   border:unset;
}

.is-button,
[type=button],
[type=reset],
[type=submit],
button,
a.is-button {
   height: 32px;
   line-height: 32px;
   background: white;
   border: none;
   border-radius: var(--btn-border-radius);
   color: black;
   cursor: pointer;
   display: inline-block;
   padding: 0 1rem;
   text-align: center;
   text-decoration: none;
   -webkit-transform: scale(1);
   transform: scale(1);
   -webkit-transition: opacity .2s ease;
   transition: opacity .2s ease;
   font-weight: 500;
   font-size: 1.15rem;
   white-space: nowrap; /* Prevent text from wrapping */
   overflow: hidden;    /* Hide any overflow if the text is too long */
   text-overflow: ellipsis; /* Adds ellipsis if text overflows */      
}






.is-button:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover,
button:hover {
   opacity: .8;
   -moz-box-shadow: unset;
   -webkit-box-shadow: unset;
   box-shadow: unset;   
}



button.button-is-medium, a.is-button.button-is-medium{
   height: 36px;
   line-height: 36px;
}


button.button-is-large, a.is-button.button-is-large{
   height: 48px;
   line-height: 48px;
}








.btn-alt{
   background: black;
   color: white;
}


button.is-clear,
.is-button.is-clear{
   background: none;
   color: unset;
   padding: unset;
   box-shadow: none;
   -webkit-box-shadow: none;
}

button.is-clear:hover,
.is-button.is-clear:hover{
   opacity: initial;
   box-shadow: none;
   -webkit-box-shadow: none;   
}




button.is-rounded-xtra{
   border-radius: calc(var(--btn-border-radius) * 2);
}


.is-button.button-is-link,
[type=button].button-is-link,
[type=reset].button-is-link,
[type=submit].button-is-link,
button.button-is-link{
   color: var(--color-primary);
   padding-left: 0;
   padding-right: 0;
   background: none;
}


a.is-button[data-look='outline'], button[data-look='outline']{
   border: 1px solid;
}

a.is-button[data-look='outline']:hover, button[data-look='outline']:hover{
   background: #F1F1F1;
}


a.is-button[data-pill='small'], button[data-pill='small']{
   padding: 8px 16px;
   border-radius: 16px;
   line-height: unset; 
}

a.is-button[data-pill='xsmall'], button[data-pill='xsmall']{
   padding: 4px 8px;
   border-radius: 8px;
   line-height: unset; 
}