.btn {
    --_btn-disabled-text-color: var(--button-disabled-text-color);

    font-family: var(--main-font-family-button);
    font-size: var(--main-font-size-input);
}

.btn:hover { cursor: var(--cursor-pointer); }
.btn:disabled {
    color: var(--_btn-disabled-text-color);
    cursor: var(--cursor-not-allowed);
}

/*  -----------------------------------------
    Sectie:  Button Types
-----------------------------------------  */

/* Removes default values */
.btn_nodefault {
    background: none;
    background-color: transparent;
    border: none;
    outline: none;
}

/* Used for images on buttons|links */
.btn_bg {
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    color: var(--main-text-color);
    margin: 5px auto;
    outline: none;
    padding: 14px 32px;
}
.btn_bg:hover { cursor: var(--cursor-pointer); }
.btn_bg:disabled:hover { cursor: var(--cursor-not-allowed); }

/* font */
.btn_font {
    font-family: var(--main-font-family-button);
    font-size: var(--main-font-size);
}

.btn_fully { width: 100%; }

/* a Square sized button */
.btn_square {
    --square-size: 28px;

    height: var(--square-size);
    padding: 0;
    width: var(--square-size);
}
.square_small { --square-size: 20px; }
.square_medium { --square-size: 32px; }
.square_large { --square-size: 40px; }

/* display inline */
.btn_inline {
    display: inline;
    color: var(--main-link-color);
}


/*  -----------------------------------------
    Sectie:  Button Images
-----------------------------------------  */

.button_B_long { background-image: url('/Images/demonic/red_buttons/Button_B_Long_active.webp'); }
.button_B_long:hover { background-image: url('/Images/demonic/red_buttons/Button_B_Long_activeLL.webp'); }
.button_B_long:disabled { background-image: url('/Images/demonic/red_buttons/Button_B_Long_Ready.webp'); }

.button_tiny_cancel { background-image: url('/Images/demonic/red_buttons/Button_tiny_cancel_bl.webp'); }
.button_tiny_cancel:hover { background-image: url('/Images/demonic/red_buttons/Button_tiny_cancel.webp'); }
.button_tiny_cancel:disabled { background-image: url('/Images/demonic/red_buttons/button_tiny_empty.webp'); }