/** Primary button **/
.c-btn{
    display: inline-flex;
    align-items: center;
    height: 48px;
    padding: 8px 16px;

    cursor: pointer;

    background-color: var(--btn-color);
    border: 1px solid transparent;
    border-radius: var(--bord-rad);

    font-size: 16px;
    line-height: 16px;
    color: var(--white);
    text-align: center;

    transition: var(--trans);
}

.c-btn.c-btn--fw{
    width: 100%;
}

.c-btn.c-btn--blue{
    background-color: var(--blue);
}

.c-btn.c-btn--danger{
    background-color: var(--red);
}

.c-btn.c-btn--dark{
    background-color: var(--grey-darkest);
}

.c-btn.c-btn--onlyborder{
    background-color: transparent;
    border: 1px solid var(--btn-color);
    color: var(--grey-darkest);
}


.c-btn.c-btn--light{
    background-color: var(--grey);
    color: var(--black);
}

.c-btn__container{
    display: flex;
    justify-content: center;
    align-items: center;
}

.c-btn__container.c-btn__container--inline{
    display: inline-flex;
    justify-content: flex-start;
}

.c-btn__icon{
    display: flex;
    align-content: center;
    transition: var(--trans);
    margin-left: 8px;
}

.c-btn__icon > svg{
    width: 18px;
    height: 18px;
}

.c-btn:hover, .c-btn:focus{
    background-color: var(--btn-hover-color);
    border-color: var(--btn-hover-color);
    color: var(--white);
    text-decoration: none;
 }

.c-btn--dark:hover, .c-btn--dark:focus{
    background-color: var(--coal);
    border-color: var(--coal);
}

.c-btn--danger:hover, .c-btn--danger:focus{
    background-color: var(--red-dark);
    border-color: var(--red-dark);
}

.c-btn--blue:hover, .c-btn--blue:focus{
    background-color: var(--blue-dark);
    border-color: var(--blue-dark);
}


.c-btn--light:hover, .c-btn--light:focus{
    background-color: var(--white);
    border-color: var(--white);
}


 /** Primary button - dark mode **/
 .dark-mode .c-btn{
    background-color: var(--btn-color--dm);;
}

.dark-mode .c-btn:hover, .dark-mode .c-btn:focus{
    background-color: var(--btn-hover-color--dm);
    border-color: var(--btn-hover-color--dm);
}

.c-btn .c-btn__label{
    text-align: center;
    width: 100%;
}

/** Panel buttons **/
.c-btn.c-btn--panel{
    background-color: var(--white);;
    border-color: var(--border-color);
    height: 40px;
}

.c-btn.c-btn--panel .c-btn__label{
    text-align: center;
    font-size: 16px;
    color: var(--widget-font-color);
    font-weight: bold;
    display: inline-block;
    padding: 0px;
}

.c-btn.c-btn--panel .c-btn__icon{
    color: var(--black);
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    transition: var(--trans);
}

.c-btn.c-btn--panel .c-btn__icon > svg{
    width: 16px;
    height: 16px;
}

.c-btn.c-btn--panel:hover{
    background-color: var(--btn-hover-color);
    border-color: var(--btn-hover-color);
}

.c-btn.c-btn--panel:hover .c-btn__label{
    color: var(--white);
}

.c-btn.c-btn--panel:hover .c-btn__icon{
    color: var(--white);
}

/** Panel buttons - dark mode **/
.dark-mode .c-btn.c-btn--panel{
    background-color: transparent;
    border-color: var(--border-color--dm);
}

.dark-mode .c-btn.c-btn--panel .c-btn__label{
    color: var(--grey-dark);
}

.dark-mode .c-btn.c-btn--panel .c-btn__icon{
    color: var(--grey-dark);
}

.dark-mode .c-btn.c-btn.c-btn--panel:hover{
    background-color: var(--btn-hover-color--dm);
    border-color: var(--btn-hover-color--dm);
}

.dark-mode .c-btn.c-btn.c-btn--panel:hover .c-btn__label, .dark-mode .c-btn.c-btn.c-btn--panel:hover .c-btn__icon{
    color: var(--white);
}

/** Filter buttons **/
.c-btn__container--filter{
    margin-left: 16px;
}

/** Small buttons **/
.c-btn.c-btn--small{
    height: 32px;
    padding: 4px 16px;
}

/** Tiny buttons **/
.c-btn.c-btn--tiny{
    height: 32px;
    padding: 4px;
}

.c-btn.c-btn--green{
    background-color: var(--green);
    border-color: var(--green);
}

.c-btn.c-btn--green:hover{
    background-color: var(--green-dark);
    border-color: var(--green-dark);
}

.c-btn.c-btn--red{
    background-color: var(--red);
    border-color: var(--red);
}

.c-btn.c-btn--red:hover{
    background-color: var(--red-dark);
    border-color: var(--red-dark);
}

.c-btn.c-btn--grey{
    background-color: var(--grey-dark);
    border-color: var(--grey-dark);
}

.c-btn.c-btn--grey:hover{
    background-color: var(--grey-darker);
    border-color: var(--grey-darker);
}

/** CRUD buttons */
.c-btn__container.c-btn__container--crud .c-btn{
    color: var(--coal);
    background-color: transparent;
    border-color: transparent;
}

.dark-mode .c-btn__container.c-btn__container--crud .c-btn{
    color: var(--white);
}

.c-btn__container.c-btn__container--crud .c-btn:hover, .c-btn__container.c-btn__container--crud .c-btn:focus{
    color: var(--accent-color);
}

.dark-mode .c-btn__container.c-btn__container--crud .c-btn:hover, .dark-mode .c-btn__container.c-btn__container--crud .c-btn:focus{
    color: var(--accent-color--dm);
}