@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 {
        padding: $spacing-400 $spacing-500;
        height: 100%;
        border-left: 1px solid $gray-200;

        &:first-child {
            border: none;
        }

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

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

        icon {
            margin-right: $spacing-100;

            ::ng-deep svg {
                height: 16px;
                width: 16px;
            }
        }
    }
}

.manager-tools-nav {
    align-self: center;
    margin-left: auto;
    padding-right: 0;
    width: 11rem;

    .dropdown-toggle {
        color: $gray-900;

        icon {
            padding: $spacing-100;

            ::ng-deep {
                svg {
                    width: 1rem;
                    height: 1rem;
                }
            }

            &.small ::ng-deep {
                svg {
                    width: 0.65rem;
                    height: 0.65rem;
                }
            }
        }
    }

    .dropdown {
        &-menu.active {
            position: absolute;
            z-index: 9999;
            top: 2rem;
            left: -6rem;
            background: white;
            width: 16rem;
            border-radius: 0.25rem;
            box-shadow: $shadow-100;
            padding: 0.5rem 0;
        }

        &-section-header {
            padding: 1rem 1rem 0.5rem 1rem;

            text-transform: uppercase;
            color: $gray-900;
            font-size: $type-size-100;
            font-weight: 800;
            letter-spacing: 5%;
        }

        &-item {
            padding: 0.5rem 1rem;
            transition: all 300ms ease;
            font-size: $type-size-200;
            color: $primary;
            border: none;
            cursor: pointer;

            &-item:first-of-type,
            &-item:last-of-type {
                border: none;
            }

            &:hover {
                color: $white;
                background-color: $secondary;
            }
        }

        &-divider {
            border-bottom: 1px solid $gray-200;
        }
    }
}
