@use '../../../../../../../apps/web/src/nav-list.scss';

:host {
    padding: 4px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mdc-list {
    padding: 2px 0;
}

.mat-nav-list {
    padding: 0;
    margin: 0;

    .portal-nav-link.mdc-list-item {
        min-height: 28px;
        height: 28px;
        padding: 0 !important;
        border-radius: 10px;
        margin: 2px 0;
        display: flex;
        justify-content: center;
        color: var(--mat-sys-on-surface-variant);

        .mdc-list-item__start {
            margin-inline-end: 0 !important;
            margin-inline-start: 0 !important;
        }

        .mdc-list-item__content {
            display: none;
        }
    }

    mat-icon.mat-mdc-list-item-icon,
    mat-icon {
        font-size: 18px !important;
        width: 18px !important;
        height: 18px !important;
    }
}

.navigation-bottom {
    margin-top: auto;
    padding-bottom: 2px;
}

.active {
    color: var(--app-selection-color);

    mat-icon {
        color: var(--app-selection-color);
    }
}

mat-divider {
    margin: 1px 0;
}

mat-icon {
    margin-right: 0;
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
}

a.mat-mdc-list-item.mdc-list-item {
    padding-right: 0;
}

.portal-status-container {
    app-region: drag;
    margin: -4px -4px 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--mat-sys-surface-container);
    color: var(--mat-sys-on-surface-variant);
    border: 1px solid var(--mat-sys-outline-variant);
}

.portal-status-container.status-active {
    background: var(--mat-sys-primary-container);
    color: var(--mat-sys-on-primary-container);
}

.portal-status-container.status-inactive,
.portal-status-container.status-unavailable {
    background: var(--mat-sys-error-container);
    color: var(--mat-sys-on-error-container);
}

.portal-status-container.status-expired {
    background: var(--mat-sys-tertiary-container);
    color: var(--mat-sys-on-tertiary-container);
}

.portal-status-container .status-watermark {
    font-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
    margin: 0;
}

.nav-section {
    app-portal-rail-links {
        display: block;
        padding: 0;
        margin: 0;
    }
}