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

.rail-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
}

.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);
    text-decoration: none;
    app-region: no-drag;
    animation: rail-link-enter 0.2s ease-out both;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

    &:hover {
        color: var(--rail-link-hover-color, var(--mat-sys-on-surface));
        background: var(
            --rail-link-hover-bg,
            var(--mat-sys-surface-container)
        );
    }

    mat-icon {
        font-size: 20px;
        width: 20px;
        height: 20px;
    }
}

@for $i from 1 through 8 {
    .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);
    }
}

.portal-rail-link.is-active,
.portal-rail-link.active {
    color: var(--rail-link-active-color, var(--app-selection-color));
    background: linear-gradient(
        145deg,
        var(--rail-link-active-bg-strong, var(--app-selection-surface-strong)),
        var(--rail-link-active-bg, var(--app-selection-surface))
    );
    box-shadow:
        inset 0 0 0 1px
            var(--rail-link-active-border, var(--app-selection-border)),
        0 10px 20px -16px
            var(--rail-link-active-glow, var(--app-selection-glow));
    transform: translateY(-1px);

    mat-icon {
        color: var(--rail-link-active-icon, var(--app-selection-color));
    }
}

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