@import "colors";
@import "./colors";
.mat-tab-group{
    &.qms-tab-group{
        .qms-tab-label{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $tab-dark-background;
            font-family: Open Sans, Arial, Sans-Serif;
        }

        .qms-tab-label:hover{
            font-weight: 600;
        }

        .mat-tab-label-active{
            .qms-tab-label{
                color: $active;
                font-weight: 600;
            }
        }

        .mat-tab-disabled{
            .qms-tab-label{
                color: black(0.24);
            }
        }

        .mat-ripple.mat-tab-label.mat-tab-disabled:hover{
            background: white;
        }

        .mat-tab-label{
            opacity: 1;
            height: auto;
            min-height: 48px;
            &:hover, 
            &:focus-visible,
            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
            &.cdk-program-focused:not(.mat-tab-disabled),
            .mat-ripple-element{
                background: $tab-disable-background;
            }
        }

        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
            .mat-tab-header-pagination-chevron{
                border-color: black(0.38);
            }
            
        }

        .mat-tab-header-pagination{
            .mat-tab-header-pagination-chevron{
                border-color: $tab-border;
            }
        }
    }

    &.qms-tab-group-advanced{
        .qms-tab-label{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $popup-title-color;
            font-family: Open Sans, Arial, Sans-Serif;
            font-weight: 400;
            .mat-icon{
                color: black(0.6);
            }
        }

        .mat-tab-label-active{
            .qms-tab-label{
                color: $active;
                font-weight: 600;
                .mat-icon{
                    color: $active;
                }
            }
        }

        .mat-tab-disabled{
            .qms-tab-label{
                color: black(0.38);
                .mat-icon{
                    color: black(0.38);
                }
            }
        }

        .mat-ripple.mat-tab-label.mat-tab-disabled:hover{
            background: white;
        }

        .mat-tab-label{
            opacity: 1;
            height: auto;
            min-height: 48px;
        }

        .mat-ripple.mat-tab-label{
            &:hover{
                background: $tab-hover-background;
                .qms-tab-label{
                    font-weight: 600;
                }
            }

            &:focus-visible{
                background-color: $tab-hover-background;
            }

            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
            &.cdk-program-focused:not(.mat-tab-disabled){
                background: $tab-hover-background;
            }

            .mat-ripple-element{
                background-color: $tab-hover-background
            }
            
            &.mat-tab-label-active{
                &:hover{
                    background: $tab-hover-background;
                    .qms-tab-label{
                        font-weight: 600;
                    }
                }
                
                &:focus-visible, .mat-ripple-element,
                &.cdk-keyboard-focused:not(.mat-tab-disabled), 
                &.cdk-program-focused:not(.mat-tab-disabled){
                    background: $tab-disable-background;
                }
            }
        }
        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
            .mat-tab-header-pagination-chevron{
                border-color: black(0.38);
            }
            
        }

        .mat-tab-header-pagination{
            .mat-tab-header-pagination-chevron{
                border-color: $tab-border;
            }
        }
    }

    &.qms-tab-group-advanced.primary{
        background: $tab-dark-background;

        .mat-tab-labels{
            border-bottom: 1px solid $tab-primary-label;
        }
        .qms-tab-label{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            font-weight: 400;
            .mat-icon{
                color: $tab-primary-icon;
            }
        }


        .mat-tab-disabled{
            .qms-tab-label{
                color: $tab-primary-label;
                .mat-icon{
                    color: $tab-primary-label;
                }
            }
        }

        .mat-tab-label-active{
            .qms-tab-label{
                color: white;
                font-weight: 600;  
                .mat-icon{
                    color: white;
                }
            }
        }

        .mat-ripple.mat-tab-label{
            &:hover{
                background: $tab-primary-background-hover;
                .qms-tab-label{
                    font-weight: 600;
                }
            }

            &:focus-visible{
                background-color: $tab-primary-label;
            }

            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
            &.cdk-program-focused:not(.mat-tab-disabled){
                background-color: $tab-primary-label;
            }

            .mat-ripple-element{
                background-color: $tab-primary-label;
            }
            
            &.mat-tab-label-active{
                &:hover{
                    background: $tab-primary-background-hover;
                    .qms-tab-label{
                        font-weight: 600;
                    }
                }
                
                &:focus-visible{
                    background-color: $tab-primary-label;
                }

                .mat-ripple-element{
                    background-color:$tab-primary-label;;
                }
            }
            
            &.mat-tab-disabled:hover{
                background: $tab-dark-background;
            }
        }


        .mat-ink-bar{
            background-color: white;
        }


        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
            .mat-tab-header-pagination-chevron{
                border-color: $tab-primary-border;
            }
            
        }

        .mat-tab-header-pagination{
            .mat-tab-header-pagination-chevron{
                border-color: white;
            }
        }
    }

    &.qms-tab-group-advanced-fixed{
        .mat-tab-list{
            max-width: 100%;
            position: relative;

            .mat-ripple.mat-tab-label{
                flex: 1 1 auto;
            }
        }
    }
}


