/* =========================================================
   TACTICAL FLOOR GAME
   UNIVERSAL BUTTON SYSTEM V1
   ========================================================= */

:root {
    --tfg-btn-motion-fast: 110ms;
    --tfg-btn-motion-normal: 160ms;
    --tfg-btn-focus:
        rgba(91, 194, 255, .78);
}


/* =========================================================
   FEEDBACK UNIVERSAL
   Tidak mengubah warna dasar tombol modul.
   ========================================================= */

.tfg-button-feedback {
    -webkit-tap-highlight-color:
        transparent;

    user-select:
        none;

    transition:
        transform
            var(--tfg-btn-motion-fast)
            ease,

        filter
            var(--tfg-btn-motion-normal)
            ease,

        box-shadow
            var(--tfg-btn-motion-normal)
            ease,

        border-color
            var(--tfg-btn-motion-normal)
            ease,

        opacity
            var(--tfg-btn-motion-normal)
            ease;
}


/* Hover */

.tfg-button-feedback:hover:not(
    :disabled
):not(
    [aria-disabled="true"]
) {
    transform:
        translateY(-1px);

    filter:
        brightness(1.07);

    box-shadow:
        0 5px 13px
        rgba(0, 0, 0, .20);
}


/* Sedang ditekan */

.tfg-button-feedback:active:not(
    :disabled
):not(
    [aria-disabled="true"]
),
.tfg-button-feedback.is-tfg-pressed {
    transform:
        translateY(1px)
        scale(.975);

    filter:
        brightness(.90);

    box-shadow:
        inset 0 2px 6px
        rgba(0, 0, 0, .25);
}


/* Feedback sesaat setelah klik */

.tfg-button-feedback.is-tfg-clicked {
    animation:
        tfg-button-click-feedback
        .24s ease-out;
}


@keyframes tfg-button-click-feedback {

    0% {
        filter:
            brightness(.94);
    }

    45% {
        filter:
            brightness(1.16);

        box-shadow:
            0 0 0 3px
            rgba(76, 180, 238, .18);
    }

    100% {
        filter:
            brightness(1);
    }
}


/* Keyboard */

.tfg-button-feedback:focus-visible {
    outline:
        2px solid
        var(--tfg-btn-focus);

    outline-offset:
        2px;
}


/* Disabled */

.tfg-button-feedback:disabled,
.tfg-button-feedback[
    aria-disabled="true"
] {
    cursor:
        not-allowed !important;

    opacity:
        .55;

    filter:
        grayscale(.20);

    transform:
        none !important;

    box-shadow:
        none !important;
}


/* Loading */

.tfg-button-feedback.is-tfg-loading {
    cursor:
        wait !important;

    opacity:
        .78;

    pointer-events:
        none;
}


/* Success */

.tfg-button-feedback.is-tfg-success {
    filter:
        brightness(1.13);

    box-shadow:
        0 0 0 3px
        rgba(61, 199, 137, .16);
}


/* =========================================================
   KELAS VISUAL UNIVERSAL
   Untuk tombol baru ke depan.
   ========================================================= */

.tfg-btn {
    min-height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        0 13px;

    border:
        1px solid transparent;

    border-radius:
        7px;

    cursor:
        pointer;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1;

    text-decoration:
        none;
}


.tfg-btn-primary {
    background:
        #167bc1;

    border-color:
        #2d94d6;

    color:
        #ffffff;
}


.tfg-btn-secondary {
    background:
        #102b40;

    border-color:
        #31506a;

    color:
        #dceaf4;
}


.tfg-btn-danger {
    background:
        #512126;

    border-color:
        #8b3c44;

    color:
        #ffdfe2;
}


.tfg-btn-ghost {
    background:
        rgba(255, 255, 255, .04);

    border-color:
        rgba(129, 174, 207, .24);

    color:
        #dceaf4;
}


.tfg-btn-icon {
    width:
        34px;

    min-width:
        34px;

    height:
        34px;

    padding:
        0;
}


.tfg-btn-sm {
    min-height:
        28px;

    padding:
        0 9px;

    border-radius:
        6px;

    font-size:
        9px;
}


.tfg-btn svg {
    width:
        14px;

    height:
        14px;

    flex:
        0 0 auto;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
    prefers-reduced-motion:
    reduce
) {

    .tfg-button-feedback {
        transition:
            none;
    }

    .tfg-button-feedback.is-tfg-clicked {
        animation:
            none;
    }
}

/* TFG UNIVERSAL BUTTON SYSTEM V1 END */