@tabBorderBottomColor: #ddd;
@disabledTabBackgroundColor: #f8f8f8;
@enabledTabHoverBorderColor: #eee;
@enabledTabHoverBackColor: #e8e8e8;
@enabledTabBackColor: @pillBackColor;
@activeTabColor: #555;
@activeTabBackColor: @defaultBkColor;
@linkColor: black;

.skin-aida {
    tabs.nav-tabs, 
    tabs.nav-pills {
        border-bottom: none;

        tabs-header {
            > ul.nav-tabs {
                margin-bottom: 10px; 

                tab-header {
                    > li {
                        position: relative;
                        display: block;
                        float: left;
                        margin-bottom: -1px;
                        margin-left: 5px;
                        line-height: 1;
                        border-top: 2px solid transparent;

                        > a {
                            position: relative;
                            display: block;
                            padding: 10px 15px;
                            cursor: pointer;
                            background-color: @enabledTabBackColor;
                            color: @linkColor;
                            font-weight: normal;
                            margin-top: 0;
                            margin-left: 2px;
                            margin-right: 2px;
                            line-height: 1.42857143;
                            border: none;

                            &:hover {
                                border-color: @enabledTabHoverBorderColor;
                                color: ligthen(@linkColor, 5%);
                                background-color: @enabledTabHoverBackColor;
                            }
                        }
                        
                        &.disabled {
                            > a,
                            > a:hover {
                                color: @disabledColor;
                                background-color: @disabledTabBackgroundColor;
                                cursor: default;
                            }
                        }

                        &.active {
                            .badge,
                            .label {
                                background-color: @activeColor !important
                            }

                            > a,
                            > a:hover,
                            > a:focus {
                                color: @activeTabColor;
                                background-color: @activeTabBackColor;
                                border-top: 2px solid @activeColor;
                                font-weight: 600;
                            }
                        }

                        .badge,
                        .label {
                            float: left;
                            position: absolute;  
                            top: -6px;
                            right: -2px;
                            font-size: 11px;
                            font-weight: 400;
                            background-color: @pillLabelBackColor !important;
                        }
                    }
                }
            }
        }
    }

    tabs.nav-tabs {
        tabs-header.nav-tabs {
            margin-bottom: 10px;

            >ul.nav-tabs {
                tab-header {
                    >li {
                    
                        >a {
                            border: 1px solid transparent;
                            border-radius: 4px 4px 0 0;
                        }

                        &.active {
                            border-top: 2px solid @activeColor;
                            
                            >div,
                            >a,
                            >a:focus,
                            >a:hover {
                                background-color: transparent;
                                border: none;
                                margin-top: 0;
                            }

                            >div, 
                            >a {
                                font-weight: normal;
                            }

                            .badge,
                            .label {
                                background-color: @activeColor !important
                            }
                        }
                    }
                }
            }
        }
    }

    tabs.nav-pills {
        tabs-header.nav-pills {
            > ul.nav-tabs {
                margin: 20px;
                
                tab-header {
                    > li {
                        padding-right: 10px;
                        
                        > a {
                            padding: 10px 20px;
                            border-radius: 4px;

                            &:hover {
                                border-color: @enabledTabHoverBorderColor;
                                color: ligthen(@linkColor, 5%);
                                background-color: @enabledTabHoverBackColor;
                            }
                        }

                        &.disabled {
                            > a,
                            > a:hover {
                                color: @disabledColor;
                                background-color: @disabledTabBackgroundColor;
                                cursor: default;
                            }
                        }
                        
                        &.active {
                            border-top: none;

                            > div,
                            > a,
                            > a:hover,
                            > a:focus {
                                border-top: none;
                                background: @activeColor;
                                color: white;
                            }

                            .badge,
                            .label {
                                background-color: @pillLabelBackColor !important
                            }
                        }
                    }
                }
            }
        }
    }
}