/*
.win-frame .win-content , 
#myTable.rwx-table {
*/
    /* Following are style rules for responsive panel of action buttons */
    /* that according to screen size toggle icon and/or text of buttons */

    /* <td> or <div> that contains buttons */
    .rwx-action-panel {

        /* responsive grid layout for buttons gap around buttons */
        .rwx-btn-grid {
            display: flex;
            flex-wrap: wrap;
            width: fit-content;
            min-width: min-content;
            max-width: max-content;
            gap: 0.35rem;
            margin: 0.35rem;
        }

        /* <a> buttons with icon and text, responsively turn on/off icon or text */
        /* for desktop displays both icon and text */
        /* for tablet displays only text */
        
        /* for mobile displays only icon */
        a.rwx-btn-text-icon,
        button.rwx-btn-text-icon {
            background-color: #fafafa;
            /* border: 1px solid  #d3d3d3; */
            /* Mix with 20% black to darken */
            border-color: color-mix(in srgb, #fafafa 90%, black);
            border-radius: 1rem;
            overflow: hidden;
            position: relative; /* This constrains the ::after pseudo-element to the button */
            z-index: 0; /* issue: DELETE button produces hover effect even if cursor enters another row / column  */

            &:disabled {
                cursor: not-allowed;
            }

            &#addNewBtn i {
                margin-right: -0.75rem; /* for consistanct gap with text on right-size  */
            }

            i {
                width: 1.5rem;
                background-color: #333;
                color: #fff;
                padding:0.25rem 0.25rem 0.3rem 0.25rem;
                border-radius: inherit;
                margin-right: -0.5rem; /* to be removed when only icon is visible */ 
            }

            i.rm-diff { margin-right: -0.8rem; }

            &.rwx-fa-eye {
                color: var(--rwx-color-view);
                border: 1px solid #20a2a750;
                border-color: color-mix(in srgb, #fafafa 90%, black);

                i {
                    color: var(--rwx-color-view);
                    background-color: #fafafa;

                    &:not(disabled):hover {   /**1**/
                        background-color: var(--rwx-color-view);
                    }
                }

                i.negative {
                    background-color: var(--rwx-color-view);

                    &:not(disabled):hover {   /**1**/
                        color: var(--rwx-color-view);
                        background-color: #fafafa;
                    }
                }
            }

            &.rwx-fa-add {
                color: var(--rwx-color-edit);
                border: 1px solid #2a91ff50;
                border-color: color-mix(in srgb, #fafafa 90%, black);

                &:disabled {
                    color: #d3d3d3;
                    border-color: #d3d3d3;
                }
                
                i {
                    width: 1.5rem;
                    color: var(--rwx-color-edit);
                    background-color: #fafafa;

                    &:not(:disabled):hover {   /**1**/
                        background-color: var(--rwx-color-edit);
                    }
                }
                
                i.negative {
                    width: 1.5rem;
                    background-color: var(--rwx-color-edit);

                    &:not(:disabled):hover {   /**1**/
                        color: var(--rwx-color-edit);
                        background-color: #fafafa;
                    }
                }
            }

            &.rwx-fa-edit {
                color: var(--rwx-color-edit);
                border: 1px solid #2a91ff50;
                border-color: color-mix(in srgb, #fafafa 90%, black);

                &:disabled {
                    color: #d3d3d3;
                    border-color: #d3d3d3;
                }
                
                i {
                    color: var(--rwx-color-edit);
                    background-color: #fafafa;

                    &:not(:disabled):hover {   /**1**/
                        background-color: var(--rwx-color-edit);
                    }
                }
                
                i.negative {
                    color: #fff;
                    background-color: var(--rwx-color-edit);

                    &:not(:disabled):hover {   /**1**/
                        color: var(--rwx-color-edit);
                        background-color: #fafafa;
                    }
                }
            }

            &.rwx-fa-delete {
                color: var(--rwx-color-delete);
                border: 1px solid #ffae0050;
                border-color: color-mix(in srgb, #fafafa 90%, black);

                i {
                    color: var(--rwx-color-delete);
                    background-color: #fafafa;
                    padding-left: 0.3rem;
                    /* padding-right: 0.7rem; */

                    &:hover {   /**1**/
                        background-color: var(--rwx-color-delete);
                    }
                }

                i.negative {
                    padding-left: 0.3rem;
                    /* padding-right: 0.7rem; */
                    background-color: var(--rwx-color-delete);

                    &:hover {   /**1**/
                        color: var(--rwx-color-delete);
                        background-color: #fafafa;
                    }
                }
            }

            &.rwx-fa-info {
                color: var(--rwx-color-info);
                border: 1px solid #17a2b850; /* Using the new info color with transparency */
                border-color: color-mix(in srgb, #fafafa 90%, black);

                i {
                    color: var(--rwx-color-info);
                    background-color: #fafafa;
                    padding-left: 0.3rem;

                    &:hover {   /**1**/
                        background-color: var(--rwx-color-info);
                    }
                }

                i.negative {
                    padding-left: 0.3rem;
                    background-color: var(--rwx-color-info);

                    &:hover {   /**1**/
                        color: var(--rwx-color-info);
                        background-color: #fafafa;
                    }
                }

                .rwx-btn-text-only {
                    padding-left: 0.8rem;
                }
            }

            &.rwx-fa-pdf {
                color: var(--rwx-color-error);
                border: 1px solid #17a2b850; /* Using the new info color with transparency */
                border-color: color-mix(in srgb, #fafafa 90%, black);

                i {
                    color: var(--rwx-color-error);
                    background-color: #fafafa;
                    padding-left: 0.3rem;

                    &:hover {   /**1**/
                        background-color: var(--rwx-color-error);
                    }
                }

                i.negative {
                    padding-left: 0.3rem;
                    background-color: var(--rwx-color-error);

                    &:hover {   /**1**/
                        color: var(--rwx-color-error);
                        background-color: #fafafa;
                    }
                }

                .rwx-btn-text-only {
                    padding-left: 0.8rem;
                }
            }

            &.rwx-fa-save {
                color: var(--rwx-color-save);
                border: 1px solid #2a91ff50;

                i {
                    color: var(--rwx-color-save);
                    background-color: #fafafa;

                    &:hover {   /**1**/
                        background-color: var(--rwx-color-save);
                    }
                }

                i.negative {
                    background-color: var(--rwx-color-save);

                    &:hover {   /**1**/
                        color: var(--rwx-color-save);
                        background-color: #fafafa;
                    }
                }
            }

            &.rwx-fa-cancel {
                color: var(--rwx-color-cancel);
                border: 1px solid #ff7d7d50;

                i {
                    color: var(--rwx-color-cancel);
                    background-color: #fafafa;
                    padding-left: 0.45rem;
                    padding-right: 0.45rem;

                    &:hover {   /**1**/
                        background-color: var(--rwx-color-cancel);
                    }
                }

                i.negative {
                    padding-left: 0.45rem;
                    padding-right: 0.45rem;
                    background-color: var(--rwx-color-cancel);

                    &:hover {   /**1**/
                        color: var(--rwx-color-cancel);
                        background-color: #fafafa;
                    }
                }
            }

        }

        button.rwx-btn-text-icon {
            padding:0rem 0rem 0rem 0rem;
        }

        .rwx-btn-text-only {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .rwx-btn-text-only, 
        .rwx-btn-icon-only {
            display: inline-block;
        }
    }

    /* Following are style rules that introduce hovering effect on buttons */
    .rwx-action-panel.hover-effect {

        .rwx-btn-text-icon.rwx-fa-eye:hover {
            color: #fff;
            background-color: var(--rwx-color-view);
            transition: background-color 0.7s ease;

            i, /* synchronously provide hovering effect when text & icon both are visible */
            i.rwx-btn-icon-only:hover {
                color: #fff;
                background-color: var(--rwx-color-view);
                transition: background-color 0.7s ease;
            }

            i.rwx-btn-icon-only.negative:hover {
                background-color: #fff;
                color: var(--rwx-color-view);
                transition: background-color 0.7s ease;
            }
        }

        .rwx-btn-text-icon.rwx-fa-add:not(:disabled):hover, 
        .rwx-btn-text-icon.rwx-fa-edit:not(:disabled):hover {
            color: #fff;
            background-color: var(--rwx-color-edit);
            transition: background-color 0.7s ease;

            i, /* synchronously provide hovering effect when text & icon both are visible */
            i.rwx-btn-icon-only:hover {
                color: #fff;
                background-color: var(--rwx-color-edit);
                transition: background-color 0.7s ease;
            }

            i.rwx-btn-icon-only.negative:hover {
                background-color: #fff;
                color: var(--rwx-color-edit);
                transition: background-color 0.7s ease;
            }
        }

        .rwx-btn-text-icon.rwx-fa-delete:hover {
            color: #fff;
            background-color: var(--rwx-color-delete);
            transition: background-color 0.7s ease;

            i, /* synchronously provide hovering effect when text & icon both are visible */
            i.rwx-btn-icon-only:hover {
                color: #fff;
                background-color: var(--rwx-color-delete);
                transition: background-color 0.7s ease;
            }

            i.rwx-btn-icon-only.negative:hover {
                background-color: #fff;
                color: var(--rwx-color-delete);
                transition: background-color 0.7s ease;
            }        
        }

        .rwx-btn-text-icon.rwx-fa-info:hover {
            color: #fff;
            background-color: var(--rwx-color-info);
            transition: background-color 0.7s ease;

            i, /* synchronously provide hovering effect when text & icon both are visible */
            i.rwx-btn-icon-only:hover {
                color: #fff;
                background-color: var(--rwx-color-info);
                transition: background-color 0.7s ease;
            }

            i.rwx-btn-icon-only.negative:hover {
                background-color: #fff;
                color: var(--rwx-color-info);
                transition: background-color 0.7s ease;
            }        
        }

        .rwx-btn-text-icon.rwx-fa-pdf:hover {
            color: #fff;
            background-color: var(--rwx-color-delete);
            transition: background-color 0.7s ease;

            i, /* synchronously provide hovering effect when text & icon both are visible */
            i.rwx-btn-icon-only:hover {
                color: #fff;
                background-color: var(--rwx-color-delete);
                transition: background-color 0.7s ease;
            }

            i.rwx-btn-icon-only.negative:hover {
                background-color: #fff;
                color: var(--rwx-color-delete);
                transition: background-color 0.7s ease;
            }        
        }

        .rwx-btn-text-icon.rwx-fa-save:hover {
            color: #fff;
            background-color: var(--rwx-color-save);
            transition: background-color 0.7s ease;

            i, /* synchronously provide hovering effect when text & icon both are visible */
            i.rwx-btn-icon-only:hover {
                color: #fff;
                background-color: var(--rwx-color-save);
                transition: background-color 0.7s ease;
            }

            i.rwx-btn-icon-only.negative:hover {
                background-color: #fff;
                color: var(--rwx-color-save);
                transition: background-color 0.7s ease;
            }        
        }

        .rwx-btn-text-icon.rwx-fa-cancel:hover {
            color: #fff;
            background-color: var(--rwx-color-cancel);
            transition: background-color 0.7s ease;

            i, /* synchronously provide hovering effect when text & icon both are visible */
            i.rwx-btn-icon-only:hover {
                color: #fff;
                background-color: var(--rwx-color-cancel);
                transition: background-color 0.7s ease;
            }

            i.rwx-btn-icon-only.negative:hover {
                background-color: #fff;
                color: var(--rwx-color-cancel);
                transition: background-color 0.7s ease;
            }        
        }
    }

    /* Following are style rules that introduce sliding-hover effect on buttons */
    .rwx-action-panel.slide-effect {

        a.rwx-btn-text-icon,
        button.rwx-btn-text-icon {
            position: relative; /* This constrains the ::after pseudo-element to the button */
            z-index: 1;
            transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

            &:hover {
                color: #fff;
            }

            &::after {
                content: "";
                position: absolute;
                width: 0;
                height: 100%;
                bottom: 0;
                left: 0;
                z-index: -1;
                transition: width 0.3s ease-in-out;
            }

            &.rwx-fa-eye::after {
                background-color: var(--rwx-color-view);
            }

            &.rwx-fa-add::after {
                background-color: var(--rwx-color-addnew);
            }

            &.rwx-fa-edit::after {
                background-color: var(--rwx-color-edit);
            }

            &.rwx-fa-delete::after {
                background-color: var(--rwx-color-delete);
            }

            &.rwx-fa-info::after {
                background-color: var(--rwx-color-info);
            }

            &.rwx-fa-save::after {
                background-color: var(--rwx-color-save);
            }

            &.rwx-fa-cancel::after {
                background-color: var(--rwx-color-cancel);
            }

            &:not(:disabled):hover::after {
                width: 100%;
            }
        }
    } 
/*
}
*/