TabGroup.scss

/*
 * Copyright (c) 2024. Devtron Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@mixin svg-styles($color) {
    svg.tab-group__tab__icon *[stroke^='#'] {
        stroke: $color;
    }

    svg.tab-group__tab__icon *[fill^='#'] {
        fill: $color;
    }
}

.tab-group {
    list-style: none;

    &__tab {
        $parent-selector: &;
        position: relative;

        @include svg-styles(var(--N700));

        .underline {
            height: 2px;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
        }

        &--active {
            @include svg-styles(var(--B500));
        }

        &:hover:not(.tab-group__tab--block):not(.dc__disabled) {
            color: var(--B500);
            @include svg-styles(var(--B500));

            svg.icon-component-color {
                --overrideIconColor: var(--B500);
            }
        }

        &__badge {
            border-radius: 10px;
            min-width: 20px;

            &--medium {
                min-width: 18px;
            }
        }

        &__indicator {
            width: 6px;
            height: 6px;
            border-radius: 100%;
        }

        &__description {
            list-style: none;
        }

        &__nav-link {
            &.active {
                color: var(--B500);
                font-weight: 600;
                @include svg-styles(var(--B500));

                svg.icon-component-color {
                    --overrideIconColor: var(--B500);
                }
            }

            &:not(.active) {
                color: var(--N900);
            }

            &:hover:not([aria-disabled='true']) {
                color: var(--B500);
            }
        }
    }
}