/* ======================================================
   ObfuscatorJS Framework v2.3
   Button System
   Teal + Green Theme
   Production Version
====================================================== */


/* ======================================================
   BASE BUTTON
====================================================== */

.btn {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: var(--btn-height);

    padding: 12px 24px;

    border: 1px solid transparent;

    border-radius: var(--radius-md);

    background: var(--primary-color);

    color: var(--white);

    font-family: var(--font-family);

    font-size: var(--font-size-md);

    font-weight: var(--font-semibold);

    line-height: 1.2;

    text-align: center;

    text-decoration: none;

    white-space: nowrap;

    user-select: none;

    cursor: pointer;

    vertical-align: middle;

    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .15s ease,
        opacity .25s ease;

}


/* ======================================================
   BUTTON HOVER
====================================================== */

.btn:hover {

    transform: translateY(-1px);

    box-shadow: var(--shadow-sm);

}


/* ======================================================
   BUTTON ACTIVE
====================================================== */

.btn:active {

    transform: translateY(0);

}


/* ======================================================
   BUTTON FOCUS
====================================================== */

.btn:focus-visible {

    outline: none;

    box-shadow: var(--focus-ring);

}


/* ======================================================
   PRIMARY BUTTON
====================================================== */

.btn-primary {

    background: var(--primary-color);

    color: var(--white);

    border-color: var(--primary-color);

}


.btn-primary:hover {

    background: var(--primary-hover);

    border-color: var(--primary-hover);

    color: var(--white);

}


/* ======================================================
   SECONDARY BUTTON
====================================================== */

.btn-secondary {

    background: var(--secondary-color);

    color: var(--text-color);

    border-color: var(--border-color);

}


.btn-secondary:hover {

    background: var(--border-color);

    color: var(--text-color);

}


/* ======================================================
   OUTLINE BUTTON
====================================================== */

.btn-outline {

    background: transparent;

    border-color: var(--primary-color);

    color: var(--primary-color);

}


.btn-outline:hover {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

}


/* ======================================================
   SUCCESS BUTTON
====================================================== */

.btn-success {

    background: var(--success-color);

    border-color: var(--success-color);

    color: var(--white);

}


.btn-success:hover {

    background: #15803d;

    border-color: #15803d;

    color: var(--white);

}


/* ======================================================
   DANGER BUTTON
====================================================== */

.btn-danger {

    background: var(--danger-color);

    border-color: var(--danger-color);

    color: var(--white);

}


.btn-danger:hover {

    background: #b91c1c;

    border-color: #b91c1c;

    color: var(--white);

}


/* ======================================================
   WARNING BUTTON
====================================================== */

.btn-warning {

    background: var(--warning-color);

    border-color: var(--warning-color);

    color: #ffffff;

}


.btn-warning:hover {

    background: #d97706;

    border-color: #d97706;

    color: #ffffff;

}


/* ======================================================
   SMALL BUTTON
====================================================== */

.btn-sm {

    min-height: 38px;

    padding: 8px 16px;

    font-size: var(--font-size-sm);

}


/* ======================================================
   LARGE BUTTON
====================================================== */

.btn-lg {

    min-height: 54px;

    padding: 16px 32px;

    font-size: var(--font-size-lg);

}


/* ======================================================
   FULL WIDTH BUTTON
====================================================== */

.btn-block {

    display: flex;

    width: 100%;

}


/* ======================================================
   DISABLED BUTTON
====================================================== */

.btn:disabled,
.btn[disabled],
.btn.disabled {

    opacity: .6;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;

    box-shadow: none;

}


/* ======================================================
   ICON BUTTON
====================================================== */

.btn-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

}


/* ======================================================
   BUTTON ICONS
====================================================== */

.btn-icon .material-icons,
.btn-icon .material-symbols-outlined {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 1em;
    height: 1em;

    font-size: 20px;

    line-height: 1;

}


/* ======================================================
   BUTTON WITH ICON - SMALL
====================================================== */

.btn-sm .material-icons,
.btn-sm .material-symbols-outlined {

    font-size: 18px;

}


/* ======================================================
   BUTTON WITH ICON - LARGE
====================================================== */

.btn-lg .material-icons,
.btn-lg .material-symbols-outlined {

    font-size: 22px;

}


/* ======================================================
   DARK MODE
====================================================== */

html.dark .btn-secondary {

    background: var(--surface-color-2);

    border-color: var(--border-color);

    color: var(--text-color);

}


html.dark .btn-secondary:hover {

    background: var(--border-dark-color);

    border-color: var(--border-dark-color);

    color: var(--text-color);

}


/* ======================================================
   DARK MODE - OUTLINE
   Teal Theme
====================================================== */

html.dark .btn-outline {

    background: transparent;

    border-color: var(--primary-color);

    color: var(--primary-color);

}


html.dark .btn-outline:hover {

    background: var(--primary-color);

    border-color: var(--primary-color);

    color: var(--white);

}


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

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

    .btn {

        transition: none !important;

    }

}


/* ======================================================
   PRINT
====================================================== */

@media print {

    .btn {

        box-shadow: none !important;

        transform: none !important;

    }

}


/* ======================================================
   END OF BUTTON.CSS
====================================================== */