::ng-deep .mat-tab-label, ::ng-deep .mat-tab-label-active { min-width: 0 !important; } ::ng-deep .mat-tab-body-wrapper, ::ng-deep .mat-tab-body { height: 0%; width: 0%; } ::ng-deep .mat-tab-header { border-bottom: none !important; } .left-side-tabs-body { height: 100%; width: 100%; overflow: hidden; .left-side-tabs-contents { height: 100%; width: 100%; } } .container { display: flex; height: 100%; } .mat-tab-group { display: flex; width: 70px; flex-direction: row; } ::ng-deep .organization-side { flex-direction: column; height: 100%; } ::ng-deep .global-menu { border-right: 2px solid #4f4f4f; .mat-tab-label-container { background-color: #4f4f4f; .mat-tab-list { .mat-tab-labels { flex-flow: column; height: 280px; padding-top: 10px; .mat-tab-label { height: 80px; padding: 0 16px; } } .mat-ink-bar { background-color: none; height: 0; } } } } .left-group-side { position: relative; height: 100%; } ::ng-deep .mat-tab-label { .mat-tab-label-content { .icon-item { background: var(--white); border-radius: 4px; display: inline-flex; width: 36px; height: 36px; border-radius: 50%; justify-content: center; align-items: center; transform: scale(0.9); transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1); svg { width: 24px; height: 24px; stroke: #ffffff; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; fill: none; color: #2329d6; } } } &[aria-selected='true'] { opacity: 1; .mat-tab-label-content { .icon-item { background: #ef4c73; transform: scale(1); /*svg { stroke: #ef4c73; fill: #ef4c73; }*/ } } } }