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

:host {
    display: block;
    width: 100%;
    --rail-link-color: var(--mat-sys-on-surface-variant);
}

.p-0.m-0 {
    .portal-rail-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(--rail-link-color);
        transition:
            background 0.2s ease,
            color 0.2s ease,
            box-shadow 0.2s ease,
            transform 0.2s ease;

        .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;
    }
}

nav.flex .portal-rail-link {
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    border-radius: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rail-link-color);
    app-region: no-drag;
    animation: rail-link-enter 0.2s ease-out both;
}

@for $i from 1 through 8 {
    nav.flex .portal-rail-link:nth-child(#{$i}) {
        animation-delay: #{($i - 1) * 30}ms;
    }
}

@keyframes rail-link-enter {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

nav.flex .portal-rail-link.is-active,
nav.flex .portal-rail-link.active {
    box-shadow:
        inset 0 0 0 1px var(--app-selection-border),
        0 10px 20px -16px var(--app-selection-glow);
}

nav.flex .portal-rail-link.is-active::after,
nav.flex .portal-rail-link.active::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    border-radius: 999px;
    background: var(--app-selection-color);
    box-shadow: 0 0 10px var(--app-selection-glow);
}
