@use "/src/scss/abstracts" as *;

.nav-container {
    height: 100%;
}

.dashboard-navbar {
    display: flex;
    align-items: flex-start;
    background-color: $gray-50;
    border-bottom: 1px solid $gray-200;
    border-radius: $spacing-200 $spacing-200 0 0;
    height: 98%;
    max-height: 60px;

    .tab {
        background-color: $white;
        color: $primary;
        padding: $spacing-400 $spacing-500;
        height: 100%;
        border: none;
        border-left: 1px solid $gray-200;

        &:first-child {
            border: none;
        }

        &:last-of-type {
            border-right: 1px solid $gray-200;
        }

        &.active {
            height: 103%;
            border-top-left-radius: $spacing-200;
        }

        icon {
            margin-right: $spacing-200;

            ::ng-deep svg {
                height: 16px;
                transform: translateY(2px);
            }

            &.large ::ng-deep svg {
                height: 24px;
                transform: translateY(6px);
                margin-top: -8px;
            }
        }
    }
}

// .support-sidebar {
//     &__header {
//         display: grid;
//         gap: $spacing-400;
//         padding: $spacing-700 $spacing-600;
//         text-align: center;
//     }

//     &__title {
//         font-size: 16px;
//         color: $blue-700;
//     }

//     .support-logo {
//         ::ng-deep svg path {
//             fill: $blue-700;
//         }
//     }
// }
