:root {
    /* Parameter Global agar konsisten */
    --btn-wpsg-bg-s: 0%; 
    --btn-wpsg-bg-l: 50%;
    --btn-wpsg-bg-l-hover: 60%;   /* Lebih gelap untuk hover */
    --btn-wpsg-bg-l-active: 40%;  /* Lebih gelap lagi untuk klik */

    /* Definisi Hue, Saturasi, dan Luminance untuk masing-masing fungsi */

    /* Hue */
    --hue-submit: 205;  /* Biru */
    --hue-process: 150; /* Hijau */
    --hue-cancel: 35;   /* Oranye/Kuning */
    --hue-exit: 15;     /* Merah */

    /* Saturasi */
    --sat-submit: 100%;
    --sat-process: 0%;
    --sat-cancel: 70%;
    --sat-exit: 70%;

    /* Luminance */
    --lum-submit: 0%;
    --lum-process: 0%;
    --lum-cancel: 50%;
    --lum-exit: 50%;

    /* Text Color */
    --btn-wpsg-text-h: 0;
    --btn-wpsg-text-s: 0%;
    --btn-wpsg-text-l: 100%;
    --btn-wpsg-text-a: 1;

}

.btn.btn-submit {
    --hue: var(--hue-submit);
    --sat: var(--sat-submit);
    --btn-wpsg-text-h: 0;
    --btn-wpsg-text-s: 0%;
    /* --btn-wpsg-text-l: 100%; */
    --btn-wpsg-text-a: 1;
}

.btn.btn-process {
    --hue: var(--hue-process);
    --sat: var(--sat-process);
    --btn-wpsg-text-h: 0;
    --btn-wpsg-text-s: 0%;
    /* --btn-wpsg-text-l: 0%; */
    --btn-wpsg-text-a: 1;
}

/* --- BUTTON CANCEL --- */
.btn.btn-cancel {
    --hue: var(--hue-cancel);
    --sat: var(--sat-cancel);
    --btn-wpsg-text-h: 0;
    --btn-wpsg-text-s: 0%;
    /* --btn-wpsg-text-l: 0%; */
    --btn-wpsg-text-a: 1;
}

/* --- BUTTON EXIT --- */
.btn.btn-exit {
    --hue: var(--hue-exit);
    --sat: var(--sat-exit);
    --btn-wpsg-text-h: 0;
    --btn-wpsg-text-s: 0%;
    /* --btn-wpsg-text-l: 0%; */
    --btn-wpsg-text-a: 1;
}

.btn.btn-bahaya {
    --hue: 0;
    --sat: 50%;
    --lum: 95%;
}

.btn.btn-submit, .btn.btn-process, .btn.btn-cancel, .btn.btn-exit, .btn.btn-bahaya {
    --bs-btn-bg: hsl(var(--hue), var(--sat), var(--btn-wpsg-bg-l));
    --bs-btn-border-color: hsl(var(--hue), var(--sat), var(--btn-wpsg-bg-l));
    --bs-btn-hover-bg: hsl(var(--hue), var(--sat), var(--btn-wpsg-bg-l-hover));
    --bs-btn-active-bg: hsl(var(--hue), var(--sat), var(--btn-wpsg-bg-l-active));
    --bs-btn-color: hsl(var(--btn-wpsg-text-h), var(--btn-wpsg-text-s), var(--btn-wpsg-text-l));
}

/*
.btn.btn-outline-process {
    --bs-btn-border-color: hsl(var(--hue), var(--sat), var(--btn-wpsg-bg-l));
    --bs-btn-hover-bg: hsl(var(--hue), var(--sat), var(--btn-wpsg-bg-l));
    --bs-btn-hover-border-color: hsl(var(--hue), var(--sat), var(--btn-wpsg-bg-l));
    --bs-btn-active-bg: hsl(var(--btn-wpsg-text-h), var(--sat), var(--btn-wpsg-bg-l-active));
}
*/

[class^="btn-process"]:disabled, [class^="btn-cancel"]:disabled, [class^="btn-exit"]:disabled {
    filter: grayscale(0.25);
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Gabungkan semua class tombol custom kamu di sini */
.btn.btn-submit, .btn.btn-process, .btn.btn-cancel, .btn.btn-exit {
    background-color: var(--bs-btn-bg) !important;
    border-color: var(--bs-btn-border-color) !important;
    /* color: var(--bs-btn-color) !important; */
    color: hsl(var(--btn-wpsg-text-h), var(--btn-wpsg-text-s), var(--btn-wpsg-text-l));
}

/* Mengatur perilaku saat Hover */

.btn.btn-submit:hover, .btn.btn-process:hover, .btn.btn-cancel:hover, .btn.btn-exit:hover {
    background-color: var(--bs-btn-hover-bg) !important;
    border-color: var(--bs-btn-hover-border-color, var(--bs-btn-hover-bg)) !important;
    /* color: var(--bs-btn-hover-color, #fff) !important; */
    /* color: var(--bs-btn-color) !important; */
    /* color: hsl(var(--btn-wpsg-text-h), var(--btn-wpsg-text-s), var(--btn-wpsg-text-l)); */
}

/* Mengatur perilaku saat Active (Diklik) */
.btn.btn-process:active, .btn.btn-cancel:active, .btn.btn-exit:active {
    background-color: var(--bs-btn-active-bg) !important;
    border-color: var(--bs-btn-active-border-color, var(--bs-btn-active-bg)) !important;
}

/* Khusus untuk Outline agar tidak tabrakan */
.btn.btn-outline-submit, .btn.btn-outline-process, .btn.btn-outline-cancel, .btn.btn-outline-exit {
    background-color: transparent !important;
    border-color: var(--bs-btn-bg) !important;
    /* border-color: hsl(var(--h), var(--sat-process), var(--btn-wpsg-bg-l)) !important; */
    color: hsl(var(--hue), var(--btn-wpsg-text-s), var(--btn-wpsg-text-l)) !important;
}

.btn.btn-outline-submit:hover, .btn.btn-outline-process:hover, .btn.btn-outline-cancel:hover, .btn.btn-outline-exit:hover {
    background-color: var(--bs-btn-hover-bg) !important;
    /* color: var(--bs-btn-color) !important; */
}

.btn:disabled {
    filter: blur(1px) grayscale(0.70) !important;
    cursor: not-allowed;
    pointer-events: none;
}