@import '../core/variables.less';
@import '../theme/index.less';

@mi-tabs: ~'@{mi-prefix}tabs';
@mi-icon-tabs: ~'@{mi-prefix}icon-tabs';
@ant-tabs: ant-tabs;
.@{mi-tabs} {
    .@{ant-tabs} {
        &-top > &-nav:before {
            border-bottom-color: var(--mi-border, @mi-border);
        }
    
        &-tab {
            color: var(--mi-font, @mi-font);
    
            &-btn:active,
            &-btn:focus {
                color: var(--mi-font, @mi-font);
            }
        }
    
        &-tab:hover,
        &-tab:focus,
        &-tab:visited,
        &-tab:active {
            color: var(--mi-theme, @mi-theme);
        }
        
        &-ink-bar {
            .linear-gradient-background-theme();
        }
    }
}

.@{mi-icon-tabs} {
    .@{ant-tabs} {
        &-tabpane {
            .grid(11, 4);
            .properties(max-height, 420);
            overflow-y: auto;
            overflow-x: hidden;

            @media only screen and (max-width: 768px) {
                .grid(5, 4);
            }

            .anticon {
                .properties(width, 48);
                .properties(height, 48);
                .flex();
                .border-radius();
                .linear-gradient-background-grey();
                cursor: pointer;
                .properties(margin-bottom);
                .properties(font-size, 24);
    
                &:hover {
                    .linear-gradient-background-theme();
                    color: var(--mi-font, @mi-font);
                }
            }
        }
    }
}

.@{ant-tabs}-dropdown {
    z-index: @mi-z-index-peak !important;
}

.@{mi-tabs}.@{ant-tabs} .@{ant-tabs}-tab-active .@{ant-tabs}-tab-btn,
.@{mi-tabs}.@{ant-tabs} .@{ant-tabs}-tab-active .@{ant-tabs}-tab-btn:focus,
.@{mi-tabs}.@{ant-tabs} .@{ant-tabs}-tab-active .@{ant-tabs}-tab-btn:hover {
    color: var(--mi-theme, @mi-theme);
}