.mat-tab-nav-bar{
    &.qms-tab-group{
        .qms-tab-label{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $tab-dark-background;
            font-family: Open Sans, Arial, Sans-Serif;
        }

        .qms-tab-label:hover{
            font-weight: 600;
        }

        .mat-tab-label-active{
            color: $active;
            font-weight: 600;
        }

        .mat-tab-disabled{
            &.qms-tab-label, .qms-tab-label{
                color: black(0.24);
            }
        }

        .mat-tab-link.mat-tab-disabled:hover{
            background: white;
        }

        .mat-tab-link{
            opacity: 1;
            height: auto;
            min-height: 48px;
            &:hover, 
            &:focus-visible,
            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
            &.cdk-program-focused:not(.mat-tab-disabled),
            .mat-ripple-element{
                background: $tab-disable-background;
            }
        }

        .mat-tab-link:hover{
            font-weight: 600;
        }

        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
            .mat-tab-header-pagination-chevron{
                border-color: black(0.38);
            }
            
        }

        .mat-tab-header-pagination{
            .mat-tab-header-pagination-chevron{
                border-color: $tab-border;
            }
        }
    }

    &.qms-tab-group-advanced{
        .qms-tab-label{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: $tab-dark-background;
            font-family: Open Sans, Arial, Sans-Serif;
            font-weight: 400;
            .mat-icon{
                color: black(0.6);
            }
        }

        .mat-tab-label-active{
            &.qms-tab-label{
                font-weight: 600;
                color: $active;
                .mat-icon{
                    color: $active;
                }
            }
        }

        .mat-tab-disabled{
            &.qms-tab-label, .qms-tab-label{
                color: black(0.38);
                .mat-icon{
                    color: black(0.38);
                }
            }
        }

        .mat-tab-link.mat-tab-disabled:hover{
            background: white;
        }

        .mat-tab-link{
            opacity: 1;
            height: auto;
            min-height: 48px;
        }

        .mat-tab-link{
            &:hover{
                background: $tab-hover-background;
                font-weight: 600;
            }

            &:focus-visible{
                background-color: $tab-hover-background;
            }

            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
            &.cdk-program-focused:not(.mat-tab-disabled){
                background: $tab-hover-background;
            }

            .mat-ripple-element{
                background-color: $tab-hover-background
            }
            
            &.mat-tab-label-active{
                &:hover{
                    background: $tab-hover-background;
                    .qms-tab-label{
                        font-weight: 600;
                    }
                }
                
                &:focus-visible, .mat-ripple-element,
                &.cdk-keyboard-focused:not(.mat-tab-disabled), 
                &.cdk-program-focused:not(.mat-tab-disabled){
                    background: $tab-disable-background;
                }
            }
        }
        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
            .mat-tab-header-pagination-chevron{
                border-color: black(0.38);
            }
            
        }

        .mat-tab-header-pagination{
            .mat-tab-header-pagination-chevron{
                border-color: $tab-border;
            }
        }
    }

    &.qms-tab-group-advanced.primary{
        background: $tab-dark-background;
        
        .qms-tab-label{
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
            font-weight: 400;
            .mat-icon{
                color: $tab-primary-icon;
            }
        }
        
        .mat-tab-disabled{
            &.qms-tab-label{
                color: $tab-primary-label;
                .mat-icon{
                    color: $tab-primary-label;
                }
            }
        }

        .mat-tab-label-active{
            color: white;
            font-weight: 600;
            .mat-icon{
                color: white;
            }
        }
        

        .mat-tab-link{
            &:hover{
                background: $tab-primary-background-hover;
                font-weight: 600;
            }

            &:focus-visible{
                background-color: $tab-primary-label;
            }

            &.cdk-keyboard-focused:not(.mat-tab-disabled), 
            &.cdk-program-focused:not(.mat-tab-disabled){
                background-color: $tab-primary-label;
            }

            .mat-ripple-element{
                background-color: $tab-dark-background;
            }
            
            &.mat-tab-label-active{
                &:hover{
                    background: $tab-primary-background-hover;
                    .qms-tab-label{
                        font-weight: 600;
                    }
                }
                
                &:focus-visible{
                    background-color: $tab-primary-label;
                }

                .mat-ripple-element{
                    background-color:$tab-primary-label;;
                }
            }
            
            &.mat-tab-disabled:hover{
                background: $tab-dark-background;
            }
        }


        .mat-ink-bar{
            background-color: white;
        }


        .mat-tab-header-pagination.mat-tab-header-pagination-disabled{
            .mat-tab-header-pagination-chevron{
                border-color: $tab-primary-border;
            }
            
        }

        .mat-tab-header-pagination{
            .mat-tab-header-pagination-chevron{
                border-color: white;
            }
        }
    }

    &.qms-tab-group-advanced-fixed{
        .mat-tab-list{
            max-width: 100%;
            position: relative;

            .mat-tab-link{
                flex: 1 1 auto;
            }
        }
    }
}
