/* base button  */
.cbt{
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 14px;
    border: none;
    border-radius: 6px;
    user-select: none;
    flex-wrap: nowrap;
    text-wrap: nowrap;
    font-family: var(--font);
    letter-spacing: 0.015em;
}
.cbt > i{ font-size: 16px;}
.cbt > svg{ width: 16px; height: 16px;}
.cbt > span {height: fit-content;}

/* primary button */
.cbt-primary{ 
    background-color: var(--dark); 
    color: var(--white); 
    font-weight: 500;
    font-size: 0.875rem;
}
.cbt-primary:is(:disabled),
.cbt-primary:is(:disabled):hover{
    background-color: #4f4f4f;
    cursor: not-allowed;
}

.cbt-primary:hover{ background-color: #18181be6; }

/* secondary button */
.cbt-secondary{ 
    background-color: var(--white); 
    color: var(--dark); 
    font-weight: 500; 
    font-size: 0.875rem;
}
.cbt-secondary:hover{ background-color: #f5f5f6; }

/* secondary subtle button */
.cbt-default{
    background-color: var(--white);
    border: 1px solid #E4E4E7;
    border-radius: 6px;
    padding: 7px 16px;
    font-weight: 500;
    box-shadow: var(--input-shadow);
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), fill 0.15s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.cbt-default.chover:hover{ background-color: #f5f5f6;}

/* for navigation menu link button*/
.link-button{
   display: flex;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
   text-wrap: nowrap;
   gap: 8px;

   border-radius: 6px;
   user-select: none;
   cursor: pointer;
   padding: 8px 16px;

   font-size: .875rem;
   line-height: 1.25rem;
   font-weight: 500;
   font-family: var(--font);
   color: var(--dark);
}
.link-button:hover{
   color: var(--dark);
   text-decoration: underline !important;
   background-color: #f4f4f572;
}
.link-button.active{
   background-color: #f4f4f5;
   text-decoration: none !important;
}

/* gridjs table badge */
.my-badge{
    display: flex;
    flex-direction: row;
    align-items: center;
    width: fit-content;
    border-radius: 6px;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #292931;
    cursor: pointer;
    user-select: none;
    padding: 4px;
}
.my-badge:hover{
    background-color: #e9ecef;
}
.my-badge i{
    margin-right: 8px;
    font-size: 16px;
    color: #71717a;
}