.app-tabs {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: var(--wm-tabs-background);

    >.tabs-list {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 121;
        font-size: 0;
        color: var(--wm-tabs-item-heading-text-color, #000);
        background-color: var(--wm-tabs-background);
        padding: var(--wm-tabs-border-width, 4px) 0;
    }

     .nav-tabs {
        display: flex;
        align-items: stretch;
        border-bottom: var(--wm-tabs-border-width) var(--wm-tabs-border-style) var(--wm-tabs-border-color);

        >.tab-header {
            display: inline-flex;
            align-items: center;
            margin: 0px;
            background-color: var(--wm-tabs-item-heading-background);
            padding: var(--wm-tabs-item-heading-padding);
            border-width: var(--wm-tabs-item-heading-border-width);
            border-style: var(--wm-tabs-item-heading-border-style);
            border-color: var(--wm-tabs-item-heading-border-color);
            border-radius: var(--wm-tabs-item-heading-border-radius);
            .tab-heading {


                background-color: transparent;
                color: var(--wm-tabs-item-heading-text-color);

                .app-icon {
                    color: var(--wm-tabs-item-heading-icon-color);
                }

                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                min-height: var(--wm-tabs-item-heading-line-height);
                padding: var(--wm-tabs-item-heading-padding, 8px);
                font-size: var(--wm-tabs-item-heading-font-size);
                font-weight: var(--wm-tabs-item-heading-font-weight);
                line-height: var(--wm-tabs-item-heading-line-height);

                &:after {
                    content: "";
                    position: absolute;
                    bottom: 0;
                    height: var(--wm-tabs-item-heading-indicator-height);
                    width: 100%;
                    background: var(--wm-tabs-item-heading-indicator-background);
                    transform: scale(0);
                    transition: all 0.2s ease-in-out;
                }      
            }

            &.active {

                padding: var(--wm-tabs-item-heading-padding);
                border-width: var(--wm-tabs-item-heading-border-width);
                border-style: var(--wm-tabs-item-heading-border-style);
                border-color: var(--wm-tabs-item-heading-border-color);
                border-radius: var(--wm-tabs-item-heading-border-radius);
                background-color: var(--wm-tabs-item-heading-background);
                color: var(--wm-tabs-item-heading-text-color);

                .app-icon {
                    color: var(--wm-tabs-item-heading-icon-color);
                }

                .tab-heading {



                    &:after {
                        background: var(--wm-tabs-item-heading-indicator-background);
                        transform: scale(1);
                        transition: all 0.2s ease-in-out;
                    }
                }
            }

            &.disabled {
                .tab-heading {
                    opacity: 0.5;
                    cursor: not-allowed;

                    &:after {
                        display: none;
                    }
                }
            }
        }
    }

    >.tab-content {
        background: var(--wm-tabs-background);
        // padding: var(--wm-tabs-item-heading-padding, 0px);
        padding: 0px; // replace with appropriate token for 0px.
    }

    .tab-pane {
        .tab-body {
            border-color: transparent;
        }
    }
    
}

.nav-tabs>li.active>a {
    background-color: transparent;
    border-color: transparent;
}