/*
Tab Menu
==============================================
Custom skin styling for bootstrap card with included tab navigation.

https://getbootstrap.com/docs/5.2/components/card/#navigation
*/

.card-tabs {
    --#{$prefix}card-border-width: 0;

    .card-header {
        --#{$prefix}card-cap-bg: none;
        --#{$prefix}card-cap-padding-x: 10px;
    }

    .nav-item {
        margin-right: 10px;
    }

    .nav-link {
        --#{$prefix}nav-link-padding-x: 0;
        --#{$prefix}nav-link-padding-y: 5px;
        --#{$prefix}nav-link-color: #{$body-color};
        --#{$prefix}nav-tabs-border-width: 0;
        --#{$prefix}nav-tabs-border-radius: 0;
        --#{$prefix}nav-tabs-link-hover-border-color: #{$primary};
        --#{$prefix}nav-link-hover-color: #{$primary};
        --#{$prefix}nav-tabs-link-active-color: #{$body-color};
        --#{$prefix}nav-tabs-link-active-border-color: #{$primary};
        border-bottom: 2px solid $border-color;

        &.active,
        &:hover {
            background-image: none;
        }

        .product-cross-selling-tab-navigation {
            padding: 0;
        }

        &:hover {
            background-color: darken($body-bg, 20%);
        }
    }

    .card-body {
        padding-top: 30px;
    }
}
