/* =====================================
   BUTTONS COMPONENT STYLES
   ===================================== */

@layer components {
    /* ============= Primary Button Base ============= */
    .ui-button,.swal2-confirm,.swal2-cancel,.qq-upload-button, .qq-btn, .white-btn, .green-btn, .btn-login, .do-remove-field{
        max-height: 34px;
        font-weight: 500;
        cursor: pointer;
        border: 1px solid var(--primary) !important;
        background-color: var(--primary) !important;
        color: var(--color-white) !important;
        font-family: var(--font-family-sans) !important;
        font-size: var(--font-size-base) !important;
        padding: 8px 12px;
        white-space: nowrap;
        min-width: 37px;
        box-shadow: none !important;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .ui-button .ui-icon, .do-remove-field .ui-icon {
        position: relative;
        margin: 0;
        padding: 0;
        top: 0;
        left: 0;
        height: 16px;
        width: 16px;
        min-height: 16px;
        min-width: 16px;
    }

    /* .ui-button .fa{ 
        font-size: var(--font-size-lg) !important;
    } */

    .ui-button .fa::before{
        font-size: var(--font-size-lg) !important;
    }

    .xs-btn{
        min-height: 20px;
        min-width: 20px;
        padding: 0;
    }

    /* Primary Button Corner Radius */
    .ui-button.ui-corner-all,.swal2-confirm,.swal2-cancel,.qq-upload-button, .qq-btn, .white-btn, .green-btn,.btn-login, button[data-role="toggle-search"]{
        border-radius: var(--btn-radius) !important;
    }

    /* Primary Button Text */
    .ui-button .ui-button-text, .qq-upload-button > div{
        padding: 0 !important;
        font-size: var(--font-size-base);
        text-shadow: none !important;
        line-height: 1 !important;
        color: inherit !important;
        display: block;
        font-family: inherit;
    }

    /* Primary Button Text Only */
    .ui-button-text-only .ui-button-text {
        white-space: nowrap;

        display: inline-flex;
        align-items: center;
        margin: 0 !important;
    }

    /* Primary Button Hover State */
    .ui-button.ui-state-hover, .ui-button:hover,.swal2-confirm:hover,.qq-upload-button:hover, .btn-login:hover {
        border: 1px solid var(--primary-hover) !important;
        background-color: var(--primary-hover) !important;
        color: var(--color-white) !important;
    }

    /* Primary Button Active State */
    .ui-button:active, .ui-button.ui-state-active, .btn-login:active {
        border: 1px solid var(--primary-mid) !important;
        background-color: var(--primary-mid) !important;
        color: var(--color-white) !important;
        transform: translateY(1px);
    }

    /* Primary Button Focus State */
    .ui-button:focus, .ui-button.ui-state-focus, .btn-login:focus {
        border: 1px solid var(--primary-mid) !important;
        background-color: var(--primary-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= White Button Base ============= */
    .ui-button.btn-white, .ui-button.white-btn, .white-btn, 
    .custom-table-btn, button[data-action="deselect"],
    button[data-action="select"],
    button[data-role="plus"],
    button[data-role="minus"],
    button[data-role="toggle-search"],
    button[data-role="quick-view"],
    button[data-role="payment-overview"],
    button[data-role="price_history"],
    button[data-role="email_history"],
    button[data-role="linked-policies"],
    button[data-role="email_preview"],
    button[data-role="trigger-reset"],
    button[data-role="product-featured"],
    button[data-role="view_eav_dataset_info"],
    .do-remove-field {
        border: 1px solid var(--border) !important;
        background-color: var(--surface-primary) !important;
        color: var(--foreground-primary) !important;
    }

    /* White Button Hover State */
    .ui-button.btn-white.ui-state-hover, .ui-button.btn-white:hover, 
    .ui-button.white-btn.ui-state-hover, .ui-button.white-btn:hover, .white-btn:hover, 
    .custom-table-btn:hover, button[data-action="deselect"]:hover,
    button[data-action="select"]:hover,
    .do-remove-field:hover, .do-remove-field.ui-state-hover,
    button[data-role="plus"]:hover,
    button[data-role="minus"]:hover,
    button[data-role="toggle-search"]:hover,
    button[data-role="quick-view"]:hover,
    button[data-role="payment-overview"]:hover,
    button[data-role="price_history"]:hover,
    button[data-role="email_history"]:hover,
    button[data-role="linked-policies"]:hover,
    button[data-role="email_preview"]:hover,
    button[data-role="trigger-reset"]:hover,
    button[data-role="product-featured"]:hover,
    button[data-role="view_eav_dataset_info"]:hover {
        border: 1px solid var(--border) !important;
        background-color: var(--primary-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* White Button Active State */
    .ui-button.btn-white:active, .ui-button.btn-white.ui-state-active, 
    .ui-button.white-btn:active, .ui-button.white-btn.ui-state-active, .custom-table-btn:active, 
    .custom-table-btn.ui-state-active, button[data-action="deselect"]:active,
    button[data-action="select"]:active,
    .do-remove-field:active, .do-remove-field.ui-state-active,
    button[data-role="plus"]:active,
    button[data-role="minus"]:active,
    button[data-role="toggle-search"]:active,
    button[data-role="quick-view"]:active,
    button[data-role="payment-overview"]:active,
    button[data-role="price_history"]:active,
    button[data-role="email_history"]:active,
    button[data-role="linked-policies"]:active,
    button[data-role="email_preview"]:active,
    button[data-role="trigger-reset"]:active,
    button[data-role="product-featured"]:active,
    button[data-role="view_eav_dataset_info"]:active {
        border: 1px solid var(--border) !important;
        background-color: var(--surface-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* White Button Focus State */
    .ui-button.btn-white:focus, .ui-button.btn-white.ui-state-focus, 
    .ui-button.white-btn:focus, .ui-button.white-btn.ui-state-focus, .custom-table-btn:focus, 
    button.custom-table-btn.ui-state-focus, button[data-action="deselect"]:focus,
    button[data-action="select"]:focus,
    .do-remove-field:focus, .do-remove-field.ui-state-focus,
    button[data-role="plus"]:focus,
    button[data-role="minus"]:focus,
    button[data-role="toggle-search"]:focus,
    button[data-role="quick-view"]:focus,
    button[data-role="payment-overview"]:focus,
    button[data-role="price_history"]:focus,
    button[data-role="email_history"]:focus,
    button[data-role="linked-policies"]:focus,
    button[data-role="email_preview"]:focus,
    button[data-role="trigger-reset"]:focus,
    button[data-role="product-featured"]:focus,
    button[data-role="view_eav_dataset_info"]:focus {
        border: 1px solid var(--border) !important;
        background-color: var(--surface-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* ============= Green Button Base ============= */
    .green-btn, 
    .qq-btn.green-btn{
        border: 1px solid var(--success) !important;
        background-color: var(--success) !important;
        color: var(--color-white) !important;
    }

    /* Green Button Hover State */
    .green-btn.ui-state-hover, .green-btn:hover, .qq-btn.green-btn:hover {
        border: 1px solid var(--success-hover) !important;
        background-color: var(--success-hover) !important;
        color: var(--color-white) !important;
    }

    /* Green Button Active State */
    .green-btn:active, .green-btn.ui-state-active{
        border: 1px solid var(--success-mid) !important;
        background-color: var(--success-mid) !important;
        color: var(--color-white) !important;
    }

    /* Green Button Focus State */
    .green-btn:focus, 
    .green-btn.ui-state-focus {
        border: 1px solid var(--success-mid) !important;
        background-color: var(--success-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Red Button Base ============= */
    .ui-button.red-btn, .qq-btn.red-btn, button[data-action="delete"] {
        border: 1px solid var(--destructive) !important;
        background-color: var(--destructive) !important;
        color: var(--color-white) !important;
    }

    /* Red Button Hover State */
    .ui-button.red-btn.ui-state-hover, .ui-button.red-btn:hover, .qq-btn.red-btn:hover, button[data-action="delete"]:hover {
        border: 1px solid var(--destructive-hover) !important;
        background-color: var(--destructive-hover) !important;
        color: var(--color-white) !important;
    }

    /* Red Button Active State */
    .ui-button.red-btn:active,
    .ui-button.red-btn.ui-state-active, button[data-action="delete"]:active {
        border: 1px solid var(--destructive-mid) !important;
        background-color: var(--destructive-mid) !important;
        color: var(--color-white) !important;
    }

    /* Red Button Focus State */
    .ui-button.red-btn:focus, button.ui-button.red-btn.ui-state-focus, button[data-action="delete"]:focus {
        border: 1px solid var(--destructive-mid) !important;
        background-color: var(--destructive-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Gray Button Base ============= */
    .ui-button.gray-btn,.swal2-cancel{
        border: 1px solid var(--surface-third) !important;
        background-color: var(--surface-third) !important;
        color: var(--foreground-primary) !important;
    }

    /* Gray Button Hover State */
    .ui-button.gray-btn.ui-state-hover, .ui-button.gray-btn:hover,.swal2-cancel:hover {
        border: 1px solid var(--surface-second) !important;
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    /* Gray Button Active State */
    .ui-button.gray-btn:active, .ui-button.gray-btn.ui-state-active {
        border: 1px solid var(--surface-second) !important;
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    /* Gray Button Focus State */
    .ui-button.gray-btn:focus, button.ui-button.gray-btn.ui-state-focus {
        border: 1px solid var(--surface-second) !important;
        background-color: var(--surface-second) !important;
        color: var(--foreground-primary) !important;
    }

    /* ============= Ghost Info Button Base ============= */
    .ui-button.info-button, button[data-role="price_information"]{
        border: 1px solid var(--border) !important;
        background-color: var(--surface-primary) !important;
        color: var(--info) !important;
    }

    /* Ghost Info Button Hover State */
    .ui-button.info-button.ui-state-hover, .ui-button.info-button:hover, button[data-role="price_information"]:hover {
        border: 1px solid var(--info) !important;
        background-color: var(--surface-third) !important;
        color: var(--color-info) !important;
    }

    /* Ghost Info Button Active State */
    .ui-button.info-button:active, .ui-button.info-button.ui-state-active, button[data-role="price_information"]:active, button[data-role="price_information"].ui-state-active {
        border: 1px solid var(--info-mid) !important;
        background-color: var(--surface-second) !important;
        color: var(--color-info) !important;
    }

    /* Ghost Info Button Focus State */
    .ui-button.info-button:focus, button.ui-button.info-button.ui-state-focus, button[data-role="price_information"]:focus, button[data-role="price_information"].ui-state-focus {
        border: 1px solid var(--info-mid) !important;
        background-color: var(--surface-second) !important;
        color: var(--color-info) !important;
    }



    /* ============= Misc Styles ============= */
    .qq-upload-button{
        padding: 0px !important;
    }
    .qq-upload-button > div{
        line-height: 34px !important;
        height: 34px !important;
    }

    .custom-table-btn{
        background-image: url('/client/images/cog-alt.svg') !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        background-size: 16px !important;
    }

    body [data-role="expand"] button .ui-button-text{
        color: var(--primary) !important;
    }

    .ui-buttonset{
        overflow: hidden !important;
        border-radius: var(--btn-radius) !important;
    }

    .do-remove-field{
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
    }

    .drag-icon{
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        border-radius: var(--input-radius);
        color: var(--foreground-primary);
    }

    /* ============= Custom Secondary Button Base ============= */
    button[data-role="reset-layout"],
    button[data-role="link-to"],
    button[data-role="trigger-search"],
    button[data-role="create-payment"],
    button[data-role="begin-checkout"],
    button[data-role="create_firm"],
    button[data-role="cases_reset"],
    button[data-role*="new"],
    button[data-role="create"],
    button[data-role="create-contract"],
    button[data-role="create_group"],
    .secondary-btn{
        border: 1px solid var(--secondary) !important;
        background-color: var(--secondary) !important;
        color: var(--color-white) !important;
    }

    button[data-role="reset-layout"]:hover,
    button[data-role="link-to"]:hover,
    button[data-role="trigger-search"]:hover,
    button[data-role="create-payment"]:hover,
    button[data-role="begin-checkout"]:hover,
    button[data-role="create_firm"]:hover,
    button[data-role="cases_reset"]:hover,
    button[data-role*="new"]:hover, button[data-role*="new"].ui-state-hover,
    button[data-role="create"].ui-state-hover, button[data-role="create"]:hover,
    button[data-role="create-contract"].ui-state-hover, button[data-role="create-contract"]:hover,
    button[data-role="create_group"]:hover, button[data-role="create_group"].ui-state-hover,
    .secondary-btn.ui-state-hover, .secondary-btn:hover{
        border: 1px solid var(--secondary-hover) !important;
        background-color: var(--secondary-hover) !important;
        color: var(--color-white) !important;
    }

    button[data-role="reset-layout"]:active,
    button[data-role="link-to"]:active,
    button[data-role="trigger-search"]:active,
    button[data-role="create-payment"]:active,
    button[data-role="begin-checkout"]:active,
    button[data-role="create_firm"]:active,
    button[data-role="cases_reset"]:active,
    button[data-role*="new"]:active,
    button[data-role="create"]:active,
    button[data-role="create-contract"]:active,
    button[data-role="create_group"]:active,
    .secondary-btn:active, .secondary-btn.ui-state-active{
        border: 1px solid var(--secondary-mid) !important;
        background-color: var(--secondary-mid) !important;
        color: var(--color-white) !important;
    }

    button[data-role="reset-layout"]:focus,
    button[data-role="link-to"]:focus,
    button[data-role="trigger-search"]:focus,
    button[data-role="create-payment"]:focus,
    button[data-role="begin-checkout"]:focus,
    button[data-role="create_firm"]:focus,
    button[data-role="cases_reset"]:focus,
    button[data-role*="new"]:focus,
    button[data-role="create"]:focus,
    button[data-role="create-contract"]:focus,
    button[data-role="create_group"]:focus,
    .secondary-btn:focus, .secondary-btn.ui-state-focus{
        border: 1px solid var(--secondary-mid) !important;
        background-color: var(--secondary-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Info Button Base ============= */
    button[data-role="time-btn"]:not(.btn-white),
    button[data-role="edit_policy"],
    button[data-role*="edit"],
    button[data-role="status_id-crud"]{
        border: 1px solid var(--info) !important;
        background-color: var(--info) !important;
        color: var(--color-white) !important;
    }

    button[data-role="time-btn"]:not(.btn-white):hover,
    button[data-role="edit_policy"]:hover,
    button[data-role="time-btn"].ui-state-hover,
    button[data-role="edit_policy"].ui-state-hover,
    button[data-role*="edit"]:hover,
    button[data-role*="edit"].ui-state-hover,
    button[data-role="status_id-crud"]:hover,
    button[data-role="status_id-crud"].ui-state-hover{
        border: 1px solid var(--info-hover) !important;
        background-color: var(--info-hover) !important;
        color: var(--color-white) !important;
    }

    button[data-role="time-btn"]:not(.btn-white):active,
    button[data-role="edit_policy"]:active,
    button[data-role="time-btn"].ui-state-active,
    button[data-role="edit_policy"].ui-state-active,
    button[data-role*="edit"]:active,
    button[data-role*="edit"].ui-state-active,
    button[data-role="status_id-crud"]:active,
    button[data-role="status_id-crud"].ui-state-active{
        border: 1px solid var(--info-mid) !important;
        background-color: var(--info-mid) !important;
        color: var(--color-white) !important;
    }

    button[data-role="time-btn"]:not(.btn-white):focus,
    button[data-role="edit_policy"]:focus,
    button[data-role="time-btn"].ui-state-focus,
    button[data-role="edit_policy"].ui-state-focus,
    button[data-role*="edit"]:focus,
    button[data-role*="edit"].ui-state-focus,
    button[data-role="status_id-crud"]:focus,
    button[data-role="status_id-crud"].ui-state-focus{
        border: 1px solid var(--info-mid) !important;
        background-color: var(--info-mid) !important;
        color: var(--color-white) !important;
    }

    /* ============= Misc ============= */
    .ui-button-text-icon-primary{
        gap: 4px;
    }

    .ui-button-icon-only{
        width: 32px !important;
        height: 32px !important;
        gap: 0px;
    }

    


    .btngroup[data-role="resize-group"] > button{
        padding: 0 !important;
        border: none !important;
    }

    .btngroup[data-role="resize-group"] > .ui-button:hover{
        background-color: var(--surface-third) !important;
    }

    .btngroup[data-role="resize-group"] > .ui-button:active{
        background-color: var(--surface-second) !important;
    }

    .btngroup[data-role="resize-group"] > .ui-button:focus{
        background-color: var(--surface-second) !important;
    }
}