/* start of button size */
.btn {
    font-size: var(--font-size-base);
    border-radius: 6px;
    padding: 5px 12px;
    margin: 3px;
    font-weight: bold;
}

.btn.btn-md {
    font-size: var(--font-size-base);
    border-radius: 6px;
    padding: 5px 9px;
    margin: 3px;
}

.btn.btn-sm {
    font-size: var(--font-size-sm);
    border-radius: 4px;
    padding: 2px 8px;
    margin: 1px;
}

/* end of button size */

/* start of button state */
/* --bs-btn-xxx 變數, 為bootstrap 5使用 */
.btn.disabled,
.btn:disabled {
    cursor: not-allowed;
    pointer-events: stroke;
    opacity: 0.65;
}

.btn.focus,
.btn:focus,
.btn:focus-visible {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--btn-focus-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.btn.btn-outline {
    color: var(--bs-btn-bg);
    background-color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
}

.btn.btn-outline:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn.btn-outline.focus,
.btn.btn-outline:focus,
.btn-outline:focus-visible {
    color: var(--btn-focus-border-color);
    background-color: var(--bs-btn-color);
    border-color: var(--btn-focus-border-color);
    outline: 0;
    box-shadow: var(--bs-btn-focus-box-shadow);
}

.btn.btn-outline:active {
    color: var(--bs-btn-active-bg);
    background-color: var(--bs-btn-active-color);
    border-color: var(--bs-btn-active-border-color);
}

.btn.btn-outline:disabled {
    color: var(--bs-btn-disabled-bg);
    background-color: var(--bs-btn-disabled-color);
    border-color: var(--bs-btn-disabled-border-color);
}

/* end of button state */

/* start of button color */
.btn-b1 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #019099;
    --bs-btn-border-color: #019099;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #019099;
    --bs-btn-disabled-border-color: #019099;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101c08;
    --bs-btn-hover-border-color: #101c08;

    --bs-btn-active-color: #019099;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #019099;

    --btn-focus-color: #fff;
    --btn-focus-bg: #101c08;
    --btn-focus-border-color: #101c08;
}

.btn-b2 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #ef7009;
    --bs-btn-border-color: #ef7009;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ef7009;
    --bs-btn-disabled-border-color: #ef7009;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101c08;
    --bs-btn-hover-border-color: #101c08;

    --bs-btn-active-color: #ef7009;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #ef7009;

    --btn-focus-color: #fff;
    --btn-focus-bg: #101c08;
    --btn-focus-border-color: #101c08;
}

.btn-b3 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #0572a4;
    --bs-btn-border-color: #0572a4;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0572a4;
    --bs-btn-disabled-border-color: #0572a4;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101c08;
    --bs-btn-hover-border-color: #101c08;

    --bs-btn-active-color: #0572a4;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #0572a4;

    --btn-focus-color: #fff;
    --btn-focus-bg: #101c08;
    --btn-focus-border-color: #101c08;
}

.btn-b4 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b450ac;
    --bs-btn-border-color: #b450ac;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b450ac;
    --bs-btn-disabled-border-color: #b450ac;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101c08;
    --bs-btn-hover-border-color: #101c08;

    --bs-btn-active-color: #b450ac;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #b450ac;

    --btn-focus-color: #fff;
    --btn-focus-bg: #101c08;
    --btn-focus-border-color: #101c08;
}

/* dt-b51 is used in datatable's pagination */
.btn-b5 {
    --bs-btn-color: #000;
    --bs-btn-bg: #f5f5f5;
    --bs-btn-border-color: transparent;

    --bs-btn-disabled-color: #999;
    --bs-btn-disabled-bg: #f5f5f5;
    --bs-btn-disabled-border-color: #dee2e6;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: transparent;

    --bs-btn-active-color: #999;
    --bs-btn-active-bg: #f5f5f5;
    --bs-btn-active-border-color: transparent;

    --btn-focus-color: #fff;
    --btn-focus-bg: #000;
    --btn-focus-border-color: transparent;
}

/* b6 is used in delete */
.btn-b6 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #e01b0c;
    --bs-btn-border-color: #e01b0c;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #e01b0c;
    --bs-btn-disabled-border-color: #e01b0c;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101c08;
    --bs-btn-hover-border-color: #101c08;

    --bs-btn-active-color: #e01b0c;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #e01b0c;

    --btn-focus-color: #fff;
    --btn-focus-bg: #be1003;
    --btn-focus-border-color: #101c08;
}

/* b7 is used in dashboard ID group */
.btn-b7 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #995505;
    --bs-btn-border-color: #995505;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #995505;
    --bs-btn-disabled-border-color: #995505;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101c08;
    --bs-btn-hover-border-color: #101c08;

    --bs-btn-active-color: #995505;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #995505;

    --btn-focus-color: #fff;
    --btn-focus-bg: #101c08;
    --btn-focus-border-color: #101c08;
}

/* b8 is used in dashboard ID group */
.btn-b8 {
    --bs-btn-color: #fff;
    --bs-btn-bg: #829905;
    --bs-btn-border-color: #829905;

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #829905;
    --bs-btn-disabled-border-color: #829905;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #101c08;
    --bs-btn-hover-border-color: #101c08;

    --bs-btn-active-color: #829905;
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #829905;

    --btn-focus-color: #fff;
    --btn-focus-bg: #101c08;
    --btn-focus-border-color: #101c08;
}

/* end of button color */